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.

Continue reading about Accessibility: make your website barrier-free with a11ym!

Tags: , , , ,

Swiss Confederation, the Styleguide version 3

What is a StyleGuide for ?

It is a long-term and flexible solution listing and exemplifying web components and tools useful to create a website. For instance, it explains how to use each component, how they should appear on the web and interact. It is a support for developers while integrating, and useful for designers, as it allows them to keep a general vision on the style and the system’s functionalities. It is obviously necessary to keep a StyleGuide up-to-date, anytime the Corporate Design or Corporate Identity is modified.

Why is it for the Swiss Confederation useful?

The Swiss Confederation is split in multiple departments, each of them owning one or more website. The StyleGuide supplies them a common ground for the creation and their websites, while ensuring a coherent visual identity for the user. The StyleGuide does not only offers web-component AA certified according to the Web Content Accessibility Guidelines’ recommendations about accessibility, it also provides additional information. The StyleGuide aims at ensuring a wide access to information to any kind of users, including disabled people (for instance sight or hearing disability). These recommendations are also useful to all users.

Swiss Confederation Web Guideline 3

Swiss Confederation web guidelines define the graphic guidelines of the Swiss Confederation on the web. It ensure coherence on the different websites developed under the admin.ch domain.

Innovations of the 3 version

  1. Change in the system generating the StyleGuide. Hologram (coded in Ruby) was replaced by Fabricator (identic but coded in Node). It facilitates its installation and development with Windows
  2. It is translated in the swiss national languages
  3. The components’ accessibility is improved (AA)
  4. Problems raised on Github solved

Who are the users ?

The StyleGuide is to be used by internal federal project manager and external service providers. The code is opensource, each can use, modify, solve issues or propose improvement. The StyleGuide is very convenient to use in all projects and easy to install with NPM or Bower. It is possible to download an archive or duplicate the project from Github. The whole installation process is available on Github.

The last version of the StyleGuide is built on a Fabricator. It is automatically multilingually generated with Gulp. Gulp is also gathers and improve all necessary files for the framework to work properly. The documentation is written in markdown, the components are dynamic templates Handlebars. The translation is performed with the support of a personalised Handelbars, referencing translated files in YAML.

“Conférence Romande sur l’Accessibilité du Web” wrap up

Yesterday took place the first Conférence Romande sur l’Accessibilité du Web” organized by Telono in Geneva and Liip was well represented by me, Brian King and Jonas Vonlanthen.

This was also a great opportuniy to have a closer look at some of the real-life accessibility problems and the solutions proposed.

The organizazion was perfect and everything went fine.

I was also surprised by the high number of participants and the interest they had in almost all of the topics proposed and discussed.

The schedule was very “dense” with 8 presentations to be followed from 9 to 18 with a lunch break, of course.

Liip contribution

I presented the talk “Optimisation de l’accessibilité and Responsive Design: étude de cas” where I showed the efforts we made during the development of Liip.ch relaunch to improve the accessibility and the semantic of the whole site.

Also had the opportunity to present the implementation of the responsive design that shaped up after the dedicated hackday in November and the recent mini-sprint.

People showed their interest and also asked questions. Definitely not a boring talk ;-)

The other talks

The first two presentations have been given by two visually impared people (Julien Conti and Christophe Oberson) showing how to overcome common accessibility issues in everyday web browsing.

The great thing was that they also suggested/proposed how to not do things that are a known source of problems.

Julien Conti also introduced the (soon to be released) “BrailleTouch” iPhone app.

Yannick Guerdat (Artionet) presented the work done to make jura.ch fully accessible and certified.

Very valuable contributions came from the two Telono organizers, Carine Rivière and Laetitia Giannettini who talked, among other things, about the relationship between ergonomy and accessibility.

Markus Riesch of Access for all foundation let us know the state of accessibility in Swiss public institutions and the Swiss laws currently applying to the accessibility subject.

The most interesting contributions came from Jean-Pierre Villain (Qelios) and his co-relator Romain who went through the WCAG 2.0 directives and proposed some concrete ARIA solutions to make Javascript implementations accessible.

They also showed the great accessibility support on the iPhone.

Conclusion

Not that much to add, only looking forward to the 2013 edition for another great apportunity to learn and share.

Feel free to check the slides of the presentation.

And finally some pics…..

Telono organizers introducing the program

Attendees following the talks

Jean-Pierre Villain about the ARIA in forms

Romain explaining how to use Voice Over on iPhone

Tags:

Techday Slides: Flash and the Quest for Accessibility

Sandro talked about his terrific implementation for making one of the first (I’m sure, but can’t proof it ..) fully accessible Flash games out there. It got the highest rating by Access for all and they blogged about it.

Unfortunately Sandro can’t make his presentation available (his slides engine doesn’t have an export function (yet)), but it was basically what he wrote in his 2 blog posts here on this blog. So read Post 1 and Post 2 to get all the information you need.

By the way, the game can be found at http://www.postfinance-eventmanager.ch/

Tags: , ,

Flash & the Quest for Accessibility – Part #2

overview part #2

