Accessibility: make your website barrier-free with a11ym!

Accessibility is not only about people with disabilities but also about making your website accessible to search engines robots. This blog post shares our experience with making the website of a famous luxury watchmaker more accessible, an important e-commerce application. We have built a custom tool, called The A11y Machine to help us crawl and test each URL against accessibility and HTML conformances. Less than 100 hours were required to fix a thousand of strict errors.

Issues with unaccessible application

Accessibility is not just a matter of helping people with disabilities. Of course, it is very important that an application can be used by everyone. But, have you ever considered that robots are visitors with numerous disabilities? What kind of robots you may ask, well: Search engine robots for instance, like Google, Bing, DuckDuckGo, Baidu… They are totally blind, they don’t have a mouse, they don’t have a keyboard, they must understand your content only with the source code.

Whilst it is easy to consider a man or a woman with a pushchair having a bad time in public transport, someone color-blind, a widespread disability, could also have issues browsing the web.

Several domains are concerned by the accessibility of an application:

  • Content description, the use of appropriated HTML tags and attributes help to structure the content of a document (like nav, main, article, aside, footer etc.),
  • Design of the content, the use of appropriated colors, contrasts, size of elements, layouts, animations etc.,
  • SEO, a content that is understandable by a robot can be well referenced, and search engines can print more content, like associated links or menus (with “Jump to”, or “Related section” etc.),
  • Development framework, using ARIA recommendations help to create rich applications with good, clear and relevant practices (aria-hidden to hide an element, aria-describedby to describe objects, all roles like tab, tabpanel, progressbar, alert, dialog etc. to create your own component),
  • Legal, where more and more foundations or group of people attend to sue companies for not respecting common recommendations. Unfortunately, while this might be good to improve the status of accessibility for Web applications, it also turns into a juicy market…

In other words, from an editor’s point of view, making a product accessible is unavoidable, and even beneficial.

Do not think that the mobile market is somehow different. iOS and Android are gently becoming the first screen readers of the market, even for Web content.

However, testing the accessibility conformance is often a matter of money. It is costly because it takes time to check everything. Now, this is no longer the case.

E-commerce solution of a luxury brand

Our client, a famous watchmaker’s application is an important e-commerce solution, with more than 16 domains, 10 languages, 1000+ products, and hundreds of thousands of visitors from around the globe.

A simple calculation quickly shows that it is very hard to check the application page by page (better say URL by URL). Content can differ according to language, the business constraints, available products, localized features etc.

For this reason, we were looking for a tool that does 3 things:

  1. Crawls an entire application based on a starting URL,
  2. Tests each URL against pre-defined conformance levels/accessibility rules,
  3. Can be installed locally for privacy concerns.

Searching online, we found several awesome tools doing either point 1, or point 2, or point 3, but never all 3 at once. So we decided to develop our own tool, called The A11y Machine (a11ym for short). More below.

Conformance levels

Several accessibility recommandations exist, like:

We might consider the following recommandation too:

Conforming to the HTML specification guarantees that the document is not broken, which is a good basis.

Our client’s goal was to reach the WCAG 2.0 AA conformance level, with HTML recommendation. Some other specific SEO rules have been added, like: Only one h1 per page, or no link with an empty target (Learn how to write your own rules).


In less than 100 hours, we have been able to fix more than 1300 strict errors and 400 warnings. As a result, with a team of 3 motivated developers, it took around 4 days to fix everything (including developing The A11y Machine)!

Given a starting URL, The A11y Machine extracts each URL from this document. For each extracted URL, the same operation is repeated until the maximum of URL to compute is reached.

In parallel, several tests are ran on each URL. They are categorized in 2 groups: Accessibility (e.g. WCAG) and other (e.g. HTML). Test results are stored as standalone HTML reports. Why standalone? Because it makes it possible to simply attach the report to an email, so that everyone is able to read and interact with it, even offline.

A report contains only errors. They are classified in 3 classical categories: Error, warning and notice. A CSS selector is provided to better select and analyse the culprit element, in addition to a very complete description, and a link to the recommendation. For instance:

  • Error: “This button element does not have a name available to an accessibility API. Valid names are: title attribute, element content”,
  • Code: H91,
  • Rule name: #BRAND.Principle4.Guideline4_1.4_1_2.H91.Button.Name,
  • Selector: #reel-collection_product-section-580456752a01b > button:nth-child(1),
  • Code extract: <button class="reel__previous btn btn--bare btn--disabled" data-navigate="previous">.
