Skip to the Main Content

Note:These pages make extensive use of the latest XHTML and CSS Standards. They ought to look great in any standards-compliant modern browser. Unfortunately, they will probably look horrible in older browsers, like Netscape 4.x and IE 4.x. Moreover, many posts use MathML, which is, currently only supported in Mozilla. My best suggestion (and you will thank me when surfing an ever-increasing number of sites on the web which have been crafted to use the new standards) is to upgrade to the latest version of your browser. If that's not possible, consider moving to the Standards-compliant and open-source Mozilla browser.

July 4, 2003


I decided to see if this blog could pass some basic accessibility tests. Since 1998, Federal Agencies have been required to adhere to certain web accessibility guidelines, called Section 508. Now, I’m not a Federal employee, but I do get funding from the NSF, and so I figured I ought to at least take a stab at it.

There’s a very good tutorial on building web sites which meet the guidelines. Another invaluable resource is Mark Pilgrim’s Dive Into Accessibility site, which covers almost all of the bases for Section 508 Accessibility.

Given Mark’s fame, it’s not surprising that his recommendations (and hence most of the things required to pass the Section 508 Accessibility tests) are already incorporated into the default MT templates.

My own previous cleanup had cleared up most of the remaining things which would cause accessibility problems. I really only had three classes of problems to fix.

  1. I had to ensure that all my images had real alt attributes. alt="" may pass the W3C Validator, but it still isn’t accessible.
  2. MT’s default Search Template does not define <label>s for each of the form elements. One needs to replace things like

    <input type="checkbox" name="CaseSearch" /> Match case 


    <input type="checkbox" id="CaseSearch" name="CaseSearch" />
     <label for="CaseSearch">Match case</label>
  3. You must include scope attributes for table headers (that’s not the only accessible solution, but it’s the easiest). Each column header should say <th scope="col">...</th> and each row header should say <th scope="row">...</th>

Having read through the above-cited tutorials and made the requisite changes in my templates, it was time to run my pages past Bobby and Cynthia. Both require a certain amount of “manual” checking, over and above the automated tests, but in good conscience I think I can now display some new badges in my sidebar. [Well, almost good conscience. I doubt there are any screen readers out there that grock MathML. Even so, that’s still more accessible than using GIFs for equations.]

Update (8/13/2003): One point not flagged by Bobby or Cynthia was the need to explicitly indicate any use of foreign language words or phrases by using the xml:lang="" attribute. So, eg, I need to write

<span xml:lang="fr">plus ça change</span>

when I slip in a phrase in French. Screen readers need to know this to pronounce the text appropriately.

Update (8/19/2003): JAWS 4.51 claims to support both <abbr> and <acronym> tags. So I am now using them both. The distinction is important because a screenreader should read an acronym but spell out an abbreviation. I’ve also added an aural stylesheet, not that JAWS gives a hoot about such Standards-based niceties.

Posted by distler at July 4, 2003 1:09 AM

TrackBack URL for this Entry:

0 Comments & 0 Trackbacks

Post a New Comment