In this two-part blog post i will cover the technical, as well as overall aspects of this endeavour. Go here for the first blog post on accessibility. This second part will cover all the technically nitty-gritty, blood and tears that went into implementing accessibility for this project. :)

Read on to find out more..

Continue reading about Flash & the Quest for Accessibility – Part #2

Tags: , , , ,

Flash & the Quest for Accessibility – Part #1

Preamble

The greater part of last year i was heads-down-busy developing the EventManager Game which we had the pleasure to build for Postfinance. EventManager is an educational but fun game, that approaches topics such as budgeting, financing and investing in a modern way (read: not boring you to death).

Today i want to talk to you about the new iteration of the game that we just released a couple of weeks ago. What is new you ask? How about: Accessibility!


overview part #1

In this two-part blog post i will cover the technical, as well as overall aspects of this endeavour. This first part will cover a brief history of accessibility within the Flash Platform and its current state and hopefully useful insight if you are considering to add accessibility to one of your projects.

Read on to find out more..

Continue reading about Flash & the Quest for Accessibility – Part #1

Tags: , , , ,

Hiding parts of a page from Google

For a project, we want to exclude some information on a page so that it does not appear on Google search results. We mainly want to hide the usernames from the comments, so that those users are not findable via Google. This is mainly meant for the protection of the users (and also for avoiding customer care calls when people find themselves in Google on pages they don’t want to be found).

There are different solutions to this problem and we assume we didn’t find the perfect one yet, so maybe someone of our readers has some insights.

Here are our solutions:

  • Remove the usernames from the page, when the Googlebot is detected. Could work. No negative impact to the general visitor. Just two questions: If Googlebot disguises itself as a different user agent, we deliver it the usernames nevertheless, what does it do with it? Add it to the index? Treat the site as “you deliver different results to Google than your visitors. You’re bad. You lost your karma”? (which we have to avoid, of course). I doubt such a small change will trigger that alarm or that it will end up in the index, but no one knows for sure (at least I didn’t find anything).
    Conclusion: Could work, unknown risk that it does bad things.

  • Use images instead of text. As long as Google doesn’t do OCR, that works. The general visitor can’t copy&paste, but apart from it, it works for him. But blind people do have a problem then and accessibility is important on that site.
    Conclusion: Does work. But is not accessible and may look very strange.

  • Use Javascript to write the name. Actually we do that as spam prevention already on our website (and generally in the CMS) for email addresses. Mine looks something like <script type=”text/javascript”>obfscml(‘>a/tl_hc.piil___rekcots.naitsirhc> “hc.piil___rekcots.naitsirhc:uzkcihcs”=ferh “liam”=ssalc a_tl‘) </script> and the function “obfscml” does then deobfuscate it (as you can guess the algorithm is not very fancy :)). I thought that works (and it certainly works for most spam email harvesters), but when I searched for this email address at Google I was quite surprised to find that page on the top spot. So Google actually does execute javascript on the page (it’s not just regexing or parsing or similar as I read on other pages, the algorithm is not that easy).
    So I went to the next stage and put the actual function into an external javascript file and – just to make sure – exclude it from Googlebot with robots.txt. And a week later, it was gone from the index. So that worked (and if it wouldn’t work, Google wouldn’t play by the robots.txt rules and I trust them that much)
    Conclusion: It works, if you put the javascript function into an external file and exclude this with robots.txt. People with Javascript disabled don’t see the name, but everyone else does and wouldn’t notice anything. Still not perfect.

  • Last but not least: A combination of images and javascript. You use images and write the name with javascript into the alt tag. The only people not being able to read the name are blind people with javascript disabled (and that’s usually not the case, AFAIK). But still: Only works until Google does OCR and it may look alien in your page.

That’s what we came up with. Nothing is really satisfying and there’s no official solution by Google, as far as I know. Excluding whole pages from Google is easy, but excluding just parts of it almost impossible without dirty hacks.

If anyone comes up with a way more elegant solution, we really like to hear it. The comments are open.

Tags: , , ,

Today: Liip Techday 2008

Techday2008-1

Today, we’re at Schoss Münchenwiler near Murten for our “traditional” Techday. Interesting talks from Accessibility to the future of html and Javascript to Flex and much more are awaiting us. And as the weather is great, the day will be rounded off with “bräteln” at the Lake of Murten.

Pictures as usual on our Flickr accounts: http://liip.to/techday08

Tags: ,

Accessible websites with Flux CMS

Our partner mediagonal got the AA+ label of the swiss “Access for all” initiative for “Die Volkswirtschaft“, a magazine published by the SECO (State Secretariat for Economic Affairs). This online version of the magazine was done with our Open Source Flux CMS and is the second project for SECO done with our CMS (the other was chance06).

AA+ is the highest ranking you can get from “label4all” and includes all the priority 1 and 2 W3C recommendations plus the additional ones defined by the federal government.

More (german) info can be found in the mediagonal news entry.

Tags: , ,

Fangs – Screen Reader Emulator

See a page like a screen reader sees it with Fangs.

This Mozilla Firefox extension creates a textual representation of a web page similar to how the page would be read by a modern screen reader.

Pretty interesting…

Tags: ,