HAL-PC Web Technolgies SIG

WAI -Web Accessibility Initiative Level I Compliance & §508 Compliance

There are minor differences between the WAI and §508 Compliance. In general if you meet the requirements for one you will have met the requirements for the other. To view §508 a checklist see http://www.webaim.org/standards/508/checklist. The only difference between the two is the WAI requirement that the page be written in the "clearest and simplest language appropriate for the site's content".

1) Non-Textual Objects

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

This is one of the easiest area to meet accessibility standards.For both types of accessibility compliance you must provide a meaningful alternate information for all images, multimedia or other non-textual items.

Images

In most cases this mean using the 'alt' attribute and possibly the 'title' attribute. Examples using the image below:

Inaccessible - <img scr="eagle-sm.jpg" width="105" height="101>

Accessible - <img src="eagle-sm.jpg" alt="eagle & U S flag" width="105" height="101" title="She'll fly through the Storm, eagle flying in front of U.S. flag." />

What should an 'alt' tag say?

While an alt tag should always be present and meaningful. Some developers in a mistaken belief that any text in an alt tag makes the image accessible will repeat the file name in the alt tag. Some content management systems do this by default as well. In some cases where files are named with descriptive names that maybe sufficient but usually isn't. In the case above the image has a descriptive name of 'eagle-sm'. While that would suggest to a visitor that there was an eagle in the image it does not convey much about the actual image. Alt tags must be short because many browsers will only display as much of the alt tag that will fit inside the same space as the image. Here that is 105px wide and not all browsers are smart enough to wrap text. So we put in eagle & U S flag which provides a little bit more information but still doesn't give all the information that the images conveys. As a result I added the 'title' attribute which in compliant browsers will pop-up like a tool tip and display the text of the image "She'll fly through the storm." with the addition of a short description of the image.

Special Case Image

Because browsers such as Netscape 4.x will collapse table cells regardless of width specifications and Internet Explorer (all versions) do not support the 'min-width' attributes many designers have resorted to using a spacer image. Basically that is a 1px by 1 px transparent gif that is stretched to the width need by the width attribute in the image tag. In complex layouts there may be many instances of spacer.gif on a page. As you might image this would not only be tedious to type alt="spacer image to prevent layout collapse" or even alt="spacer.gif" but would be worse to listen to page after page. As a result it is acceptable to use alt=" " or alt=".".

Longdesc

In the example above it would be even better add longdesc="eagle-sm.html" and create a page with a detailed description. Note that most browsers do not yet support the longdesc attribute. It is a bit of which comes first the chicken or the egg. Browsers don't support "longdesc because people seldom use it but web designers/developers don't use it because browser support is too limited. Because of poor browser support many site will use a "d" link immediately following the image to link to the page that contains the longdesc of the image. This is accomplished by using either an uppercase or lowercase D as a link.

Other Non-Textual Objects

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

This includes Flash, Audio Files, Video Clips and just about anything that isn't text. On most websites these are not an issue. Flash can now be made accessible using tools from Macromedia which I will not cover in this presentation. Audio files can and should have a transcription or as in the case of video clips can be captioned. Captioning is required to be synchronized with the presentation and tools are available to do so. This is beyond the scope of this presentation but I will point you to a couple of resources at the end of the presentation.

2) Don't Rely on Color Alone

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

By default all links are underlined as a visual indication that a link exists. In many cases designers do not want the underline to show and will alter the link behavior in their code to remove the underline. Usually they will substitute a color change from other text to indicate that a link exists. By itself this can be an accessibility problem unless there is some other indication that a link exists. In most cases there is a clearly established navigation area where the placement and arrangement of text makes it clear that what items are links.

This isn't the only time that color can be an accessibility problem. An example frequently given is a train or bus schedule where north bound buses are red and south bound busses are green. For those who are color blind (most common form of color blindness is red/green) or someone viewing on a black/white monitor (think cell phone or Palm) it is impossible to tell which bus is going which way.

You can use color for visual appeal but check that when rendered in grayscale that the information is not lost.

3) Identify Language of the Website & Any Language Changes Within the Page

You need to identify the language of the document for screen readers. This is usually done in the head section of the page in the html or xhtml <html xmlns="http://www.w3.org/1999/xhtml" lang="en">. But can also be done using a meta tag such as <meta http-equiv="content-language" content="en">

The other part of this checkpoint will apply to relatively few websites. Most sites are written in only one language. If you do use more than language and are not familiar with language codes see: http://www.utoronto.ca/webdocs/HTMLdocs/Book/Book-3ed/appe/iso639.html for a list. You would use either in-line for a small portion of text or in a block level element if there was a greater volume of text.

