uspto.gov
Skip over navigation

Section 508 Reference Guide
1194.22 Web-based Intranet and Internet Information and Applications

Overview

This Section 508 category applies to purchased or contracted websites, including the information content as well as any associated applications and plug-ins. These requirements also apply to web-based interfaces for other EIT products or systems, such as for digital copiers or telecommunications devices (wired, analog and digital wireless, and Internet).

Web-based information is content provided via webpages. A Web-based application is any application embedded in a webpage that is necessary to fully deliver the content of the page to the user. Web-based applications are also any aspect of a webpage with which the user must interact in order to operate the given function of a webpage. For example, a streaming audio player delivers the content of a page to the user and, therefore, must be accessible to the user.

Back to top

Remember that…

  • The more complex and graphic the website, the more challenging it will be to make compliant. In other words, simple, straightforward web sites are considerably easier to make compliant.
  • The most effective way to determine compliance is by reading the code.
  • Accessibility testing tools are effective, but they cannot provide a 100% guarantee that a web document is compliant. When using testing tools, it is advisable to use at least two different tools to evaluate a web document. One of those two tools should be what the agency's webmaster uses to develop and/or test webpages and web-based applications.

 

Back to top

References

 

Back to top

Provide text equivalents

In other words…

For any non-text elements (e.g., logos, pictures, icons), provide an equivalent text description.

Terms

  • Text equivalent: Description in plain text of the content and purpose of visual or audio information.
  • Non-text element: Any component that is not plain text and that conveys meaning that is required for comprehension of content or to facilitate navigation (e.g., an image, an image of text, a graphic, or an audio clip).
  • ALT and LONGDESC: Attributes in HTML that associate short or long text equivalents with certain non-text elements.

Determining Compliance

Check for non-text elements that require text alternatives. Non-informative or decorative graphics should use null alternatives.

A quick method to check for compliance is to position the mouse cursor over images and see whether an appropriate text description of the image appears. This includes images of text.

A more detailed method for determining compliance is to check web site code for non-text elements and their text equivalents.

  • Search the HTML source for IMG tags. For each IMG, note if there is an ALT or LONGDESC attribute. The ALT attribute should always be present.
  • For spacing, layout, and other non-content images, the value of ALT should be ALT="" or ALT=" ".
  • The LONGDESC attribute is optional, and should be used when the text needed to describe the function of the graphic is too long for ALT text.
  • Search the HTML source for image maps (image with an "ismap" or "usemap" attribute). See 1194.22(e) and (f) for 508 compliance regarding image maps.
  • Search the HTML source for APPLET, AREA, or INPUT tags. For each element note whether there is an ALT attribute or nested content which provides the text equivalent.

Notes

  • There are tools that can help to identify potential accessibility problems. However, to be effective, the user must be proficient with the tool, know the strengths and weakness of the tool, and have a good grasp of the law so that they can interpret the findings of the tool.
  • The use of AT as an evaluation tool is limited because these tools are primarily designed to support accessibility and not to determine compliance.

Examples

Example 1
Description Equivalent alternative text must be assigned to each image or animation in a web application or page.
HTML <IMG SRC="http://www.uspto.gov/images/20important.gif" ALT="important">
Result important


Example 2
Description If an image is only a spacer or a decoration, then empty alternative text should be provided.
HTML <IMG SRC="http://www.uspto.gov/images/blank.gif" ALT="" WIDTH="15" HEIGHT="15" BORDER="1">
Result


Example 3
Description Ideally, ALT text should be brief. When a LONGDESC attribute is required, a "d" link to the description may also be provided for browsers that do not support LONGDESC.
HTML <A HREF="http://www.uspto.gov/cgi-bin/exitconf/internet_exitconf.pl?target=www.USA.gov"><IMG SRC="http://www.uspto.gov/images/usagov.gif" ALT="USA.gov" LONGDESC="ex03.jsp" BORDER="0"></A> <A HREF="ex03.htm"><EM>d</EM></A>
Result USA.gov d

 

Back to top

Synchronize multimedia alternatives

1194.22(b) "Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation."

In other words…

The timing of audio descriptions, captions, or other alternatives must be synchronized in online multimedia presentations.

Terms

  • Equivalent alternatives: Methods of providing information to a user that fulfill the same function or purpose as the original content (e.g., captions of audio information, audio descriptions of visual information).
  • Multimedia presentation

Determining Compliance

Check to ensure:

  • Audio descriptions are presented at the appropriate time (e.g., the descriptions do not overlap other spoken information).
  • Captions are correct and appear in a timely manner.

Note

 

Back to top

Supplement color coding

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

In other words…

Design web pages so that all information is color independent. The importance of information should be based on context (e.g., location or text content), markup (e.g., HTML heading levels), or other means accessible to AT and to users who have difficulty perceiving colors.

Determining Compliance

Identify all cases where information is conveyed with color. If color is used in page elements, those elements must also be designated by specific or unique non-color representations that make them easy to identify. For example, an important paragraph in red text might be preceded by the word "IMPORTANT", and may also be italicized, bold, a different font face or size.

  • Print the page on a black and white printer or view on a monochrome monitor. Navigation and other information should still be discernable.
  • Verify that links are not distinguished by color alone. A common practice of removing underlines for links creates this problem.
  • Verify that any information conveyed with color is also conveyed through text or through another means that is accessible to AT.