A typical error message

A typical error message

With all these information in hands, it is really easy for a developer to target the element and fix it. Accessibility recommendations are not always hard to apply. Indeed, they are mostly hard and long to detect. This tool really eases this step, thus reducing the costs of making an application accessible.

Automated testing and reports

Every Monday, a11ym computes a new report. It crawls a set of pre-defined URLs that are important for our customer, and applies all the tests on these URLs.

A board displays the evolution over time. For obvious confidentiality reasons, we cannot display anything about our client. Consequently, the following screenshots are reports from our own website:

Example of a typical a11ym dasboard.

Example of a typical a11ym dasboard.

We regularly check this board to see if we have introduced a regression or not. When developing, we can also run The A11y Machine on our local server and check if everything conforms. It takes less than 10 minutes to check hundreds of URLs.

The following screenshot is the index of all reports per URLs.

A typical index of all reports generated by a11ym.

A typical index of all reports generated by a11ym.

The following screenshot is a detailed report for one specific URL.

A typical report generated by a11ym

A typical report generated by a11ym

Build upon awesome tools

The A11y Machine is mostly an orchestration of several tools:

  • node-simplecrawler to crawl the Web application, but a custom exploration algorithm has been developed to detect various errors with the lowest similarities (all products may have the same portion of errors because the HTML structure is rather the same, so we need diversity to target more relevant errors). This exploration algorithm also supports parallelism,
  • PhantomJS to open a headless browser and executes HTML_CodeSniffer in order to check the accessibility conformance. This step is semi-automated with the help of pa11y,
  • The Nu HTML Checker for the HTML conformance.

Learn more about how these tools are used and orchestrated.

We ❤️ Open Source

The A11y Machine is open source, under a BSD-3 license. It is developed on Github, under the liip/TheA11yMachine repository.

If you need anything or would like to contribute, you will be very welcome. Let’s break the barriers together and make the Web more accessible!

Tags: , , , ,

Self-Organization – Nothing But Talk?


It’s incredible how the topic of self-organization emerged over the past few years. In 2016 we reached an amount of attention we had never seen before. We were invited so many times to talk at conferences, in schools, for communities and many big corporations on all levels up to the top management. And the media covered the topic widely. Some in the industry even thought this was a marketing campaign above all. But far from it.

Time to reflect how we got here, why we gained this attention and where we are heading to.

Continue reading about Self-Organization – Nothing But Talk?

Tags: ,

A fairly complex Drupal Commerce site:

Freitag logoOur latest site with Drupal Commerce 1.x went live in July 2016. It is Freitag. Since then we’ve been adding several new commerce related features. I feel it’s time to write a wrap-up. The site has several interesting solutions, this article will focus on commerce.

First a few words about the architecture. hosts the site. The stack is Linux + nginx +  MySQL + PHP, the CMS is Drupal 7. Fastly caches http responses for anonymous users and also for authenticated users having no additional role (that is, logged-in customers). Authcache module takes care of lazy-loading the personalized parts (like the user menu and the shopping cart). Freitag has an ERP system to which we connect using the OCI8 PHP library. We write Behat and simpletest tests for QA.

We use the highly flexible Drupal Commerce suite. 23 of the enabled Freitag contrib modules have a name starting with ‘commerce’. We applied around 45 patches on them. Most of the patches are authored by us and 15 of them have already been committed. Even with this commitment to solve everything we could in an open-source way we wrote 30.000+ lines of commerce-related custom code. Still, in March 2016 Freitag was the 3rd largest Drupal customer contributor.

Continue reading about A fairly complex Drupal Commerce site:


Five Steps to define your perfect Digital Learning Environment

Sometime ago, I ran into a quote about learning that sticks into my mind. There are a lot of quotes hunting the social media networks, but this one just didn’t want to go away. It was the starting point of a reflection on how to create a great learning experience for today’s learners. I end up with five simple but essential steps that I will share with you in a series of posts. We will start today with a short overview of these steps.  

Digital Learning Environment in 5 steps


This quote from Albert Einstein resonates to me like the perfect antithesis to most of the Learning Management Systems that I’ve seen up to now. In terms of technology and functionalities they are perfect, but there is no experience, no emotion when you use them. They deliver the exact opposite of what learners expect: they deliver just information.

