10 Tips for Making A Web Site Accessible

‹ Resources on University & College Web Design & Development Resting, Back Ends and the Web 2.0 ›

Most of these are fairly quick and easy steps you can take to increase the accessibility of your web site. Keep in mind that these are just a sample of accessibility recommendations. The resources below offer much more extensive information.

1. Provide descriptive alt attribute text on images and descriptive title attribute text on links.
2. Put all style information in the CSS file. Separating the presentation from the content of a page allows the greatest variety of devices to access and sensibly render the content.
3. Use semantic markup. For example:
• Order your headers correctly (don't skip from h1 to h3).
• Use <p></p> on paragraphs and only on paragraphs (not for spacing—that's what your CSS file is for).
• Restrict the use of tables to tabular material. If you must use tables for layout, ensure that the text makes sense when read linearly.
• Put navigation menus (and other catalogues of items) in lists. Then style the lists in the CSS file (see Max Design's Listamatic and Listutorial for a taste of what is possible.)
• Bold face and italics are stylistic effects; indicate them in the CSS file, not on the page. When text is meant to be emphasized, use <em> and <strong>.
4. Provide an alternate, accessible page when using scripts, frames or dynamic content that may make the content inaccessible.
5. Add a "skip navigation" link at the top of the HTML page. If you don't like the look, hide the link with display: none; in the CSS file.
6. Make sure your design allows people to resize text.
7. Use an image replacement technique for text graphics. A list of techniques can be found on Dave Shea's Mezzoblue.
8. Use color to enhance communication, not diminish it. For example, black-on-white text is easier to read than gray-on-white. Links of noticeably different color are more easily spotted—but don't rely on color, underline links as well.
9. Provide a site map.
10. Validate your code using one of the many free accessibility tools: Webxact (used to be Bobby), Wave, Cynthia, and W3C's Markup Validation Service.

More Resources

Many sites exist that will give you much more detailed help on building accessible web sites. These are some of the best:

• Quick Tips to Make Accessible Web Sites - from WAI's Web Content Accessibility Guidelines
• Building Accessible Websites - comprehensive guide from Joe Clark.
• W3C's Web Content Accessibility Guidelines 1.0
• WebAIM's Techniques & Concepts - from Utah State University's Web Accessibility in Mind site.
• Accessify - accessibility news blog from Ian Lloyd and Russ Weakley.
• 456 Berea Street - accessibility expert Roger Johansson's excellent blog.