Notes

  • Sometimes color combinations that are readable become unreadable when mapped to black-and-white in printing. This can yield a different result than viewing with the eye, color-blind or not. Printing operations will render shades of gray by dithering, in an attempt to match the luminance of the color original. A person viewing the result might incorrectly conclude that a page lacks color-dependence.
  • Gray-scale and monochrome monitors have become a tiny fraction of the overall market, and some mechanisms that attempt to support them on modern video hardware do so in ways that lead to incorrect conclusions about the software being viewed. In particular, some systems support gray-scale monitors by connecting only the output of the green signal to the monitor's input, effectively discarding the red and blue portions of the signal. This incorrectly maps the luminance information because the discarded colors account for a large percentage of the total.
  • This standard is parallel to standards 1194.21(i) for software applications and operating systems and 1194.25(g) for self-contained, closed products.

 

Back to top

Readability without styles

1194.22(d) "Documents shall be organized so they are readable without requiring an associated style sheet."

In other words…

Web pages should be readable and accessible based on content rather than style formatting.

Term

  • Cascading style sheet: A collection of formatting instructions stored in a file that determines how the layout of the web sites to which it is attached are presented (e.g., displayed on screens, printed, or pronounced).

Determining Compliance

Using Internet Explorer, click on Tools at the top of the page, click on Internet Options, on the General page, click on Accessibility, and then check all three boxes under the Formatting tab.

Using Netscape, click Edit menu, select Preferences, and under Advanced uncheck Enable Style Sheets.

  • View web pages. The pages should still be readable with the style sheets turned off.

Notes

  • Additional information on how to turn style sheets on and off is typically available from the help pages of Internet browsers.
  • Satisfying this requirement does not guarantee interoperability with AT. For example, while the BLOCKQUOTE and TABLE elements in HTML are meant to mark up quotations and tabular data, many developers instead use them to create visual effects such as indentation and alignment. When specialized browsing software, such as a screen reader, encounters elements that are misused in this way, the results can be unintelligible to the user.
  • Interference between web pages and user-defined style sheets may be a problem for accessibility but is not specified in the requirements of this or any other technical provision of 1194.

 

Back to top

Server-side image maps

1194.22(e) "Redundant text links shall be provided for each active region of a server-side image map."

In other words…

For every linked region in a server-side image map there must be an equivalent text link.

Terms

  • Active region
  • Server-side image map
  • Redundant text link: For an active region, a link to the same location as the active region's link, or a link to an equivalent location.

Determining Compliance

  • Click on all the different regions of an image map. (Remember that a region can be as small as a single pixel.) Each region should have a corresponding text link on the page.

Notes

  • Developers at the USPTO should strictly avoid server-side image maps in favor of client-side image maps because of the next standard, 1194.22(f).
  • To locate server-side image maps in HTML, search for
    • the ISMAP attribute within IMG elements
    • the TYPE="image" attribute within INPUT elements of a form
  • Redundant text links are most effective if they are positioned before or at least adjacent to the image map so that a user can know what is going on before getting to a non-readable image map.
  • Web pages must use redundant text links so that AT such as screen readers can provide choices to people who cannot see the choices presented in the image.

Examples

In accord with the first note above, our examples do not include actual server-side image maps. Instead, we will represent the image maps with image links.

Example 4
Description

By themselves, server-side image maps are not accessible to AT. Here, redundant text links are included within instructions.

For this image map to be useful, the active regions and redundant text links would not link to static pages, but rather would pass parameters to a script. The first text link would look something like <A HREF="cgi-bin/schedule?600">6am</A>

HTML <P>To check whether the conference room is available, select a time slot starting at
<A HREF="ex0406.htm">6am</A>, <A HREF="ex0407.htm">7am</A>,
<A HREF="ex0408.htm">8am</A>, <A HREF="ex0409.htm">9am</A>,
<A HREF="ex0410.htm">10am</A>, <A HREF="ex0411.htm">11am</A>,
<A HREF="ex0412.htm">12pm</A>, <A HREF="ex0401.htm">1pm</A>,
<A HREF="ex0402.htm">2pm</A>, <A HREF="ex0403.htm">3pm</A>,
<A HREF="ex0404.htm">4pm</A>, or <A HREF="ex0405.htm">5pm</A>.</P>
<A HREF="ex04.htm"><IMG SRC="http://www.uspto.gov/helpdesk/status/clock.gif" ISMAP ALT="clock face" WIDTH="30" HEIGHT="30"></A>
Result

To check whether the conference room is available, select a time slot starting at 6am, 7am, 8am, 9am, 10am, 11am, 12pm, 1pm, 2pm, 3pm, 4pm, or 5pm.

clock face


Example 5
Description Another solution is to offer a link to a separate page of redundant text links.
HTML <P>To check whether the conference room is available, <A HREF="ex0400.htm">select a time slot</A>.</P>
<A HREF="ex04.htm"><IMG SRC="http://www.uspto.gov/helpdesk/status/clock.gif" ISMAP ALT="clock face" WIDTH="30" HEIGHT="30"></A>
Result

To check whether the conference room is available, select a time slot.

clock face

 

Back to top

Client-side image maps

In other words…

When an image map is provided in a web application or page, it must be implemented as a client-side image map, unless its regions are so complex that it must be defined as a server-side image map.

Terms

