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:
    Validate your HTML and CSS code to be sure that it is error-free and complies with W3C Standards standards. A key to accessibility is to design for device independence, so that your pages work on any device which supports the openly published standards. The existence of standards such as HTML 4, XHTML and CSS makes this a possibility. Most assistive and adaptive technologies are based on W3C standards. Error-free, well-formed, standards-compliant HTML is the foundation of an accessible Web site. You especially need to check your coding syntax if you are using a WYSIWYG ("what you see is what you get") program such as Dreamweaver version 4 and under or Pagemill. The more a page is edited and re-edited in a WYSIWYG program, the more syntax errors will creep in. Many WYSIWYG programs generate tag soup. This is particularly true if the author is an HTML novice or is paying more attention to the page's visual presentation than to its underlying structure. Hopefully upcoming versions of WYSIWYG programs will enable web designers to create valid pages. In any event, valid code is needed. Here are some tools that can help:
    • W3C HTML Validator - Checks HTML documents for conformance to W3C HTML and XHTML recommendations and other HTML standards. It is important to use the HTML validator to create documents that validate to published formal grammars.
    • 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.
    • Colour Contrast Analyser Firefox Extension - A great little firefox extension that evaluates pages for color contrast. It saves time and helps take the guesswork out of determining accessible color combinations. It can go through a page and check (give you pass or fail) on luminosity contrast ratios, difference in brightness, and difference in color. It calculates the foreground and background color contrast of text in a document. This is 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 >>