Reimagining ADA Accessibility for Your Website

Jason Sindel Jason Sindel
February 18, 2014
Web Strategy

Website accessibility isn't just another requirement on a client wish list. For one, failing to provide accessibility can result in more than just a lousy user experience that threatens to exclude a huge portion of your audience, it can mean civil lawsuits, fines, and heaps of bad press from unhappy users. When the City of Sacramento, in strict adherence to California law, required accessibility for their new website, Roundedcube responded by developing a framework for navigation and content that would ensure the best user experience possible.

Through a thorough set of use cases, Roundedcube has developed a twenty-first century methodology for building towards accessibility. It is based on a few straightforward principles:

  1. 508 compliance isn’t a test that can be failed or passed. It's a set of guidelines and at the heart of it is keyboard (alternate mouse) accessibility.
  2. Build toward the user experience, not the guideline. The ultimate judge of compliance or non-compliance is based on an impaired user's ability to access content and use navigation on the site, not a set of web standards in a checklist.
  3. Imagine how an impaired user would access the site, then build it so that they can do everything a sited, able-bodied can do using keyboard commands and/or a screen reader.

Session Based Accessibility

To start, we imagined a session state in which a user could activate Accessibility. This allowed us to provide additional instructions and Accessibility Mode only navigation. A tab brings up a website dialogue that indicates to the user they have opted for “Keyboard” navigation. It’s important to note that screen readers or even other (non-mouse) point and click devices might benefit from this mode as well. The user has a choice at this point to either use accessibility throughout the session or to use it on a page by page basis.

Website Accessibility

Tabbed Navigation and Top-Level Navigation commands

Just like sighted or able-bodied, the key to user experience is clear simple navigation. Within the Accessibility Mode, users are prompted to "Skip to Content" which upon enter will resolve to another Accessible only command "Skip to Left Navigation – Tab to View Content". The user is able to view the content on the page or to access the left navigation. At the top of the Left Navigation content block, the user can opt to return to the Top Navigation. This set of important navigational commands keeps the user from falling into a blind alley, i.e. a list of links or content presented without the proper context a sighted person might have. We set the tab priority for these so that we can make sure that top level navigation commands are available immediately.

In addition, the user is given access to a content page previously hidden in the Top Navigation that provides additional accessibility support, a contact name and email for further assistance and a list of keyboard commands that the browser and the website understand.

A user can Tab now through content normally and at any time can return to the top of the page via the Home key.

Website Accessibility

Content Accessibility

A huge portion of accessibility is content. Images have Alt. tags and navigation needs clear and unambiguous directions. We avoid images with text for the navigation, since screen readers won’t recognize these commands and have added additional instructions when in accessibility mode where necessary. Videos will need to have transcripts and slideshows need to have alternate controls.

Functional Accessibility and the Blindfold Test

City of Sacramento also offers a very popular calendar of city-based events, meetings, deadlines and holidays. This required a full set of JavaScript solutions so that when in Accessibility Mode a user is able to choose the date picker and navigate through the hundreds of events that might be listed. Functional Accessibility may mean including a whole new schema for accessing common tools on the website like forms, maps or calendars. In this case, we imagined the experience of a disabled or non-sighted person and actually conducted tests through blindfolded navigation using screen readers. If a command was ambiguous, we sought to change it, and if a user got confused, we went back to the drawing board.

We'd love to hear about your experience with Accessibility. Feel free to share in the comments section below!

comments powered by Disqus