Determining Compliance

  • To locate server-side image maps in HTML:
    • Search for the ISMAP attribute within IMG elements.
    • Search for the TYPE="image" attribute within INPUT elements of a form.
    • Ignore IMG tags with USEMAP attributes, which are used in client-side image maps.
  • Client-side image maps can define regions that are arbitrarily complex closed polygons, whereas server-side image maps can define regions as small as one pixel. As a practical matter, the only regions that cannot be defined by a client-side image map are:
    • regions that consist of one pixel or a line of pixels, which may not be accessible with a mouse
    • single regions that consist of multiple non-contiguous areas
  • For each server-side image map, ensure that a client-side image map cannot effectively replace it.

Note

  • Developers at the USPTO should strictly avoid server-side image maps in favor of client-side image maps.

Example

Contrast this example with Examples 4 and 5.

Example 6
Description

Properly defined client-side image maps are accessible. Both the image and the defined regions are marked with ALT text.

For this image map to be useful, the active regions would not link to static pages, but rather would pass parameters to a script: <AREA HREF="cgi-bin/schedule?600"…, etc.

HTML <P>To check whether the conference room is available, select a time slot.</P>
<IMG SRC="http://www.uspto.gov/helpdesk/status/clock.gif" BORDER="2" USEMAP="#cs_map" ALT="clock face" WIDTH="30" HEIGHT="30">
<MAP NAME="cs_map">
<AREA HREF="ex0406.htm" ALT="6am" SHAPE="poly" COORDS="15,15,15,30,11,29,7,28">
<AREA HREF="ex0407.htm" ALT="7am" SHAPE="poly" COORDS="15,15,7,28,4,25,2,22">
<AREA HREF="ex0408.htm" ALT="8am" SHAPE="poly" COORDS="15,15,2,22,1,19,0,15">
<AREA HREF="ex0409.htm" ALT="9am" SHAPE="poly" COORDS="15,15,0,15,1,11,2,7">
<AREA HREF="ex0410.htm" ALT="10am" SHAPE="poly" COORDS="15,15,2,7,5,4,7,2">
<AREA HREF="ex0411.htm" ALT="11am" SHAPE="poly" COORDS="15,15,7,2,11,1,15,0">
<AREA HREF="ex0412.htm" ALT="12pm" SHAPE="poly" COORDS="15,15,15,0,19,1,22,2">
<AREA HREF="ex0401.htm" ALT="1pm" SHAPE="poly" COORDS="15,15,22,2,25,4,28,7">
<AREA HREF="ex0402.htm" ALT="2pm" SHAPE="poly" COORDS="15,15,28,7,29,11,30,15">
<AREA HREF="ex0403.htm" ALT="3pm" SHAPE="poly" COORDS="15,15,30,15,29,19,28,22">
<AREA HREF="ex0404.htm" ALT="4pm" SHAPE="poly" COORDS="15,15,28,22,25,25,22,28">
<AREA HREF="ex0405.htm" ALT="5pm" SHAPE="poly" COORDS="15,15,22,28,19,29,15,30">
</MAP>
Result

To check whether the conference room is available, select a time slot.

clock face 6am 7am 8am 9am 10am 11am 12pm 1pm 2pm 3pm 4pm 5pm

 

Back to top

Simple table headers

1194.22(g) "Row and column headers shall be identified for data tables."

In other words…

Data tables must contain meaningful row and column headers that are properly associated with the data. (Decorative or layout tables should not contain headers.)

Terms

Determining Compliance

All complex data tables and most simple data tables require both row headers and column headers.

For very simple tables, column headers or row headers alone may be sufficient to convey meaning. For an example with column headers in the previous chapter, see the table of System-Wide Shortcut Keys.

Two ways of determining compliance for this standard are to review the HTML source code or to use AT to evaluate a page. However, the use of AT as an evaluation tool is limited because AT was designed primarily to support accessibility and not to determine Section 508 compliance.

  • In HTML, a table header may be defined by a TH element (header only) or by a TD element (header that also acts as data).
  • In a simple data table:
    • The SCOPE attribute can associate a column or row header with the cells in that column or row.
    • A column header is often defined as follows: <TH SCOPE="col">text of column header</TH>
    • A row header can be defined similarly: <TD SCOPE="row">text of row header</TD>
    • Some AT does not correctly interpret row headers defined with SCOPE.
  • In a complex data table, column and row headers must be defined using the ID and HEADERS attributes. See the next standard, 1194.22(h).
  • If AT is used to evaluate a data table, the row and column headers should be identifiable for each cell of the table.

Notes

  • There are software tools that can help to identify potential accessibility problems. However, to use a tool effectively, a user must be proficient with the tool, know the strengths and weaknesses of the tool, and have a good grasp of the law to be able to interpret the findings of the tool.
  • Please see this document's review of testing software in the chapter Tools to Evaluate Section 508 Compliance.

Example

Example 7

Description

A simple data table with column and row headers defined with the SCOPE attribute. See the next standard for the same example with ID and HEADERS attributes.

HTML

<TABLE BORDER="1" SUMMARY="Red, green and blue light can combine to make magenta, yellow and cyan">
<CAPTION>RGB Color Combinations</CAPTION>
<THEAD>
<TR>
<TH>&nbsp;</TH> <TH SCOPE="col">Red</TH> <TH SCOPE="col">Green</TH> <TH SCOPE="col">Blue</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TH SCOPE="row">Red</TH> <TD>Red</TD> <TD>Yellow</TD> <TD>Magenta</TD>
</TR>
<TR>
<TH SCOPE="row">Green</TH> <TD>Yellow</TD> <TD>Green</TD> <TD>Cyan</TD>
</TR>
<TR>
<TH SCOPE="row">Blue</TH> <TD>Magenta</TD> <TD>Cyan</TD> <TD>Blue</TD>
</TR>
</TBODY>
</TABLE>

