Webcrumbs
Main Page
Who am I?
My Writing
My Resume
Why "Webcrumbs?"

1. Tables: These days, most web pages use tables as a way to layout the page (rather than their intended purpose of providing tabular data). These are fine for accessibility as long as the tables are fairly simple. You need to think the way an audio or Braille reader thinks row by row. That is, read your table only row by row (first row across, then second row across, etc.) and make sure that your page, as read, makes sense. This page, for example, would read the ALT attribute of my banner graphic (or, if it isn't set, the name of the graphic file), then my navigation column (all one big cell) and then my page content (what you are reading now). Some people have much more complicated tables and things can suddenly get read out of order if they're doing weird things with their tables. If your table makes sense when you think like this, great. If not, you should consider changing how it is set up. There are numerous tags or attributes of tags which also help define tables to help out including TBODY, CAPTION and so forth. Check the official description of HTML 4 at the W3C website.
   
   
2. Use ALT for all graphics: All images displaying content should have something useful in the ALT attribute to the IMG tag. Any image which is not displaying content (separator lines, decorations, etc.) should have the ALT attribute set as ALT="". This latter case makes audio and Braille readers completely ignore the graphic which is fine for dividing lines (why would someone with an audio reader care that you have a line there?). Other forms of multimedia often support the ALT attribute too and it should be used in those contexts as well.
   
   
3. Navigation Skipping: As we saw in #1, audio and Braille readers go row by row. As a result, anyone viewing this page with one of those readers has to sit through my entire navigation list each time they view a page. Granted, on my site it's only a long list on my actual weblog and shorter on all the other surrounding pages but that's just because I got lazy and didn't feel like updating my links on all pages (nor did I feel like setting up include files or templates, etc.) But my main weblog page is the critical piece and it's deeply annoying to have to sit through that list every single time a page is loaded. So, a common technique is to provide an invisible to all but audio, braille, and text readers, a way to skip the navigation entirely. The basic idea is to do the following:
   
   <A HREF="#skipnav"><FONT COLOR="[your background color"]>Click here to skip navigation</FONT></A>
   [Your navigation links all go here]
   <A NAME="skipnav">&nbsp;</A>
   
   Alternatively, you can also use
   
   <A HREF="#skipnav"><IMG SRC="invisiblepixel.gif" HEIGHT="1" WIDTH="1" ALT="Click here to skip navigation"></A>
   [Your navigation links all go here]
   <A NAME="skipnav">&nbsp;</A>
   
   In either case, an audio, Braille, or text reader will find and read the text even though it is invisible in standard browsers, and allow the user to click the link and skip past your navigation links and thus not have view them every single time.
   
   
4. "Permalink" handling: Many blogging tools allow for a way to provide a link at the start or end of a blog entry which is a permanent URL so that people can link to your blog entries and find them any time in the future (the links are never to your main blog page which usually only carries the most recent entries but instead to the location in the archives that entry lives). Usually people use a simple graphic or a symbol such as # or ¶. The former case, an image, is fine because you can set the ALT attribute of the IMG tag in your template to something like "Permanent link to this entry". The latter case is trickier because the audio and Braille readers will likely report the symbol ("pound" or "paragraph" in my examples above) which is meaningless. Granted, this isn't that big a deal since it's fairly common and pepople will likely figure it out. If this concerns you, you can always put a note on your page indicating that "¶ denotes a permanent link to a given entry" or you can rely on people figuring it out on their own. Me? I will probably design a small graphic and use it in place of the ¶'s I have there now.
   
   
5. Style Sheets: The Web Access Initiative recommends in the Web Content Accessibility Guidelines (a must read if you care about accessibility) that you do use style sheets and that you use external ones at that. The reasons are as follows:
   
   
   1. Putting all of your style information in an external files makes it very easy for a visitor to define their own style sheet to view your page. What? (you say) Why would I want them to do that? (you say). Well, if you have a visually impaired user who cannot handle your font choices or sizes or colors, this allows them to set their own. And by using a style sheet, they can simply use their own on their system for your site to make it look the way that best works for them. It's quick, clean, and convenient.
      
      
   2. When you embed the style information into the HTML document you make (a) not possible or at least much more difficult. And when you declien to use style sheets altogether, you also make the above impossible.
      
      
6. Use of color:There are three issues with color. The first is people who suffer from color blindness for whom green text on a red background (for example) just won't work. Both look vaguely brown to them and are illegible. The second are people with low vision for whom colors that do not contrast enough (say dark blue text on a slate blue background) make a page illegible. The third is any time that you rely on color alone as a way of conveying something important. One example might be having different sections of your site be color coded. That's fine as long as you have that information in text somewhere too (section headings, etc.) If you use color and color alone to convey crucial information, people using black and white or audio/Braille miss this entirely. This is why links are both blue and underlined (by default). Also, I personally hate it when people style their links to always be underlined and when they style them to never be underlined. This should always be something the user sets for themslves in their browser. I hate underlined links and turn them off in my browser. When I get to a site that has them turned on for me, I get very angry and stamp around and say mean things about them. If you style your links to never be underlined then you are using color alone to denote something important and breaking the color rule.
   
   
7. JavaScript: The use of Javascript on your site is fine as long as you realize that most assistive technology (a fancy term for the audio and Braille readers I've been talking about) simply cannot do JavaScript. So, if you are using it for fancy rollovers, more power to you (just set your ALT attributes to indicate textually both states of the graphic if it is important, for a good example, check out the ALT on the rollover graphic on DisabilityDirect.gov). If you are using JavaScript for something more important, realize that the information may not be visible to users of assistive technology.
   
   
8. Multimedia: If you use audio clips or video clips be aware that some users cannot view these. A hearing impaired person cannot listen to an audio clip nor can a visually impaired person watch a video. Common techniques for audio clips is to provide a text transcript as an optional link when the clip is presented so the hearing impaired can go read the transcript. With video, captioning either within the clip or as a separate text transcript is also common (and some go even further and provide not just the dialogue but a description of the other non-dialogue images in the video).

Obviously, there's more to accessibility than what I describe above but these 8 elements cover the most common violations and mistakes people make. I highly recommend that people read the WCAG (see links below) and educate themselves. Designing websites for accessibility is always a good idea. Assuming that all of your readers are able to see and hear is a bad assumption and simply unfair.

Links to other Resources

The Web Access Initiative (WAI): These are the folks who are researching accessibility and drafting the guidelines for accessible site design.

The WAI's Web Content Accessibility Guidelines (WCAG): These are the official standards for designing accessible websites.

CAST's Bobby: Bobby is a tool which, given a URL, analyzes a page and reports back to you thinks you should fix or watch for. It's a great way to find common problems in your page quickly.

Section 508: Section 508 is the newly adopted (went into effect 21 June 2001) standards for any technology in the Federal Government either for internal use or for citizen use. It is simpler than the WCAG but is an actual federal standard which must be met by anyone doing work for the government.

DisabilityDirect.gov: This website is the central clearinghouse for all information for disabled Americans. (Shameless self-promotion: I designed the look/feel and the company I work for currently did the back end technology). Note, much of the information planned for this site is not yet there. In the coming months it's going to grow quickly. Take at look at the HTML for the site. It's fully 508 compliant and also mostly compliant with the WCAG as well. The skipnav trick is in there as well as a number of others.

©2001 Andy J. Williams Affleck.