Ten Simple Strategies for Making an Accessible Website

A Supplement to the Instructional Session, Designing Web-Based Support Materials: Creating Equal Opportunity Web Sites
by Meagan Weber at the University of Alberta.

  1. Use standard HTML.
  2. Use alt tags for images.
  3. If you use audio, supply a transcript.
  4. Use style sheets to format your page, but don't depend on them.
  5. Use consistent, intuitive, simple layout and navigation for each page of your site.
  6. Use colour with caution.
  7. Build keyboard alternatives into your page.
  8. Use tables and frames with caution.
  9. Make links descriptive.
  10. Take advantage of validation services and programs to check your page's accessibility.

References and Useful Resources

  1. Use standard HTML.
  2. The World Wide Web Consortium (W3C) web page is an excellent resource for web builders. It includes reports, standards, and recommendations for the use of HTML by web page builders. Using standard HTML will help more users access your web page, regardless of ability and regardless of the hardware or software they are using.

  3. Use alt tags for images.
  4. This is a relatively quick and easy step to take to ensure that users using screen readers or using hardware or software that does not allow images to be viewed can still navigate and understand all the information on your web page. In an image tag, ad an "alt" specification containing a description of the image. For example, your tag might look like this:

    <img src="picture.jpg" align="center" alt="photo of a woman riding a bike in a park">

    You can also provide a detailed description of the image's content that supplements its alternative text. This description can be included in the text of the main web page, or it can be placed in a separate page for this purpose and referenced by the "longdesc" attribute of the IMG element. For example:

    <img src="picture.jpg" align="center" alt="Population of Canada by age" LONGDESC="http://www.page.ca/populationchart.txt">

  5. If you use audio, supply a transcript.
  6. Include a link to a text file or an HTML page containing a transcript of audio information, so that people with hearing disabilities can access that information using screen readers.

  7. Use style sheets to format your page, but don't depend on them.
  8. Use style sheets to format your page. A style sheet is a text file that contains information about the format of certain elements. For instance, you may specify that all text within <H1> tags on your web page should be a certain size, colour, and font. A user can then override your style sheets with personal style sheets that make font larger or a different colour. However, some users may be using equipment that does not recognize style sheets, so make sure your page is readable when style sheets are turned off.

    To learn more about style sheets, see the W3C Recommendations for Cascading Style Sheets.

  9. Use consistent, intuitive, simple layout and navigation for each page of your site.
  10. This will benefit all users, regardless of ability. It will make navigation less confusing, especially for people with cognitive or learning disabilities, or with visual disabilities. Users will not have to "re-learn" navigation for each page and can instead concentrate on the information on the page. A simple layout without distracting images will help a user focus on the information on the page.

  11. Use colour with caution.
  12. 99 percent of colour blind people have trouble distinguishing between red and green. Keep this in mind when using colour on your page.

    Colour blind people often rely on their own personal style sheets to override colours on a web page so that they can see them. Do not rely on colour to convey information. For example, specifying that text in red means that the information is from a particular source, while text in blue means that information is from another source, is not helpful to someone who cannot view colour.

    You can see your page as it would appear to someone with colour blindness by using the Vischeck Color Blindness Simulator. It is a free tool that displays an image of any web page or image as a person with colour blindness would see it.

  13. Build keyboard alternatives into your page.
  14. Remember that not every user has a graphic environment with a mouse or other pointing device. Some users will rely on keyboards or voice input hardware and software to navigate on the web. Adding an access key specification for links and navigation buttons will improve the accessibility of your page.
    For example, the following coding allows a user to select the letter "F" either by using a keyboard or voice input in order to follow the link:

    <a accesskey="h" href="link.html" title="home">
    Home </a>

  15. Use tables with caution.
  16. Use tables to display information that is truly tabular, such as data.

    Use <TH> tags to define column and row headers, and <CAPTION> tags to describe the contents of the table. This is so that screen readers can navigate the columns rather than simply read the page from left to right across columns. The following is an example of table coding that allows easier navigation by a screen reader:

    <TABLE border=1>
    <CAPTION> Simple data table created using HTML markup.</CAPTION>
    <TR> <TD> </TD>
    <TH>Column1 header</TH>
    <TH>Column2 header</TH>
    <TR><TH>Row 1 header</TH>
    <TD>Column1 Row 1</TD>
    <TD>Column 2 Row 1</TD>
    <TR><TH>Row 2 header</TH>
    <TD>Column 1 Row 2</TD>
    <TD>Column 2 Row 2</TD>

    The W3C recommends using CSS to define the layout of your page. Use tables to lay out your page only if the information on the screen will make sense when read from left to right. If your page does not make sense when read from left to right, then provide an alternate version that can be read by a screen reader.

  17. Make links descriptive.
  18. People using screen readers will generally tab through links on a page, rather than reading the entire page line by line. Therefore, links that are not descriptive (such as "click here") are not helpful for users using a screen reader. Make sure that links make sense out of context to make navigation by screen reader much easier.

  19. Take advantage of validation services and programs to check your page's accessibility.
  20. Examples of free validators include:

References and Useful Resources

Adaptive Technology Resource Center. Adaptive Technology Resource Center. April 2001. University of Toronto. 24 Nov. 2001 http://www.utoronto.ca/atrc/.

Casey, Carol. "Accessibility in the Virtual Library: Creating Equal Opportunity Web Sites." Information Technology and Libraries (March 1999): 22-25.

Center for Applied Special Technology. Bobby 3.2. 26 October 2001 http://www.cast.org/bobby.

Dougherty, Robert, and Alex Wade. Vischeck Color Blindness Simulator. 27 November 2001. http://vischeck.com/vischeckURL.php3.

Forgrave, Sarah, and Lynne E. F. McKechnie. "Online On Ramps: A Pilot Study Evaluation of the Accessibility of Canadian Public Library Web Sites to Visually and Hearing Challenged Users." In Beyond the Web: Technology, Knowledge, and People: Proceedings of the 29th Annual Conference of the Canadian Association for Information Science, 27-29 May 2001. Ed. D. Grant. Universite Laval, Quebec: 289-296.

Kautzman, Amy M. "Virtuous, Virtual Access: Making Web Pages Accessible to People with Disabilities." Searcher 6.6 (June 1998): 42-50.

Lescher, John. "Designing Web Sites for the Blind." EContent (April/May 2000): 14-23.

Nielsen, Jacob. "Accessibility for Users with Disabilities." In Designing Web Usability. Indianapolis: New Riders Publishing, 2000: 296-311. World Wide Web Consortium. Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0. 26 Nov. 2001 http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html.

World Wide Web Consortium. Techniques for Web Content Accessibility Guidelines 1.0. 26 Nov. 2001 http://www.w3.org/TR/WAI-WEBCONTENT-TECHS.

Website created by Meagan Weber as part of a project for LIS 526: Instructional Strategies
at the University of Alberta School of Library and Information Studies.
Last updated December 2, 2001.