Result
RGB Color Combinations
  Red Green Blue
Red Red Yellow Magenta
Green Yellow Green Cyan
Blue Magenta Cyan Blue

 

Back to top

Complex table headers

1194.22(h) "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."

In other words…

In complex data tables, data must be explicitly associated with the appropriate headers. That is, for any cell in a complex data table, the user should be able to identify meaningful headers that explain the significance of that cell's data. (Decorative or layout tables should not contain headers.)

Terms

Determining Compliance

This is similar to the previous standard 1194.22(g), except that this standard specifically addresses complex data tables. All complex data tables and most simple data tables require both row headers and column headers.

Two ways of determining compliance for this standard are to review the HTML source code or to use AT to evaluate a page. However, the use of AT as an evaluation tool is limited because AT was designed primarily to support accessibility and not to determine Section 508 compliance.

  • In HTML, a table header may be defined by a TH element (header only) or by a TD element (header that also acts as data).
  • Use of the ID and HEADERS attributes:
    • Every row or column header cell should be given a unique identifier: <TH ID="rowhead01">text of row header 1</TH>
    • Every data cell related to the header cell should be associated with the header's identifier: <TD HEADERS="rowhead01">cell data</TD>
    • Header cells can be associated with other header cells. E.g., the same TD element can contain both ID and HEADERS attributes.
    • Most HEADERS attributes should list at least one column header ID and one row header ID, in order of precedence: HEADERS="colhead01 colhead04 rowhead01". Exceptions may include HEADERS attributes in row header cells in the first column of the table.
  • If AT is used to evaluate a data table, the row and column headers should be identifiable for each cell of the table.

Examples

Example 8

Description

A simple data table with column and row headers defined using the ID and HEADERS attributes. Contrast this representation with the example from the previous standard.

HTML

<TABLE BORDER="1" SUMMARY="Red, green and blue light can combine to make magenta, yellow and cyan">
<CAPTION>RGB Color Combinations</CAPTION>
<THEAD>
<TR>
<TH>&nbsp;</TH>
<TH ID="red_col">Red</TH>
<TH ID="grn_col">Green</TH>
<TH ID="blu_col">Blue</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TH ID="red_row">Red</TH>
<TD HEADERS="red_row red_col">Red</TD>
<TD HEADERS="red_row grn_col">Yellow</TD>
<TD HEADERS="red_row blu_col">Magenta</TD>
</TR>
<TR>
<TH ID="grn_row">Green</TH>
<TD HEADERS="grn_row red_col">Yellow</TD>
<TD HEADERS="grn_row grn_col">Green</TD>
<TD HEADERS="grn_row blu_col">Cyan</TD>
</TR>
<TR>
<TH ID="blu_row">Blue</TH>
<TD HEADERS="blu_row red_col">Magenta</TD>
<TD HEADERS="blu_row grn_col">Cyan</TD>
<TD HEADERS="blu_row blu_col>Blue</TD>
</TR>
</TBODY>
</TABLE>

Result
RGB Color Combinations
  Red Green Blue
Red Red Yellow Magenta
Green Yellow Green Cyan
Blue Magenta Cyan Blue

Example 9

Description

A complex data table with column and row headers defined using the ID and HEADERS attributes.

HTML

<TABLE BORDER="1" SUMMARY="Numbers of rock and leaf samples collected on field trips">
<CAPTION>Collected rock and leaf samples</CAPTION>
<THEAD>
<TR>
<TH ID="c_trip" rowspan="2">Field Trip</TH>
<TH ID="c_date" rowspan="2">Day</TH>
<TH ID="c_rock" colspan="3">Rock</TH>
<TH ID="c_leaf" colspan="3">Leaf</TH>
</TR>
<TR>
<TD ID="c_igne" HEADERS="c_rock">Igneous</TD>
<TD ID="c_meta" HEADERS="c_rock">Metamorphic</TD>
<TD ID="c_sedi" HEADERS="c_rock">Sedimentary</TD>
<TD ID="c_ash" HEADERS="c_leaf">Ash</TD>
<TD ID="c_elm" HEADERS="c_leaf">Elm</TD>
<TD ID="c_oak" HEADERS="c_leaf">Oak</TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD ID="c_trip1" HEADERS="c_trip" rowspan="2">2005 June</TD>
<TD ID="c_day_1_1" HEADERS="c_trip c_trip1">18</TD>
<TD HEADERS="c_trip1 c_day_1_1 c_rock c_igne">38</TD>
<TD HEADERS="c_trip1 c_day_1_1 c_rock c_meta">54</TD>
<TD HEADERS="c_trip1 c_day_1_1 c_rock c_sedi">28</TD>
<TD HEADERS="c_trip1 c_day_1_1 c_leaf c_ash">67</TD>
<TD HEADERS="c_trip1 c_day_1_1 c_leaf c_elm">27</TD>
<TD HEADERS="c_trip1 c_day_1_1 c_leaf c_oak">39</TD>
</TR>
<TR>
<TD ID="c_day_1_2" HEADERS="c_trip c_trip1">19</TD>
<TD HEADERS="c_trip1 c_day_1_2 c_rock c_igne">65</TD>
<TD HEADERS="c_trip1 c_day_1_2 c_rock c_meta">29</TD>
<TD HEADERS="c_trip1 c_day_1_2 c_rock c_sedi">48</TD>
<TD HEADERS="c_trip1 c_day_1_2 c_leaf c_ash">67</TD>
<TD HEADERS="c_trip1 c_day_1_2 c_leaf c_elm">35</TD>
<TD HEADERS="c_trip1 c_day_1_2 c_leaf c_oak">12</TD>
</TR>
<TR>
<TD ID="c_trip2" HEADERS="c_trip" rowspan="2">2005 July</TD>
<TD ID="c_day_2_1" HEADERS="c_trip c_trip2">23</TD>
<TD HEADERS="c_trip2 c_day_2_1 c_rock c_igne">92</TD>
<TD HEADERS="c_trip2 c_day_2_1 c_rock c_meta">83</TD>
<TD HEADERS="c_trip2 c_day_2_1 c_rock c_sedi">81</TD>
<TD HEADERS="c_trip2 c_day_2_1 c_leaf c_ash">74</TD>
<TD HEADERS="c_trip2 c_day_2_1 c_leaf c_elm">82</TD>
<TD HEADERS="c_trip2 c_day_2_1 c_leaf c_oak">90</TD>
</TR>
<TR>
<TD ID="c_day_2_2" HEADERS="c_trip c_trip2">24</TD>
<TD HEADERS="c_trip2 c_day_2_2 c_rock c_igne">87</TD>
<TD HEADERS="c_trip2 c_day_2_2 c_rock c_meta">68</TD>
<TD HEADERS="c_trip2 c_day_2_2 c_rock c_sedi">89</TD>
<TD HEADERS="c_trip2 c_day_2_2 c_leaf c_ash">86</TD>
<TD HEADERS="c_trip2 c_day_2_2 c_leaf c_elm">93</TD>
<TD HEADERS="c_trip2 c_day_2_2 c_leaf c_oak">91</TD>
</TR>
</TBODY>
</TABLE>