Learning is an Experience

Continue reading about Five Steps to define your perfect Digital Learning Environment

Tags: , , , , , , , ,

Swissquote: How to become a leader in banking in 26 years?

Swissmarketing Vaud invited Jan De Schepper, Head of Marketing at Swissquote. I expected a guide to be a leader in a few simple steps. Highly interesting, this conference actually felt like one of my masterclass.
Report of the conference

Jan de Schepper

At this conference, what I wanted to know was how to become a leader. I expected De Schepper to hand me over the strategic marketing keys to success. The secret recipe for me to make Liip, my entreprise, an absolute leader in web development.
What kind of advice did I get?

Swissquote, a content brand

According to De Schepper, the foundation of a company leaves a significant mark. The founders, Marc Bürki et Paolo Buzzi owned Marvel Communication SA, a company specialized in financial information softwares. Once they figured out that they could provide the services they were talking about, Swissquote became a bank and IPO’d as such on the 29th of May 2000. The focus of Swissquote was on content creation right from the beginning.

A basic brand structure

At Swissquote, they believe that the brand defines who they are and how they act. Their brand structure is actually not original, as it involves a vision and six values.
In De Schepper’s words, a vision is like an Evening Star (Etoile du Berger in French). It is what leads your way.

To be the world’s most pioneering and intuitive online bank.

They are two essential words building this vision: pioneering and intuitive. “We are and want to stay pioneer, because our concurrence is international.” says De Schepper. Thus, innovation is fundamental. Secondly, UX is key, everything from the service to the platform has to be intuitive.

Swissquote has 6 fundamentals brand values

  • Dare to be different
  • In pursuit of excellence
  • Unite as one
  • Always say it how it is
  • Champion the customer
  • Do the right thing

Tips and tricks to create content

Be customer-focused, not product-focused

You should create and use personas. Personas must define who the users are with as much details as possible. It is easier to produce content when you have someone specific in mind. At Swissquote, they statistically analyzed data from their users to create their personas. Then they did some focus group to refine their analyses.

Secondly, they analyzed the Trader Journey to see what can be done in order to increase the conversion from one step to another. The content is then based on the needs and expectations of the users during their journey. In other words, they analyse the blockers in the Trader Journey. For example, does the type user X miss information at a certain point in his journey? Which info? How can it be provided?

Think as a publisher

When you create content, you should think as a publisher, not as an advertiser. You do not promote your product, you provide:

  • Information
  • Inspiration
  • Utility
  • Entertainment

Create valuable content

In order to be valuable, the content you create has to fulfill the following adjectives (see picture).


For example: Authentic: do not speak about something you have no idea about
Sharable: People share because they want transmit something about themselves, who they are, what they believe in. It’s egoistic. Provide content according to who your users are.
Collaborative: Have partners that bring you visibility

Plan the diffusion

Think in terms of three categories:

  • Paid media : the content you pay to be published (advertisement),
  • Owned media: the communication channel you own,
  • Earned media: the channel that publish your content (for example, you video on someone else’s page).

De Schepper best advice

…according to me, it is the best piece of advice: Iterate!
Try once, analyse, do it again with slight changes, analyse, try again and go on and on.

Swissquote Magazine as a case study

As an example, you can see the strategy of the publication in the pictures of the slides at the end of the article.

To conclude: apply your theory and iterate

De Schepper reminded me of my master class. I got out thinking that I should carefully stick to what I learnt. In the turmoil of daily business, I mostly feel that I should act and that standstill is the worst.
In fact, I know the theory to become a leader or make my entreprise a leader. However the team at Swissquote is a master in applying these theories. One of their most brilliant success, is the creation of a magazine, which is today an authority in their field of expertise.
The secret recipe is iteration. I should take the time to analyse. Each analysis is an opportunity to do better and increase the success of my next marketing action.


Swissquote Magazine

Swissquote - objective



Tags: , , , , , , , , ,

How to reduce your development and maintenance costs with APIs?

An API-based solution has many advantages. The biggest one is the significant spare on development and maintenance costs, thanks to a modular infrastructure. With the example of a recent work for a watch manufacturer, this blog post explains you in 4 points what added value an API can bring to your IT environment.

Context: a manufacturer’s production line without a central server

We were recently involved in the digital transformation of a manufacturer’s production line. The main issue of this manufacturer was control-desktops that were not centrally managed. In consequence, for each code change, an update was required on each control-desktop. It was an expensive and time-consuming process.

