David Corbacho

Accessibility for Web developers. No more excuses.

I recognize that I'm uneducated about web accessibility "a11y" except for some generic best practices like adding alt attribute to images. I tend to create lame excuses to delay learning about it.

But I had enough of this, so I thought why not ask Everett Zufelt. I asked him about the "Top 5 accessibility annoyances that Web developers do". More specifically, I asked him about those things that make him imagine bad things happening to the family of the developer :)

Thank you Everett for your reply. Here it is (I added links and markup):

Good morning David,

Thanks for the message.

Generally, you want to make sure that:

  1. Markup is semantic and valid (use h1 - h6 for actual headings, make sure lists are marked up as lists, etc.).
  2. Make sure that everything can be accessed without a pointing device; make sure that everything that can receive keyboard focus has a visual indicator (dotted line, etc.)
  3. Make sure that all form elements have an "accessible name" usually done with a <label for="form-element-id"> or title attribute.
  4. Make sure that colour contrast is within the WCAG 2.0 AA guidelines using the Juicy Studio toolbar for Firefox.
  5. Take a look with the WAVE toolbar for Firefox from http://wave.webaim.org. Note, the WAVE site can test the source of a page; the toolbar can test the DOM.

Accessibility testing cannot be completely automated, but those 5 steps will help you take a big step toward improved accessibility in your projects.

Also take a listen to Lullabot's Drupal Voices 99: Katherine Lynch on Accessibility Tips for Websites

Thanks again,
Everett Zufelt
Accessibility Consultant & Web Developer

Why Make Websites Accessible?

Quote from accessibleculture.org.

Accessible websites can make a real impact in many people’s lives.
Accessible websites can afford them a certain independence and dignity, and enable them to tackle everyday activities such as reading and learning, working, shopping, communicating with friends and family, and simply participating in community.

This can make a big difference for those living with sensory, motor, or cognitive disabilities. It can benefit people who are completely blind or deaf or unable to use their hands, as well as those with mild hearing or vision loss. Accessible sites can equally make a positive impact for individuals who have difficulty reading, or who have arthritis or carpal tunnel syndrome. It can even help someone with a temporary injury that prevents them from interacting with websites in the way they are used to.

Slides of Jacob Thornton

I felt identified with the slides of Jacob for the JSConf.AR 2012, about his experience learning and implementing accessibility in Twitter Bootstrap:

I found these slides in the recent Paul Irish article. Accessibility and developers.. Read the comments, they are very interesting.

WebAIM Screen Reader Survey 2012

Condescending Wonka: Oh, so you’ve tested the site in every browser known to mankind, and what about screenreaders?
(Image from a11y memes.)
Although accessibility is not only about Screen Reader Users, this Survey is full of interesting charts and can give you a good insight of how these users experience the web.

Chart about most problematic items for screen reader users. Captcha, Flash and ambiguous links in the top 3

Accessibility and Drupal

In drupal.org, you can find a Drupal Accessibility Statement, where you can see how the Drupal community made a big step in improving accessibility for Drupal 7 core and raised awareness within the community. Now, that we are immersing in Drupal 8 development, there is no Accessibility initiative per se, but still the compromise of the community continues. We keep adopting best practices in Drupal 8.

Getting involved

* Use some of these modules to improve accessibility in your site.
* Keep an eye on accessibility tag in Drupal 8 issue queue, or a good summary of them is posted here too.
* Keep an eye on this Twitter search: drupal #a11y.


Please, share your tips and resources that can help other developers to understand the main accessibility issues.