Skip Navigation
The Illuminating Web
 

Accessibility In a Nutshell,

Section 508 Web Requirements Demystified

There are 16 items in Section 508 of the Rehabilitation Act Amendments of 1998 that specifically target Web Accessibility. Some of these items are very easy to understand, others are more complex. All of them can be understood and catered to within reason.

A - The Most Prolific Problem

A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

This item means exactly what is says. If it's not text on a web page (you can test this by trying to copy/paste anything in a web page from the browser to notepad) then you have to provide some way for it to be interpreted as text. The reason this is so prolific is images. Images are everywhere on modern web sites.

Item A is also hotly debated. Most people will agree that not every image has to have real text associated with it. Many images in a web page's design might be strictly structural in nature. No one wants to encounter the words "Spacer GIF" fifty times in one document. It is perfectly acceptable to give some images empty "alt" text (alt="", no spaces). The fact remains that all images in a site must have an alt attribute, even if it's blank. If an image doesn't have alt text, the browser will give it alt text, the name of the file. File names for most images are not useful information, and are certainly never good descriptions.

If an image that does need alt text (a photo for example) would require an especially long text to describe it, you can create a "D-link". This is the upper case letter D hyper linked to an HTML document that gives the full description. The alt text for the image should now give a brief description of the image and then say something like, "See the D-Link for a full description."

Many documents refer to the "longdesc" attridute instead of D links. "longdesc" is the recommend standard, but many browsers still don't support it properly. D links are ugly, but work.

This problem is so prolific because it's easy to overlook and can happen dozens of times on a  single page. It is also the most straight-forward to fix.

B - A Repeat of A

Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

Other elements in a page can need textual representation. Flash animations are one example. movie clips, Power Point slides, and and other video or audio media.

C - When In Kansas...

Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

This item indicates that you shouldn't try to "color code" your web site. Color is a great indicator for those who can see it, but for others it will make things more confusing. If you want to draw attention to text, bold or italicize it.

D - What is a Style Sheet?

Documents shall be organized so they are readable without requiring an associated style sheet.

If you know what a style sheet is, all you need to know is that your document has to be readable if someone chooses not to use the style sheet.

Style sheets are a way to control the look of HTML consistently across multiple documents. This can be as simple as setting the link color and font size, or as complicated as almost completely defining the layout of your page.

You can turnoff style sheets in any browser to get an idea of what your pages look like without style sheets. You should test in a graphical browser with style sheets turned off, not a text browser to test for this requirement. If you page is hard to use in an "old" browser because it doesn't understand the style sheet then you are not meeting this requirement. Go back to the drawing board.

E - Don't Use Server-Side Image Maps.

Redundant text links shall be provided for each active region of a server-side image map.

Very few applications actually require server-side image maps. Good browsers are designed to make client-side image maps usable. Use client-side image maps. If you have to use Server-Side image maps, include a text link to every possible url the server-side image map might take the user.

F - A Repeat of E

Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

Enough has been said.

G - Do your tables right!

Row and column headers shall be identified for data tables.

HTML defines a special tag for table row and column headers. Use the TH tag for any cell that is a row header. Specify if it's a column header or row header. If you have a complex data table pick-up or look-up a good HTML reference. It will tell you exactly how to define your tabular data so that it's compliant.

example of simple and complex table formats

Do not use TH for layout tables.

H - Keep Up the Good Work.

Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

If you have defined table header cells you are half way there. If a table has more than two levels of column or row headers then you will have to explicitly define which header each cell goes with. You don't have to do this for simple tabular data.

I - Don't Use Frames.

Frames shall be titled with text that facilitates frame identification and navigation.

If you don't understand frames, don't use them. If you understand frames, please don't use them unless you really have to (or really really want to). If you must use frames you have to title your documents. You should title all documents anyway.

J - Don't cause seizures and bad eye sight.

Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

If you have any "animated graphics" on a page be sure that they don't create a blinking or flickering effect. If they do, and must remain that way the cannot "blink" in excess of twice per second.

Don't ever use the "blink tag" it's deprecated. Don't use blinking graphics they are distracting.

K - Your Last Resort

A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

If you can't meet the requirements any other way you can make a plain text copy of your content. The problem is that this is almost always just as much work as working to meet the requirements in the first place.

The exception to this is when you can write a PHP script to do your work for you. Usually this is only possible if you are already compliant or are nearly compliant, so it's a catch 22.

L - Why we hate JavaScript

When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

This is perhaps the trickiest item in the list. For one thing it's very vuage. Strictly speaking, It is saying if your javascript does anything or creates anything (HTML) in the page that it must conform by conveying what it has done or what it will do with text, and any HTML it creates should be compliant.

This assumes that the user is on a browser that supports javascript. 508 makes no attempt to make "supporting users with no javascript capabilities" a requirement. Some other accessiblity guides, however, do.

M - Why Flash Used to Be "Bad".

When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l)

This means if you have a page that requires a plug-in to use, you have to link (to a compliant page) to the download for that plug-in on every page that uses it. Further more the plug-in itself must comply with other "non-web" software accessibility standards.

As per item A and B, the content you make for that plug-in must also be compliant when used in a compliant plug-in.

N - Even Forms Have to Be Accessible

When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

For HTML forms, this mainly means that the user should be able to tab through the items in a logical order, and that if your form uses the "label tag", wrapped around the element and it's text label to clearly associate these to a text reader.

<LABEL for="firstname"> First name:

<INPUT type="text" id="firstname" tabindex="1"> </LABEL>

 

O - More than just #top

A method shall be provided that permits users to skip repetitive navigation links.

This is perhaps the most confusing point of accessibility to some. You can provide anchor links that will make the page more accessible when rendered in a "text only" view. You can attach these anchor links to "spacer"  or "invisible" images with proper alt text, so that users that get a text only view know what the links are for and users that don't need them won't see them. This will let a user get directly to content they want if they already know what their navigation options are and they don't want to navigate yet.

P - Why We Really Hate Redirects

When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

This means that one second meta and JavaScript redirects are a problem. Even if you give the user five seconds, if they are confronted with ten seconds worth of text to read you haven't given them time to react. Automatic redirects need to be carefully measured so that the user has time to react to what's happening. The user should have a choice to go "back", and enough time and information to know what is going on (that you are going to redirect them) and react.