Result
Collected rock and leaf samples
Field Trip Day Rock Leaf
Igneous Metamorphic Sedimentary Ash Elm Oak
2005 June 18 38 54 28 67 27 39
19 65 29 48 67 35 12
2005 July 23 92 83 81 74 82 90
24 87 68 89 86 93 91

 

Back to top

Identify frames with titles

In other words…

Web pages that use frames must include title markup for frame identification and navigation.

Term

  • Frames: Defined, rectangular regions of a web page. Each frame may contain distinct content, e.g., an HTML document or an image.

Determining Compliance

For each frame, check if either of the following conditions is true:

  • The frame is clearly identified through the TITLE attribute of the FRAME or IFRAME element (e.g., <FRAME SRC="nav.htm" TITLE="Navigational Links">).
  • A descriptive text title is included at the beginning of the frame content to facilitate quick identification of the frame.

Back to top

Avoid fast flashing/blinking

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

In other words…

Design web pages so that flicker on the screen is nonexistent, or very slow (e.g., one flicker per second), or very fast (at least fifty-five flickers per second).

Terms

Determining Compliance

It is best not to use web pages that flash or blink. For example, avoid images or media that flash messages across the screen to capture the user's attention.

  • Visually review web pages to locate flashing or blinking elements.
  • Special tools are required to accurately measure the screen flicker rate that might be caused by web pages. Check the user manual for the flash/blink rate. If it is not listed, call the manufacturer for information.
  • Because 2 Hz is relatively slow, it is possible to use visual observation to determine whether the blink rate is greater than 2 Hz. Ideally, the blink rate should not be greater than 1 Hz, i.e., one blink per second. If no timing device is available, you may approximate a one-second interval by speaking the words "one thousand one".

Notes

  • If there are multiple items that are flashing simultaneously in the same visual space, the cumulative effect should be considered.
  • Processor speeds and graphic cards can affect blink rate, so it is best to measure blink rate on all the relevant products.
  • This standard is parallel to standards 1194.21(k) for software applications and operating systems and 1194.25(i) for self-contained, closed products.

 

Back to top

Providing text-only pages

1194.22(k) "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."

In other words…

When a website cannot comply with the provisions of 1194.22 in any other way, a text-only equivalent of the site's content shall be provided to users. Whenever the content of the non-compliant page is changed, the text-only site must be updated as well.

Determining Compliance

  • For every non-compliant page that cannot be made compliant, there must be a text-only equivalent page that should correspond to the non-compliant page with the same information available on the text-only page.
  • The link to an alternative text-only page should be easily found on the web page and should not require any special technology (i.e., non-compliant) to be activated.

Example

Example 10

A web site may require the extensive use of proprietary multimedia that cannot be made compliant without an undue burden on the agency. Often web developers will provide a site with two different views: one site is a graphical view and the other is a text-only version of the same content. Usually a text-only website has a selection button for this option at the top left of the web page so that it is accessible.

Back to top

Identify script information

1194.22(l) "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."

In other words…

For all websites that use scripts to generate or display content, or to create interface elements, the information provided through that script must be accessible to AT.

Terms

  • Scripting language: A programming language that is used to manipulate, customize, and automate the facilities of an existing system. Note this provision only refers to the use of scripting languages for creating and displaying dynamic web content.
  • Interface element: See User interface element
  • Functional text: Text that, when accessed by AT, conveys an accurate message as to what is being displayed by the script or that describes what action the script will perform.
  • Image Rollover: The action of moving the mouse cursor over an image, or, a programmatic function that is triggered by this action. For example, moving the mouse cursor over an image could activate a script to display a different image.