Production line - A

This image represents a production line with standalone control-desktops, and their costly maintenance routines.

Continue reading about How to reduce your development and maintenance costs with APIs?

Tags: , , , , , ,

User Testing Part 1/2 : Why you should perform them – The risks you avoid

If the team working on a project is competent, why should it be bothered with user testing? Because user testing does not mean that anyone is not competent enough. User testing is about avoiding risks and improving a product.

Great teams sometimes deliver wrong products

Yes, why?  We perform WELL, we are talented designers, Product owners, Product designers, we know our business, we are good enough so that we don’t design unusable stuff… Therefore, our clients can rely on us for delivering simple, intuitive and cutting the edge experiences through great products…

However, there are terrible websites online. There are terrible products on the shelves, there are garments that just don’t fit what they are supposed to, there are tools supposed to simplify our lives, but they are just bringing more complexity to our lives.

Continue reading about User Testing Part 1/2 : Why you should perform them – The risks you avoid

Tags: , , , , , , , ,

Embracing the opposite – Andy Yen and Bertrand Piccard at #ICTimpuls16

I quickly rushed to Lucerne this afternoon for the ICTimpuls16-track about how to succeed with selling Swiss ICT services and products abroad. And for Bertrand Piccard’s keynote – it was worth the time.

Andy Yen of Geneva (and San Francisco) based ProtonMail gave a very encouraging speech about how to present one’s company and products in a different market like the U.S. – it’s basically all about being way more bold than we are used in Swiss culture, embracing risk, and seeking to fail as fast as possible. By investing in sales in the U.S., ProtonMail actually “got the rest of the world for free”. My question, if ProtonMail is also active in other domains of myData than e-mail, or considering to move into that direction, Andy answered in the affarmative. I am very much looking forward to what’s coming there in the future. Thanks, Andy, for your great insights!

(no picture)

I would have liked to post a picture of one of Andy’s slides here, but it’s written “confidential” on them – don’t know, how serious he is about that.

Bertrand Piccard – on the big stage – managed to catch the attention of the audience masterly. A psychiatrist by formation, and a leader by talent he inspired my thoughts throughout his speech. Betrand advocated for always changing one’s altitude to be able to find solutions. Surrounding oneself with less of the same, more divers people surely is supporting that. To be innovative and creative, one has to drop ballast – one’s beliefs, certitudes – and try the opposite. Erradicating emotions and applying a pragmatic attitude can help. Being innovative is not tied to achieving something spectacular, but allowing and fostering to think in other directions. “If one accepts a crisis, it becomes an adventure – if one does not, it stays a crisis”. Life is less about what I know, but more about my doubts and being able to ask questions.

Betrand ended with asking the audiance: “What story do you want to tell? What’s your dream?” I bet everyone in the room was thinking about what ballast one could drop to reach one’s dream. Listening to critical voices helps you in answering that decisive question. Thanks, Bertrand, for your continuous engagement in making our world more energy efficient!

Tags: , ,

TEDxCERN: Don’t be afraid of technology

Technology is just a tool! In one of the most prestigious place for researches, brilliant scientists shared their inspiration during a whole afternoon. Ripples of curiosity was the theme. This is my report of the conference.

Some people travel to visit the CERN, whereas I had never been there. It is not an impressive building lost in the middle of a green field in the countryside of Geneva like I pictured it. It is lost in a suburban area and the building is not high. Rather, it has long, never-ending corridors filled with doors leading to little offices. It’s very quiet, people whispers there. It looks nothing like the big open space that I am used to. However the people I listened too, have the same conviction about their projects.

Continue reading about TEDxCERN: Don’t be afraid of technology

Tags: , , , , , ,

Easy Storyboard translation in Xcode with Swift3

In this post I explain how we created a modular library. Today we are happy to release and open source this lib. You can find the code on GitHub. Our objective was to have one set of translation files that could be used in the storyboard and Swift.

In our multilingual iOS projects, we always struggled to translate storyboards in Xcode. We checked all around CocoaPods, but couldn’t find any efficient solution so far. Every time, we ended up with multiple versions of the storyboard along with multiple versions of ‘Localizable.strings’. It was hard to keep everything under control, specially when translations needed to be updated throughout all files.

Continue reading about Easy Storyboard translation in Xcode with Swift3

Tags: , , , , , ,