Accessible Web Design

Accessibility is an often overlooked aspect within the web design process, but it actually should be at the core of your design process right from the start. Legal requirements for accessible design have been in place for years but have been limited to sites that receive Federal funding, government sites, educational, etc. Lawsuits have been made against and other retailers with sites that aren’t compliant, especially when a product or feature is only available online and a user with an impairment is unable to access that information. Even though there are no legal obligations to design ‘universally’, it is not a difficult process and one that has far more benefits than drawbacks.

Here are twelve tips when designing for accessibility –

  1. WAI-ARIA – published by the Worldwide Web Consortium, these documents set out the ways in which developers should add metadata to HTML for improved accessibility.
  2. Progressive Enhancement – means designing in a layered fashion so that everyone can access the most basic functions and users with better bandwidth or advanced browsers can see an enhanced version. In the past this might have related more to broadband versus dial up, or Flash content versus non-Flash, but in today’s world one could easily substitute desktop or laptop versus mobile device.
  3. Alternate Content – provide a text equivalent for non-text content.Links need relevant title tags, images need alt tags and videos should be captioned for screen readers.
  4. Captions – audio and video need captions for visually impaired viewers. Videos and podcasts should be accompanied by text which summarizes the content, or if available a full transcript.
  5. Screen Reading Software – if available, test drive the design using screen reading software. At least understand how screen readers work and whether the content posted is in the correct tab order.
  6. Audit – if available or more likely affordable, run an accessibility audit. There are a number of individuals and companies who provide this service.
  7. Usability Testing – using a group of people with a range of different needs to identify potential problems.
  8. Stylesheets – make sure your stylesheets permit variable font sizes and never use fixed fonts.
  9. Font Controls – even though Firefox and Internet Explorer can enlarge fonts, many users are unaware of how to use the feature. Consider including a script with font resizing controls.
  10. Consistency – a consistent page design assists those using screen readers as well as sighted users.
  11. Text for Navigation – use text for navigation.
  12. Colors – although visual impact is key, make sure that the use of color doesn’t drive function.