Determining Compliance

Identify all uses of scripts to display information or create interface elements. For example, one would identify a script in an HTML document by the presence of:

  • The SCRIPT element
  • Event handler attributes, i.e., attributes whose names begin with "on" (e.g., onMouseOver)
  • JavaScript links, i.e., HREF attributes that use the JavaScript protocol (e.g., <A HREF="javascript:doSomething()">link text</A>)

Inspect web content source to help identify presence of functional text for scripts. Some hints on how to determine what type of scripts are potential problems:

  • Image rollovers are an accessibility problem if text or other meaningful information is conveyed in the rollover image (e.g., the normal state is a blank button, but on rollover, the button shows a title for the item or a recognizable logo).
  • The item changes content on the page (e.g., rollover in an area on the page causes text or other content to appear in another area, when that content is otherwise invisible). This is an issue for users who are visually or dexterity impaired.
  • Elements that act as interface adjustments must be verified as compliant.
  • Scripts that validate form input are a problem.
  • Form submission scripts (i.e. if the form uses an anchor and JavaScript to submit a form (e.g., <A HREF="javascript:document.forms[0].submit()"></A>)) are a problem for people with JavaScript disabled; they won't be able to submit the form.
  • Dynamic HTML code is a problem.
  • Redirecting or refreshing a web page is a problem.
  • Popup windows (<A HREF="javascript:window.open('foo')">more link text</A>) and window focus changes (<A HREF="javascript:window.parent.frames[1].focus()">other link text</A>) confuse users of screen readers by changing the focus without user instruction.
  • Dynamic content generation is a problem.
  • The use of AT as a measurement method is limited by the adequacy of the algorithms and heuristic methods of each AT tool. An AT tool can be used to identify specific AT/EIT interoperability problems, but it cannot predict results with other AT or with other versions of the same AT tool, operating system, application or accessibility architecture. AT should include the full range: screen readers, screen magnifiers, alternate input devices, etc.
  • Some screen readers will react to scripts and some will not. Testing with a modern screen reader may not find problems for other screen readers still in use.

JavaScript rollovers used for visual effects, such as highlighting that does not change content but provides redundant information with color (see 1194.22(c) above), are not an issue for accessibility for the visually impaired and might improve usability for the learning impaired.

Back to top

Providing required plug-ins

1194.22(m) "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)."

In other words…

If a web page requires an application external to a user's browser (e.g., an applet or plug-in) to view content, the application must conform to 1194.21 Software Applications and Operating Systems standards. Also, the web page must provide a link to the application.

Terms

  • Applet: A JavaT program that runs within a user agent (e.g., within a web browser).
  • Plug-in: An optional program that works in conjunction with a user agent, e.g., with a web browser. Users generally choose to include or exclude plug-ins from their user agents. Plug-ins can be downloaded and installed on a user's computer, enabling the user agent to access or modify files with proprietary formats when these files are included as a part of a web page.

Determining Compliance

Identify all cases where an applet, plug-in or other application is required on the client system to interpret page content. Tips for inspecting HTML to identify required plug-ins, applets or other applications:

  • Look for the OBJECT, APPLET, or EMBED elements.
  • Look for links to files with extensions other than .HTML, .HTM, .JPEG, .GIF and .XHTML, or any proprietary extensions that are not directly handled by a browser.
  • Run the plug-in, applet, or other application on the page and test the interface against the 1194.21 standards. Or, choose another means to verify that the plug-in conforms to the 1194.21 standards.

Note

  • Common plug-ins and applications may include Adobe Acrobat Reader (.PDF); Macromedia Flash Player (.SWF) and Shockwave (.DCR); and Microsoft Word (.DOC), Excel (.XLS) and PowerPoint (.PPT).

 

Back to top

Providing electronic forms

1194.22(n) "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."

In other words…

Electronic forms in products must be accessible to AT. This includes the fields in the form, all information required to complete the form, and any functions used to submit the form.

Term

Determining Compliance

Inspect HTML source looking for the FORM element. Examples of accessible approaches to various form element functionality include:

  • For selection menus (i.e., drop down boxes), radio buttons and check boxes, ensure that an AT user can ascertain the options being presented.
  • For edit boxes (i.e., text fields and text areas), users should be able to relate the text labels to the edit boxes, to enter text in the edit boxes, and to verify the entries.
  • For buttons (like "Reset", "Submit") the user should be able to determine their purpose and activate them.
  • For forms embedded in data tables, the user should be able to associate the column header and row header with a text entry cell in the form.
  • For help, the user should be able to navigate back and forth between the current section of the form and instructions for that section.
  • AT should receive all information in the correct order.

Notes

  • Some design features of an electronic form generally facilitate access to AT, such as the relationship between control labels and controls, or the sequence/ordering of form fields and directions or cues. In HTML, look for TABINDEX attributes. If present, the sequence of these attributes should match the optimal navigation sequence of the form. Note that some browsers do not support TABINDEX.
  • In HTML, labels should be associated with input fields by using the LABEL tag. This association is required for AT. If a field is labeled with the LABEL tag, the relative position of the visible label is not important to AT.
  • When forms are used together with tables, some screen readers can have a conflict with select boxes, permitting the user to select more than one choice in a list.
  • The use of AT as a measurement method is limited by the adequacy of the algorithms and heuristic methods of each AT tool. An AT tool can be used to identify specific AT/EIT interoperability problems, but it cannot predict results with other AT or with other versions of the same AT tool, operating system, application or accessibility architecture. AT should include the full range: screen readers, screen magnifiers, alternate input devices, etc.
  • Satisfying this requirement supports interoperability with AT such as screen readers or screen magnifiers.
  • This standard is parallel to standard 1194.21(l) for software applications and operating systems.

