Practical Accessible Web Design

Accessible web design is big business, but it mostly involves long complicated standards and politics. As the author of an accessible web browser for blind people, here's my practical list of accessibility guidelines for the real world. Follow these (if you can) and your website is more likely to be useful for blind people and WebbIE users.

  1. Don't use Java or Flash. It's completely inaccessible.
  2. Avoid frames and iframes: how does a blind person know if a link has changed a page "over there" when they know only that the link they have just clicked has not caused a new page to appear?
  3. Put in a skiplinks link at the top of your page, linking to the main content. Do not use CSS display:none to hide it: this will stop it appearing to blind users. You can also use CSS to make the main page content appear first in the HTML code, like I do on this page: do View Source in your browser and note that the code for the navigation bar on the top right comes AFTER the body code. HTML gets rendered linearly to blind people, so they get the content first, rather than lists of links.
  4. Put alt tags on images used for links and alt="" (an alt attribute with the value of an empty string) for almost every other image. Blind people don't care if there is an image there. Don't make them wade through hundreds of image descriptions. Choosing alt tag or attribute content.
  5. If you use JavaScript, make sure the page works without it (e.g. make an INPUT button type "SUBMIT" as well as relying on an onclick event to submit the form) and don't use anything to do with a mouse (e.g. onmouseover). The same goes if you're using Ajax: if the page works with Javascript off then it will probably work for blind people.
  6. Use the LABEL HTML element to make forms work for blind people. It's very simple, but very important, so here is a guide to using the LABEL element to make forms more accessible.
  7. Do not use popup windows - they break the back button and confuse the user. You can see there's another window, a blind user just knows they're on a new page - oh, whoops, where is their browser?
  8. Test it yourself with WebbIE. If you can use it in WebbIE then blind people are more likely to be able to.

Want more (complete) information? Check out the links on WebbIE for web designers.