Web Site Accessibility 101

How Can I Make My Web Site Accessible?

Making a site accessible generally means using HTML to structure data properly and making sure you add accessibility features where relevant.

Three Key Steps:

  1. Step One:
    Learn and follow established accessibility guidelines and standards. This includes:
  2. Step Two:
    Best practice is to validate your HTML and CSS code to be sure that it is error-free and complies with W3C standards. It is important to use the HTML validator to create documents that are parsible so that user agents, including assistive technologies, can accurately interpret and parse content. Some tools that can help:
    • W3C HTML Validator - Checks HTML documents for conformance to W3C HTML and XHTML recommendations and other HTML standards.
    • W3C CSS Validation Service - Checks Cascading Style Sheets for conformance to standards.
    • HTML TIDY - Tidy is a free lint utility to check and clean up badly formed HTML. It is useful as a first-pass for helping to fix bad HTML. It also offers a means to convert existing HTML content into well-formed XML, for delivery as XHTML. A great tool! But please note: Tidy is not a validator. It is not a substitute for the W3C HTML Validator which verifies that your code meets the W3C standards. Tidy is highly recommended for any time you have to fix a truly awful mess or if you are a beginner, and find validator reports confusing or incomprehensible.
  3. Step Three:
    Evaluate the pages in your site with accessibility tools. Here are some tools that can help:
    • Cynthia - This tool can also help you make web pages accessible to those with disabilities. It analyzes your web pages and checks for those accessibility problems that can be checked for automatically. It is a good first pass for checking your web pages. Using the Cynthia is a good start, but many of the more subtle items under the broad heading of "Accessibility" requires more than mechanical checks...it involves thinking.
    • WAVE - This tool helps people perform design tasks that require human judgment (e.g. "Does this ALT text provide a functional equivalent for this image?" "Does this reading order make sense?"). The Wave displays the ALT text of images and areas on the page for comparison with the images, provides numbered arrows to show the linearized reading order, and shows the HTML equivalent (if any) provided for applets. WAVE features that help users compare visual and textual representations are not directly useful to people who are blind; but the output is accessible so people who are blind can check the output for completeness.
    • A graphical user interface (GUI) browser (such as Firefox, Internet Explorer, Netscape Navigator or Opera). - These can be helpful for accessibility evaluation also. Examine your pages while adjusting the browser settings.
      • Turn off images then make sure that the information is presented in an appropriate sequence relative to the visual presentation on the GUI site.
      • Turn off the sound then make sure audio content is still available through text equivalents.
      • Turn off scripting then make sure that pages are still functional.
      • Change the font size (larger and smaller) in the browser, and observe whether the page is still readable.
      • Change the display color to black and white (or print out the page on a black and white printer) and observe whether color contrast is adequate.
      • Put away the mouse and tab through the links and form controls on a page, making sure that you can access all links and form controls, and that the links clearly indicate what they lead to.
    • Web Developer Extension for Firefox - It adds a menu and a toolbar to the browser with numerous web developer tools.
    • Luminosity Contrast Ratio Main Colour Contrast Analyser - Tools by Gez Lemon for evalating color contrast. These are useful in that you don't need to make a judgement call to decide which colors to examine, and you can choose between the luminosity algorithm suggested for WCAG 2, the original AERT algorithm suggested for WCAG 1, or both.

<< previous | next >>