<a href="french.html" lang="fr">Pour la version française</a>

In reading the novel <span lang="fr">Le Petite Prince</span> the ...

4) Page “Works” Without Stylesheets

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

This does not mean that you shouldn't use stylesheets. You should because it is one of the easiest ways to separate content from presentation which is one goal in making an accessible site. What it does mean is that your page should degrade gracefully when stylesheets are not rendered. In other words it will still be functional if not quite as attractive.

An example would be my company's home page. If you have a compliant browser that renders stylesheets properly you see a header section, 3 columns of text and a footer. If you have a browser that only renders some CSS properly you will see text styled with a font/color and positioned images but the columns will be converted to sections that follow one after the other. While if your browser does not support stylesheets The text and images will all become linear but structure is still preserved by the use of proper html markup including h1-h3, <p> & <ul> tags. You can try it for yourself at wiserways.com.

5) Image Maps

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

When possible use a client side image map with alt & title tags instead of a server-side image map. Other alternatives would include slicing an image where feasible and putting alt & title tags on each slice.

6) Table

A) Row and column headers shall be identified for data tables. Tables used strictly for layout do not require row and column headers.

This isn't particularly difficult if you remember to use <th> for headers

B) 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.

This is probably the most tedious requirement to fully comply with. If a site fails for a reason other than missing alt tags this is the most common reason. An example would be:

7) Frames

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

Easiest way around this problem is to not use frames. If you must use frames for some reason then make sure that there is alternative in the <no frames> tag. It can be a site map that loads the framed content in a new window or another method to allow those without a frames compatible browser to access the information. Each frame must be clearly titled and give a clear indication of the purpose of the page.

8) Avoid Flicker

Unless you are using animation in the form of gifs, dhtml or Flash this is not something to be concerned about. If you are then be aware that flickering in the

9) Text Only Alternative Page

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.

Text only pages must replicate both content and functionality. If there are advertisements and coupons on the inaccessible page the same offers must be available to those using assistive technology along with all other content. Use this only as a last resort.

10) Scripts

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.

What this means is don't use javascript links that only work if there the browser has javascript enabled. It is almost as easy to create an accessible link using:

<a href="it.htm" target="newWindow" onclick="window.open(this.href, this.target); return false">contact us </a>

Instead of:

<a href="#" onclick="window.open('it.htm, 'newWindow')">contact us </a>
or
<a href="javascript:window.open('it.htm', 'newWindow')" >contact us </a>

The first link is an accessible link while the second is not.

11) Applets or Plug-ins

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).

Provided a link to a disability-accessible page where the plug-in can be downloaded or else an alternative means of accessing equivalent content is provided.

12) Forms

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.

This means forms need labels and ids. Best practice also includes setting a logical tabbing order and possibly hotkeys to jump directly to form fields.

13) Navigation

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

Using CSS this can be done by ordering the navigation elements using positioning. In the most common table based layouts you have a head section followed by one or more rows with 2+ columns and a footer. The left column traditionally contains the navigation for the page. To cause navigation to be read after content the fix is simple, instead of:

<table>
<tr><td colspan="2">header</td></tr>
<tr><td>navigation</td> <td>content</td></tr>     
<tr><td colspan="2'>footer</td></tr>
</table>

<table>
<tr><td colspan="2">header</td></tr>
<tr><td>&nbsp;</td> <td rowspan="2">content</td></tr>
<tr><td>navigation></td> </tr>
<tr><td colspan="2'>footer</td></tr>
</table>

If you choose you can put an invisible link to skip to the navigation in the cell where I have the &nbsp;.

14) Timed Response

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

This would be of most concern if you were using something like an automated slide show or an action must be taken within a preset time period. In which case you would need to provide a way for the visitor to extend the time period or an alternative way to access the content.

Conclusion

In most cases reaching WAI Level A compliance and §508 Compliance is easy to achieve and little more than “best design practice”.

Advantages to having an accessible site outweigh the relatively minor additional coding on the majority of websites.

Accessibility Resources

WAI Quick Tips Reference Cards
WAI Checklist
Accessibility with Dreamweaver
Accessible Movies with Flash MX
ACCVerify SE for FrontPage (free lite version)
Web Aim – How to Page
Web Aim – Accessibility Database
Section508.gov
Bobby
Wave Accessibility Evaluator (WAI Beta)
A-prompt Accessibility Checker