Posted by: felipe | January 15, 2010

Accessibility Usability

Last month, the recently opened brazilian W3C office made an interesting campaign on the UN International Day of Disabled Persons to generate awareness of the importance that is accessibility on the web. During that day, they modified their website in 3 different ways in order to try to simulate how people with certain accessibility needs view and interact with the web.

On one version, they increased the font-size of the whole page, similarly to how users with sight difficulties might increase the page zoom until they’re able to read the content. The second style featured the regular page but with mouse interactions disabled, so you can only navigate on the page using the arrows and the Tab key, as do users who are not able to handle the mouse cursor effectively. The third one featured a blacked out page where only one element is visible at a time, and again you navigate through the page using the Tab key. This experience relates to the interaction that screen readers’ users are used to.

These pages, beyond being examples of the different interactions that users might face on the web, are a great incentive for web designers to start testing what the experience for such users are on their own sites. Usability has fortunately become a popular trend recently, where more designers and web developers are aware of its importance. A recent Jakob Nielsen’s article stated that Anybody can do Usability [tests], where he says that with simple tasks and minimal testing, many usability problems can be detected (and hopefully improved) on a web page. Here’s to hope that the same trend follows to accessibility.

I asked Willie Walker, who I’ve met at JRSL Chile and works with Accessibility on Gnome, what he thought about this campaign, and he said it would be nice if there was some sort of tool that could help web developers to make these tests on their websites. This would indeed be cool. For the first example, you only need to hit Ctrl++ a few times and it’s done. For the other ones, you can work a few modifications to your webpage to get the desired effect, or… or you can have it all automatically done by these two bookmarklets that I prepared! Try it on your own page or your favorite page and see how well it fares. These bookmarklets are by no means perfect, but they should be a good starting point of inspiration. Some things to consider when doing these tests:

  • Zoomed page: Hit Ctrl++ and see how well your layout stands. How many times can you zoom it without breaking everything? Try reducing the window size too.
  • Mouse disabled: How less obvious does your links and navigation become without any mouse hover? Does your CSS menus break? How is the order of navigation on your links via the Tab key? Hint: you can have a good ordering of elements  via a well-thought mark-up, but you can also explicit change them using the tabindex attribute.
  • Screen readers: How well is your content organized? Is the hierarchy too deep and confusing? Does the most important content on your page comes first?

Accessibility bookmarklets



  1. A couple of years ago a Summer of Code student for Mozilla did an extension for the Web Developer toolbar which allowed you to see your site as a colourblind person would see it. Not sure what happened to the code…


  2. […] Turns the screen black so you can tab through and see what screen readers see. ( […]


%d bloggers like this: