Designing Accessible Websites

Designing websites that are accessible to people who are blind or vision impaired
People who are blind or vision impaired use adaptive technology to present screen text and graphics in an accessible manner. This is either done by magnifying text and images, or by presenting text as spoken word or braille output. In order for web pages to be useful and navigable using this technology, it is necessary for site developers to follow basic principles of universal design.

The Association for the Blind of WA advocates that, in order for people who are blind or vision impaired to successfully access a website, it must at least meet the Priority One standards of the World Wide Web Consortium Web Content Accessibility Guidelines 1.0. Preferably, a website should meet both Priority One and Two standards, and ideally, Priority Three standards could also be addressed.

Listed below are points to bear in mind when creating websites that can be accessed successfully by blind and vision impaired people using adaptive technology. For a much more detailed listing and explanation, see the W3C Guidelines above.

  1. Provide a text equivalent for all non-text elements. This includes images, dividing lines, button graphics, banners, image maps, animations etc. When using speech output technology, blind users will get no feedback or a meaningless "graphic" message unless you have provided a text alternative. If using "spacer" graphics, include a blank alt text tag. (Refer W3C WCAG Guideline 1.1).
  2. Make Alt-tagged text for graphics meaningful. If a graphic is a link, then the Alt-tag should indicate where the link goes, e.g. "Link to Products Page". Avoid meaningless text such as "Click here". If the graphic is not a link, then make the tag descriptive of the image content, e.g. "Dividing line" or "Group Photograph of the ABC Sales Team" (Refer W3C WCAG Guideline 13.1).
  3. Don't rely on colour alone to convey imformation. This will make information inaccessible to people using speech output technology, or who cannot distinguish colours. Ensure that good colour contrast exists between foreground and background elements. (Refer W3C WCAG Guidelines 2.1 and 2.2)
  4. Ensure that all navigable areas on the site can be reached using keyboard equivalents. Blind users will not be using a mouse. Can you reach all links, form elements, etc using the Tab key? Java script "rollover" menus will generally not be accessible using the keyboard! (Refer W3C WCAG Guideline 9)
  5. Use markup and style sheets and do so properly. Mark up documents with the proper structural elements. Control presentation with style sheets rather than with presentation elements and attributes. (Refer W3C WCA Guideline 3). For examples of the use of style sheets to offer different presentations to users with vision impairments, visit the One Format website at http://www.oneformat.com.
  6. Don't use PDF files as the sole means of downloading information from your site. Currently, PDF files are difficult and inconvenient to access using speech output technology. They are effectively a "graphic" of an original document and must be converted back to text in order to be accessible via speech. This can prove very difficult for a blind user. Instead, offer RTF or HTML equivalents of your PDF files for download from your site. Most blind users will be able to access these alternative formats.
    Note that the release of Adobe Acrobat Version 5.0 has not significantly alleviated this problem at this time. Although PDF files created with Acrobat 5.0 and the MakeAccessible Plug-in, and read with Acrobat Reader 5.0 are accessible via speech and can be saved as RTF documents, most PDF's created with earlier versions of Acrobat are still inaccessible. Where you are creating PDF's for use on your site, ensure that you use the MakeAccessible Plug-in, available for download from the Adobe website
  7. If using Shockwave or other multimedia scripts on your site, ensure that users can Tab to a link to skip them and move to the main page. Incorporate sound into multimedia so that blind users know they have reached your site and are not still waiting for it to load. Always ensure that there is an Alt-tagged, keyboard-navigable link on any introductory multimedia page that will allow a blind user to move past the page into the site.
  8. If all else fails and you are unable to make your site accessible and still incorporate the look and feel you want for your site, provide a Text Only version of your site that blind users can access separately. Generally, this should not be necessary if some thought and planning are incorporated into your website design process.
  9. Attempt to make your site compatible with all browsers. Many blind and vision impaired people use older versions of Netscape and Microsoft browsers.
  10. Look for the definitive standards on accessible website design at the World Wide Web Consortium Web Accessibility Initiative site at: http://www.w3.org/WAI/. This site also provides a wealth of information on accessible website design, including guidelines, techniques and reference tools for developers.
  11. Other sites where you can obtain information on designing websites to be accessible to blind and vision impaired people include:
  12. Having designed your website you can test it using "Bobby", a web-based tool for analysing websites for their accessibility to people with disabilities. Bobby is an initiative of the Center for Applied Special Technology (CAST) and can be found at http://bobby.watchfire.com/bobby/html/en/index.jsp. Bobby can be run via the web on single pages for free or can be purchased for more extensive local use. There are many other Evaluation and Repair tools available that you can use. Links to these can be found at www.w3c.org/WAI/ER/existingtools.html
  13. An excellent introduction to how people with disabilities use the web, including examples specific to people with vision loss and a  discussion of access technologies, can be found at the World Wide Web Consortium site at http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/Overview.html
  14. People who are totally blind use "screen reader" software which outputs screen content as speech. The best way to test a site to see if it works with these programs is to try it for yourself. Free, fully-functional demonstration versions of the main screen reader applications that are in common use can be downloaded from:
    JAWS from http://www.freedomscientific.com, and
    Window Eyes from http://www.gwmicro.com
    HAL from http://www.dolphinuk.co.uk
  15. People who are vision impaired (ie, who have some useable vision) may use "screen magnification" software to magnify the screen content to an appropriate size. You can test your site's compatibility with these programs by downloading free demonstration versions of the two most popular programs in use:
    Zoomtext from http://www.aisquared.com, and
    Magic from http://www.freedomscientific.com
    Lunar and Supernova from http://www.dolphinuk.co.uk
  16. For an excellent example of good website design policy development that takes into account accessibility issues, read the WA State Government's "Guidelines for State Government Web Sites" at http://www.indtech.wa.gov.au/govt/polguides/websites/index4.htm

© Copyright 2004. The Association for the Blind of W.A. (Inc.)
This page was last modified on Tuesday, 14 September, 2004