Accessibility is also UX design

January 8, 2013

The presentation was held at Q42 in The Hague. A nice environment to work and to share knowledge. Johan and Arend went through some sites using the screen reader and showed us some examples how people with visual impairment are experiencing websites. You can test this as well with webformator for Windows or the Voice over application on the Mac OS.

He also showed google.nl as an example of a really bad accessibility experience. Even the Dutch news site nu.nl is not user friendly. It goes through all the links in the top, banners and links in the left navigation, before it finally starts reading the first news headline. We laughed about it during the presentation but it is quite sad, actually.

As humans we scan the headlines to see what article gets our interest to read. People who needs a screen reader are forced to scan the site lineair.

Missasumption #1: The site should be accessible when javascript is off.
It should also be accessible when javascript is on! One of the things that I didn't know is that screen readers read javascript. When you have a carrousel on your site it will read this code.

Missasumption #2: Only a few cannot access your site, so why bother?
In the Netherlands there are about 4 million users with a form of a disability! You cannot ignore them.

What can you do to make sites more accessible?

There are a number of ways to make your site accessible for the users. The easiest way to tackle some problems is using the following tips:

1. Use a "skip" link, this is the safest way because WAI-ARIA standard is not completely accepted.
2. Add help text before the link, for example: "Go directly to...". It will make it more clear for the user.
3. Structure your HTML to place the important part (content) in the top section.

Another thing Johan pointed out is that title tags are not well supported by browsers.

It is not just about clean HTML code, it's about interaction

Johan gave us 2 more examples to be aware of during development.

How does someone with a screen reader experience your site? How does this person knows when something on the page has changed?
Example filling in web forms. When the user makes a mistake in a form, don't reload the page and loose what was filled in correctly. There are people who have trouble typing. Also place the error message outside and in the top of the form with a link to the field which must be corrected. If the error is in the input field/form it will be ignored by the screen reader.

Another issue is using captcha. Arend let us listen to a captcha example. The screen reader talks jibberish when reading the captcha text. You cannot make any sense of it.

What about people who has a visual impairment?
There are people who have to zoom in so badly they only see a part of the site. For example the homepage of the Dutch public transport planner. People who zoom in might try to type in the fields, while this is really just an image, not the form.

And think of people who cannot drag,drop, pinch or zoom. How can you give them a better experience?

Accessibility label is not the holy grail

There are a number of accessibility labels in the Netherlands you can achieve for your site: drempelvrij.nl, accessibility.nl. When you're able to get one of these labels, it doesn't mean that your site is full proof accessible. Q42 created the website for the Dutch public transport travel planner. They made a new version of the travel planner which was still using a table. It was OK, at least good enough to get the accessibility label. But Q42 decided to hire people from viziris.nl to test the site. And it turns out that it was not working as it should. They changed the form using spans and divs and it worked like a charm. Johan used the screan reader for the audience to hear the difference between the 2 versions. The final travel planner made much more sense and more useful.

An accessibility label is, what I think a very good start to make your site more accessible, but as Johan pointed out, don't stare blindly on this label, also ask real users to test your site.

Tips for development

1. Think content first (or mobile first). You will avoid a lot of accessibility issues.
2. Use your common sense.
3. Use a screen reader to test your site.
4. Navigate with your keyboard.
5. If you are a developer, talk to the UX designer and vice versa.
6. Try the Dutch "ZIEN" app for iPhone or iPad to experience what it's like when you have a visual impairment.
7. Q42 created a Chrome extension "See". It lets you view the web as a user with a visual impairment.
8. In the Netherlands there are about 4 million users with a form of a disability. You can ask them to test your site or hire someone from: viziris.nl