Example

Example 11
Description Text input fields are defined with the INPUT element, and are associated with the corresponding labels using the LABEL element. To associate a label with a control, the label's FOR attribute must match the control's ID attribute. Since this is only an example, the Submit button is not enabled in the Result below.
HTML <FORM>
<P>
<LABEL FOR="e_city">City</LABEL><BR>
<INPUT TYPE="text" NAME="City" SIZE="20" ID="e_city"><BR>
<LABEL FOR="e_state">State</LABEL><BR>
<INPUT TYPE="text" NAME="State" SIZE="20" ID="e_state"><BR>
<INPUT TYPE="submit" VALUE="Submit" NAME="Submit">
<INPUT TYPE="reset" VALUE="Reset" NAME="Reset">
</P>
</FORM>
Result





 

Back to top

Skipping repetitive links

1194.22(o) "A method shall be provided that permits users to skip repetitive navigation links."

In other words…

For web pages or applications with navigation links that occur more than once, a means must be provided for users to skip such information.

Terms

  • Repetitive navigation links: A set of routine navigation links that often appear on the top, side, or bottom of a web page.

Determining Compliance

Identify those links that are repetitive navigation links. This can be done by pulling up several "screens" or pages of information and locating banners of links that are common throughout the interface. Then observe each page's source code:

  • If a page has repetitive navigation links, there should be an adequately identified mechanism to skip past the page's non-content.
  • The skip link must appear before the repetitive navigation links.
  • The skip link target (anchor) must appear after the repetitive navigation links.

Notes

  • The skip link target is not specified in the standard. Appropriate target locations are the beginning of the next block of links or the top of the page content.
  • Skipping straight to the beginning of the content may prevent the user from seeing additional links that are not repetitive.
  • Skip links are sometimes hidden because it is thought that only screen reader users need them. People who access web content using only the keyboard can benefit from skip links.
  • When frames are used, navigation links may be grouped within a single frame. In this case, the navigation frame should be properly identified as required by 1194.22(i), and the frameset should be static.

Example

Example 12

There is an invisible skip link in the site-wide navigation bar at the top of this page. The link is immediately before the USPTO Seal, and it allows the user to skip to the breadcrumb trail.

Back to top

Interactive system timeouts

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

In other words…

Alert the user whenever a time-critical action is required on their part. The user must be given enough time to extend the response time.

Note: Assume that informed individuals can reasonably and consistently judge the amount of time they need and indicate that more time is needed.

Determining Compliance

For each product or function that requires a response within a specific amount of time:

  • The user must be warned before the response time has elapsed.
  • The product must provide sufficient time for the user to indicate that more time is required.
  • The user must be able to extend the response time to allow sufficient time for the user to complete the function.

Notes

  • If the response time is not limited, this standard is not applicable.
  • Although not required, it is good programming practice to use non-destructive timeouts.
  • This standard is parallel to standards 1194.23(d) for telecommunication products and 1194.25(b) for self-contained, closed products.

 

Back to top

General Rules for Compliant Web Pages

The following are general rules to help you develop compliant web pages.

  • Provide text alternates for all images in ALT tags.
  • Make meaning independent of color.
  • Identify language changes.
  • Make pages style-sheet independent.
  • Update equivalents for dynamic content.
  • Avoid server-side image maps in favor of client-side image maps.
  • Include redundant text links for server-side image maps.
  • Put row and column headers in data tables.
  • Associate all data cells with header cells.
  • Title all frames.
  • Never blur pictures to indicate unavailability.
  • When graphics contain useful information, also provide the information in text.
  • Refer users to alternate ways to get non-text information they encounter.
  • Do not shrink down a picture of an actual page on your site and use it as a graphic (or button) on another page.
  • Always choose crisp and clear images.
  • Make it easy for users to skip any multimedia and Flash demos.
  • Avoid creating a text-only version of your site.

 

Back to top

