Best Practices for Designing Accessible Websites, Software and Content

Although including the items on this list will go a long way towards making your websites, software and course materials accessible, this is not meant to take the place of a thorough review. Always verify that your sites and course materials comply with Section 508 regulations and W3C (World Wide Web Consortium) WCAG (Web Accessibility Content Guidelines)1.0 Priority One and Two recommendations, and that they validate to XHTMLl 1.0 Transitional code, before making them available to the University of Michigan community. This will help make your materials accessible to students with disabilities and show "Good Faith" effort in meeting their needs under the Americans with Disabilities Act (ADA) and (where applicable) Sections 504 (software applications) and 508 (websites). For assistance, please contact Scott Williams, at swims@umich.edu. Resources are provided at the bottom of the page.

Accessible Websites and Software

In general, Adaptive Technology (AT) users should be able to use your site or software without a mouse (using the keyboard only). Including the below items will help persons with disabilities adjust your site to their needs and utilize AT shortcuts.

  1. Use Cascading Style Sheets (CSS) for website presentation and, when possible, positioning. For presentation, this includes font size, color, style; behavior (such as mouseover or focus); borders; padding; margins; background; etc. For positioning this includes: distance from top and sides; x, y and z axis; etc. If you use a table for page layout, make it a simple layout, without nesting.
  2. Use relative elements like "percentage" or "em" instead of "pixels." Common instances include font sizes, table layouts, and css-based positioning.
  3. Use the <alt> attribute to describe images. Images that contain information relevant to understanding the purpose or providing context to the page should have a description. Images that do not provide information or context should have <alt="">.
  4. Use <h1, h2, etc.> tags to chunk page content under headings and for links to key content areas. Heading tags will not only provide context for screen reader users, but enable them to skim through a page.
  5. Follow WCAG 1.0 guidelines for forms. For example, associate labels with input boxes (<label for> and <id> tags) and group related parts of a form using the <fieldset> and <legend> tags.
  6. Follow WCAG 1.0 guidelines for tables. For example, include summaries and captions for data tables, and associate column headings with data using the <scope> attribute.
  7. Provide keyboard-based navigation through the site using accesskeys and skip links. For example. provide accesskeys to Accessibility Information about the site (0), Home (1), What's New (2), Site Map (3), Search (4) and Content (C). Provide skip links from the top of the page to Main Content and other key areas of your site.
  8. Use meaningful text for links. AT users tab through sites, listening to links for context. Links should therefore have text that clearly identifies their purpose or destination, to make sense without the surrounding text.
  9. Add the <title> attribute to links and frames. Titles should provide additional information not otherwise available in link text. Frame titles can be used for navigation.
  10. Use color properly. Do not rely only on color to differentiate items in your site. For example, persons who are colorblind cannot distinguish between green and red, so highlighting text in red will not be helpful. Also, make sure there is sufficient contrast between background color and items in the foreground, such as buttons and text, so that people with compromised vision will clearly see them as separate.
  11. Caption video. Provide captioning for every video that you provide online. MAGpie (http://ncam.wgbh.org/webaccess/magpie/magpie2_download.html) is an excellent, easy to use tool for captioning WindowsMedia, RealPlayer and QuickTime files.

Accessible Course Materials

In general, the best way to create course materials is to first format documents within the application, as if you are formatting a web page, and then save them into html using a converter like the Web Publishing Accessibility Wizard (www.rehab.uiuc.edu/ppt/install.html).

  1. Add text to images. In Microsoft Word and PowerPoint, click on the picture, then go to: Format > Picture > Web. Add a description for the image in the textbox. In Adobe Acrobat, open the PDF file
  2. Format text. In Microsoft Word, apply formatting to document titles, headings and lists. Highlight the text, then go to: Format > Styles and Formatting > Choose "All styles" in the "Show:" dropdown box > click on the format you need. In PowerPoint, use slide titles to describe page content, since they will appear as a table of contents when you convert the document to html.
  3. Create tables and charts. Be sure to create tables and charts within the application, rather than copying them. This will preserve the integrity of the underlying data, and enable the Wizard to make them accessible.
  4. Convert document. Install the Web Publishing Accessibility Wizard on your computer. It will insert "Save As Accessible Web Page" under "File" in Microsoft Word, PowerPoint and Excel. To save your document in HTML, go to File > Save As Accessible Web Page, then follow the step by step directions to describe charts, graphs and/or tables.

Accessibility Resources

A variety of tools are available for verifying compliance and validating code. The paper books, electronic books, research and websites contain useful information about designing accessible websites and software. For additional resources, see the Resources page on the "Online Accessibility" website (www.umich.edu/~webacces/Resources.html).

Verifying Compliance

A variety of tools are available to evaluate how well a website complies with accessibility standards.

Validating Code

Here are several tools, in addition to Macromedia Dreamweaver (mentioned above), that validate htm/xhtml/css code.

Paper Books

These books provide information about how to produce both usable and accessible websites.

Electronic Books

The following usability and accessibility resources can be downloaded from the Internet.

Research

Websites