Click here to skip to main content.
scenic picture from Washington state
RESEARCH TOOLS › SAMPLE DOCS › GOV DOCS › Web Publishing - ADA requirements
 
King County Web Publishing - ADA Requirements

King County Web Publishing - ADA requirements

From KCWeb, the King County Intranet

Just as King County must insure equal access to its buildings and buses, web authors must insure equal access to County web content. The good news: It's actually easier than you think! Below are requirements King County web authors must follow in creating and maintaining Internet and intranet content in compliance with the Americans with Disabilities Act.

Image tags: All image tags -- even bullets! -- must include alternate text. Otherwise, a disabled user may simply read the word "IMAGE" and not know what it depicts. The code is rather simple; just put your description inside of the quote marks, as per below:

<img src="image.jpg" border="0" alt="Description goes here">

If the image links to something, you must make sure the description includes link info as well, as follows:

<a href="test.htm"><img src="image.jpg" border="0" alt="This image of X links to a page about Y."></a>

Image maps: Include menu alternatives for image maps to ensure that the embedded links are accessible. An image map is a picture on which parts of the picture can be clicked to find a link to another page. If the web page developer has not included an alternative menu, visitors using text-based browsers can be totally blocked from the site, or sent on a wild goose chase clicking unlabelled links that lead them in circles. An example of an ADA-compliant image map: the nav bar at the top of this page, which references an identical set of text menu items at the bottom of the page.

White backgrounds: All pages must have white backgrounds, to provide contrast for users with low vision or colorblindness.

Text transcriptions: If you use an audio, video, or graphical file that includes text (including Adobe Acrobat/Reader files), you must also offer a textual transcription of the content, either in HTML or in a simple text format. That way, disabled users will have access to the editorial content. HTML is preferred, but if that's too laborious, use at least two of these: Microsoft Word (if the file's under 50K), ASCII text (for graphics-free documents), and RTF (rich-text format, which takes up less memory than a Word file).

Text and RTF files are viewable in a significant cross-section of word-processing programs, including Word Perfect and Microsoft Word for Macintosh. If you use Microsoft Word and want to create a text or RTF file, simply save the document as a text-only or rich-text format file (file --> save as --> then click the drop-down in "save as type:"). Your link to the document will look like this: file.rtf, or file.txt.

PDF Files: If you're using Portable Document Format files, you should either a) have a text equivalent (as per above), or have a plan to create a text equivalent. There are obvious instances in which this is not possible -- with maps, for example, which cannot be conveyed in linear text.

Phone, e-mail connection: If you simply cannot provide your content in an accessible format, make sure to list a voice phone number, a TTY phone number, and an e-mail address where a user's request for such information can be quickly answered.

Testing: All pages and applications must be tested in Lynx, a text-only browser that simulates the experience of using a variety of browsers for disabled users . A copy of Lynx is available at ftp://kcweb.metrokc.gov/lynx/lynx w32.zip (check with your LAN admin first). To decompress this file, you'll need WinZip -- purchase one from hftp://www.winzip.com, or use a beta version at your own risk, here: ftp://nike.metrokc.gov/winzip95.exe. Learn how to use Lynx before last-minute testing.

No frames: Frames don't work in Lynx. Thus, they'll likely make a web interface unintelligible to anyone, including those with disabilities, using a text-only browser.

ADA-correct use of tables and cells: If you're going to use a table, make sure that the content will flow correctly in a text-only browser. Often, a table renders seemingly linear headlines and sentences into mish-mash. For example, if you created a one-table page containing with two headlines and two stories, a text browser would read the content thus: headline 1 in the upper-left cell, headline 2 in the upper-right cell, story 1 in the lower-left cell, and story 2 in the lower-right cell. Instead, you should create a page using two side-by-side tables within one larger table. Each of the smaller tables should be divided horizontally into two cells. The new page would read: headline 1 in the upper-left cell, story 1 in the lower-left cell, headline 2 in the upper-right cell, and story 2 in the lower-right cell.

Not making sense? Here are two examples, one bad, the other good. Check the code, or look at it in Lynx, to see the difference. Here goes:

The wrong way (see the code):

Headline 1 Headline 2
Story 1 Story 2

Incorrect code:

<table border="0" cellpadding="0" cellspacing="0" width="539">

<tr> <td width="250" align="center" bgcolor="#C0C0C0"><b><font face="Arial">Headline 1</font></b></td>
<td width="39"></td>
<td width="250" align="center" bgcolor="#C0C0C0"><b><font face="Arial">Headline 2</font></b></td></tr>
<tr> <td width="250" align="center"><font face="Arial">Story 1</font></td>
<td width="39"></td>
<td width="250" align="center"><font face="Arial">Story 2</font></td>
</tr></table>

The right way (read the code):

Headline 1

Story 1

Headline 2

Story 2

Correct code:

    <table border="0" cellpadding="0" cellspacing="0" width="539">
    <tr> <td width="250">
    <table border="0" cellpadding="0" cellspacing="0" width="250">
    <tr> <td bgcolor="#C0C0C0"><p align="center"><b><font face="Arial">Headline 1</font></b></td></tr>
    <tr> <td><p align="center"><font face="Arial">Story 1</font>
    </td> </tr> </table>
    </td>
    <td width="39"></td>
    <td width="250"><table border="0" cellpadding="0" cellspacing="0" width="250">
    <table border="0" cellpadding="0" cellspacing="0" width="250">
    <tr> <td bgcolor="#C0C0C0"><p align="center"><b><font face="Arial">Headline 2</font></b></td> </tr>
    <tr> <td><p align="center"><font face="Arial">Story 2</font>
    </td> </tr> </table>
    </td> </tr> </table>

More resources. The following are a few online resources to help ensure the web site you are designing and/or maintaining will be as accessible as possible.

  • Accessibility and the World Wide Web
    (http://wata.org/resource/internet/design-for-web.htm), located at Washington Assistive Technology Alliance (WATA) web site. This site is managed by WATA and provides a broad range of links to resources you may use to help ensure your site is as accessible as possible to all users, including those with disabilities.

  • Bobby (http://www.cast.org/bobby/), no-cost, on-line evaluation tool to see if your site is accessible. Just go to the site, type in the address of any web page, and wait for an online report.

  • Web Content Accessibility Guidelines (http://www.w3.org/TR/WAIWEBCONTENT/), version 1.0 created as part of the W3C Web Accessibility Initiative (http://www.w3.org/WAI/).

  • Lynx Evaluation Tool (http://ugweb.cs.ualberta.ca/%7Egerald/lynx-me.cgi), no-cost, on-line evaluation tool to see what your site looks like via Lynx, a textbased browser which is often used to emulate other text-based browsers. (NOTE: This link is not currently part of the intranet page, but is added here as a useful resource.)