Quick Tips for Building an Accessible Website

  • Provide a skip link at the top of the page. Link to the main content area of the page so users can skip the menu and go straight to the content.
  • Use ALT attributes on all images. If an image is a decorative element, use an empty ALT attribute. This allows screen readers to avoid annoying their users by reading decorative graphics that are not important.
  • Tab index your menu and form elements. If you have a menu on the bottom of the page, it is okay to leave out the tab index since the tabbing will naturally flow from the last tab index to the bottom menu. This helps with text-only browsers and people using keyboards to access your site.
  • Add the TITLE attribute to all links so screen readers can provide this information to blind users. The title is simply a description of what the link is for.
  • Add the SUMMARY attribute to TABLE tags for tables with user content. The summary should be a brief description of the table content. If you are using nested tables, include the descriptive summary attribute on the outermost table or the innermost table, and include empty summary attributes on the other tables.
  • For images such as photos that need more explanation than you can provide with the ALT attribute, use the LONGDESC attribute.
  • If you use audio of any kind, give an explanation of the content, and where appropriate, provide a written transcript for that audio, with a hyperlink leading to it. For example, if you have a audio file that contains a CEO's speech, always have a transcript of that speech available for users who can't access the sound or who are otherwise unable to hear it.
  • Use the TBODY tag in tables that contain multiple row groups of data, such as comparison charts. Properly used, this causes screen readers to render the table as it appears on the page, from right to left (horizontally) rather than vertically.
  • If you use the software program FireWorks (or similar), or you code your own JavaScript rollovers, remember that you need to 'double code' each rollover with the "onBlur" and "onFocus" equivalents to the "onMouseOver" and "onMouseOut" tags. This allows keyboard users to see the rollovers just as a mouse user would. This is not absolutely necessary, but it is part of W3C guidelines.
  • Add a NOSCRIPT tag to pages containing client-side scripts such as JavaScript. In this tag, explain that the page contains scripts that require JavaScript to be enabled. Also, if it isn't simply a visual enhancement, such as a rollover script, or if the page cannot be used without JavaScript enabled, provide a link to a non-script version of the page.
  • Add the following script similar to this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> to the first line of your web page. Of course, be sure to modify this line to fit the language you are using (HTML 3.0 etc.) and EN for English or a different code for another language. If you run your page in Bobby, this error will come up if you don't have a tag similar to the above.
  • Avoid using FORM elements for navigational purposes. Form elements are not very accessible, so use forms sparingly and only for what you absolutely have to use a form for. Tab index your form elements in relation to the other tab indexes in the page. That is, if you index tabs from 1-10 on the side and there is only a form on the page, the form index would begin at 11 onward. Use the LABEL tag for form element names, e.g., First Name, Last Name, etc.
  • Do not use the BLINK attribute, flashing text, or any element or graphic that flashes or blinks at the user, and try to avoid animated graphics. If you want to use an element that does flash or blink, or an animated graphic, always provide users with a choice to see it or not. Do not force it on them without notice. The best method is to load a stationary image, with no movement, flashing, or blinking, and provide a link to 'Start Animation' if the user wishes. Flashing or blinking can cause seizures in certain susceptible users, and any movement or animation may be extremely distracting to users with learning or cognitive disorders. Note: There aren't a lot of users with seizures triggered by flashing, and the range of potentially hazardous flash speeds is narrow, but even one person having a seizure is one TOO MANY! Distraction is actually the bigger problem, albeit less dramatic.
  • If you have significant questions about accessibility, create a text-only version of your site with a minimum use of tables and graphics. This will ensure that users who might have a problem with your graphic site can access the same content via the text-only version.
  • Keep in mind the color scheme you use. Colorblind people have problems with certain colors and if your color scheme contains foreground colors and background colors that make it impossible for a colorblind person to read the text, then you need to change the scheme.
  • If you use Flash, provide a transcript of the Flash animation or an alternative version of the page that contains Flash. Flash MX promises new accessibility features, but Flash is not accessible and time will tell if the new version of Flash is more accessible.
  • If you use video of any kind, apply the same rules as for audio. Provide transcripts and detailed information of any images you wish the user to envision.
  • Do not use automatic popup windows. These are not accessible and wreak havoc with screen readers and those using keyboard navigation.
  • If you use rotating ad banners, be sure they have ALT attributes and link TITLE attributes so users can understand what the ad is and where the link on the ad banner goes.
  • Finally, when you do create your web site, test as you go to catch major errors before they propagate throughout your site design. Do this in small steps at first, testing the templates, then testing pages with content. Once you feel comfortable that you have caught the major accessibility items, it is then safe to continue to the end of the project and test it when it is done.

If you are scripting a site-using ASP, JSP, or PHP or other server side language, you can still use these basic tips to make scripted pages render properly. For example, while creating a dynamic table in ASP, simply create a variable called $tableDesc. This holds the table's dynamically generated summary attribute. It might look like this:

Response.write("<TABLE width =600 align = left summary='$tableDesc'> <TBODY><TR>") $tableDesc

This would come out of the database and be a field in the database so individuals could add this attribute. It could be any field in the database that describes the content of the dynamically generated table.

Back to top

Questions to Improve Understanding

1. What attribute should be used for describing charts and diagrams textually?

  1. TITLE attribute
  2. LONGDESC attribute
  3. ALT attribute

 

Answer 1.

2. Suppose you are designing a form in which several fields are mandatory for successful completion. According to Section 508 guidelines, which of the following is permitted? (two correct answers)

  1. Mark the required fields with a red color and warn the user that "the fields marked in red are required".
  2. Put the word "required" in front of or after the field name.
  3. Mark each field with an asterisk and warn the user that "fields marked with an asterisk are required".

 

Answer 2.

3. Which of the following is a reason why client-side image maps are preferable to server-side image maps?

  1. Because in many instances we may not have access to a server in order to make a server-side image map usable.
  2. Because client-side image maps display better in a browser.
  3. Because redundant text links do not provide sufficient information about their targets.

 

Answer 3.

4. Which of these methods works best to associate data cells with header cells in a complex data table?

  1. Use the SCOPE attribute.
  2. Use the ID and HEADERS attributes.
  3. Use the TH and TD attributes.
  4. Data cells cannot be associated with header cells in a complex data table.

 

Answer 4.

5. Which of the following is true regarding the use of frames?

  1. The titles of frames should be meaningful and explain their purpose.
  2. The frames should be scrollable and resizable.
  3. Frames should not be used at all for better accessibility.

 

Answer 5.

Answer Key

Back to top

United States Patent and Trademark Office
This page is owned by Office of the Chief Communications Officer.
Last Modified: 09/02/2014 07:29:40