DrupalCon Re-Cap: Accessibility in Drupal 6 & 7

While at the 2010 DrupalCon San Francisco last week, I had the pleasure of attending Katherine Lynch's session on Accessibility in Drupal 6 & 7. The issue of accessibility is a very important one, especially given the large demographic of users with disabilities. Approximately 20 percent of internet users have a disability. That's more than the number of people who use Internet Explorer 6. If we bend over backwards to appeal to web users with outdated IE 6 web browsers, then we have no excuse for not building web sites that are accessible to people with disabilities. Not only is this a good practice for all web sites, but it's a requirement for government web sites that must adhere to Section 508 provisions.

Follow the Web Content Accessibility Guidelines

Use Web Content Accessibility Guidelines (WCAG 2.0) as a reference point. This document covers the basics of web accessibility and BEYOND. It's over 90 pages long, and could be a bit overwhelming for some. Because of the rapid  advancement of web technologies, the WCAG 2.0 document was purposely written in a vague manner so it wouldn't be outdated as quickly as the previous WCAG 1.0 document.

Follow the POUR principles Identified in the WCAG 2.0 Document

Because the WCAG 2.0 document can be a bit vague, Lynch suggests you follow the four principles of making web content accessible (the POUR principles). Each piece of content needs to be Perceivable, Operable, Understandable, and Robust.

• Perceivable: Information must not be invisible to all of the user's senses.
• Operable: The interface cannot require actions that users cannot perform.
• Understandable: Users must be able to understand the information and operation of components.
• Robust: The content and interface must be understandable, operable, and accessible through widely-available technologies and remain so as technologies advance.

Make Your Theme Accessible

Accessibility Should Be Considered During the Conceptualization Phase

Start your design with the end in mind. Consider accessibility when designing your web site's navigation, icons, and clarity. You can test the clarity of your site by doing a simple squint test to make sure it can be navigated by people with vision problems.

Use a Zen Theme

Using Zen themes as a starting point for your theme, is a big step in the right direction. The principles behind the Zen themes and accessibility have a lot of overlap.

Make Your Theme Colors Accessible

To make your web site accessible to user's with color blindness you need to make sure there is at least a 3:1 color contrast ratio, don't use color only cues, and make sure link colors are as standardized as possible.

Always Use Alt Text on your Images

Alt text is used by screen readers and mobile devices. All content images should have a descriptive alt text and all decorative images should have empty alt text which will be ignored by screen readers.

Use Skip Links

Skip links are useful for helping users with screen readers skip over repeated chunks of content on your web site.

Follow Styling Standards

Use header tags (H1, H2, etc); use labels, fieldsets, and a legend for your forms; and  use scope, ids and headers, and the summary attribute for your tables.

Consider Layout/Source Order

Screen readers can only read content linearly. Keep that in mind when designing the layout of your website and considering what you want users to read first.

Accessibility and Drupal Module Development

Create Accessible Admin Interfaces

If you have a site with user generated content, your administrative interface should abide by the same accessibility principles as your front end interface.

Do Not Require an Action That Not Everyone Can Do

Avoid keyboard traps where you cannot navigate a site with a keyboard, or you can get somewhere using a keyboard but you can't use a keyboard to get out. Don't override the tab, arrow, or esc keys, unless you let the user know very early in the HTML that they are being overridden. Actions should be triggered "on click" or "on focus," not on "mouse down" or "key down."  Also, never trigger a form submit using "on focus."

Provide Accessible Alternatives for Audio, Video, and Synchronized Media

Audio should have a text only transcript along with the capability to turn audio up/down off/on. Your site should not auto play audio. Video should have a text or audio equivalent. Synchronized media (both video and audio) should have open/closed captions or a descriptive audio track.

A couple of modules that work with captions are the Media and SWFTools Modules for Drupal 7.

Conclusion

This session was full of useful tips to get one started on making their site more accessible to web users with disabilities. I hope this was as informative to you as it was to me. If not, please watch Katherine's full session online and hopefully you will change your mind. Thanks for reading.