***1194.22 Web-based Intranet and Internet Information and
Applications***

***Overview***

This Section 508 subcategory 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 to other EIT products or systems, such as web-based
interfaces to digital copiers or telecommunications devices (wired,
analog and digital wireless, and Internet).

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

######### Remember That...

-   The more complex and graphic the web-site, 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 not a guarantee that
    the web document is compliant. When using testing tools, it is
    advisable to use at least two different tools to evaluate a web
    document.

-   The goal is to provide you with techniques that will result in a 75%
    level of confidence that the item tested is Section 508 compliant

-   All standards are equal in importance

## References for 1194.22

-   Guide to the Section 508 Standards for Electronic and Information
    Technology, Web-based Intranet and Internet Information and
    Applications (1194.22), Updated: June 21, 2001,
    <http://www.access-board.gov/sec508/guide/1194.22.htm#(a>)

-   The W3C WAI Web Content Accessibility Guidelines 1.0 Checkpoint 1.1
    provides further guidance and techniques for this requirement, at
    http://www.w3.org/TR/WCAG10/#tech-text-equivalent

-   The W3C WAI maintains a listing of various tool and services
    available for evaluation and repair of web pages for web content
    accessibility, at http://www.w3.org/WAI/ER/existingtools.html

-   An example web page illustrating typical violations of this
    provision can be found at
    http://projects.accessibilityforum.org/demos/Rule_a.htm

-   In the Microsoft Windows environment, some Web-based applications
    support Microsoft Active Accessibility
    (http://msdn.microsoft.com/library/) assistive technology products.

-   Some Web-based applications written in Java are compatible with the
    Java Access Bridge (http://java.sun.com/products/accessbridge/) for
    Windows. Assistive technology also using the Java Access Bridge can
    link to Windows applications.

-   If the Web-based application is, in fact, a set of markup content
    that is coded following accessible markup language
    (http://www.w3.org/TR/xag.html), assistive technology products will
    be able to deliver the information to their users.

## 

##  

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

###### *In other words...* 

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

###### *Terms* 

*Text equivalent* -- Written, descriptive equivalent of the content and
purpose of visual or audio information

*Non-text element* -- Any element that is not presented in
electronically readable text and that conveys meaning that is required
for comprehension of content or to facilitate navigation (e.g., an
image, image of text, graphic, audio clip, or other element)

*Alt* and *longdesc* -- Tags used in Hyper Text Markup Language (HTML)
to alternatively describe or provide a description of a non-text element

###### *Determine compliance* 

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

A quick method to check for compliance is to place the cursor on images
and see if 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
    an 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 if 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 tools are
    primarily designed to support accessibility and not to determine
    compliance

###### *Examples* 

+---------------------------------------+------------------------------+
| For images on a web application or    | ![](media/image1.png)        |
| page, equivalent alternative text     | {width="2.598611111111111in" |
| must be assigned to each image. If    | h                            |
| the image were a photograph of a      | eight="2.598611111111111in"} |
| person, then the person\'s name would |                              |
| be appropriate alternative text.      |                              |
|                                       |                              |
| \<IMG SRC=\"uspto.gif\" ALT=\"USPTO   |                              |
| Seal\"\>                              |                              |
+---------------------------------------+------------------------------+
| If the image is decorative, then      | ![](media/image2.png){       |
| assign the empty alternative text     | width="1.5729166666666667in" |
| like this.                            | he                           |
|                                       | ight="1.5729166666666667in"} |
| \<IMG SRC=\"placeholder.gif\"         |                              |
| ALT=\"\"\>                            |                              |
+---------------------------------------+------------------------------+
| If the image is animated, the         | ![](media/image3.gif){       |
| description must contain an           | width="1.3333333333333333in" |
| alternative equivalent, e.g.,         | he                           |
|                                       | ight="1.3333333333333333in"} |
| \<IMG SRC=\"win.gif\" ALT=\" animated |                              |
| image of a sculpture of the word      |                              |
| \'win\'\"\>                           |                              |
+---------------------------------------+------------------------------+

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

###### *In other words...* 

The timing of audio descriptions, captioning, 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.,
captioning provided for audio information, audio description of visual
information)

*Multimedia presentation* -- Any presentation of more than one type of
media, typically both audio and visual information.

###### *Determine compliance* 

If the multimedia presentation has equivalent alternatives it must be
synchronized with the presentation. 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:** See the 1194.24 Video and Multimedia section of this guide for
relevant laws.

## 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 conveyed is color independent.
The importance of information should be based on context (e.g.,
location) or markup (e.g., HTML heading levels).

###### *Determine compliance* 

Identify all cases where information is conveyed with color. If color is
used in page elements, those elements must also be designated by a
specific or unique non-color representation that makes it easy to
identify (e.g., important text in red should also be italicized, bold, a
different font face or size)

Quick methods to determine compliance for any actions or information

-   Print the page on a black and white printer or view on a monochrome
    monitor. Navigation and other information should still be
    discernable

```{=html}
<!-- -->
```
-   Are links distinguished by color alone? They should not be. A common
    practice of removing underlines for links creates this problem

-   See 1194.21(i) for related information

**Notes:**

-   Sometimes color combinations that are readable become unreadable
    when mapped to black-and-white in printing which could 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 40%
    of the total.

## 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 or accessible based on context 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).

###### *Determine 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 the web pages. The pages should still be readable with the
    style sheets turned off.

**Note:**

-   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 involve interoperability with
    assistive technology. 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.

###### *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 speech synthesizer, encounters
elements that are misused in this way, the results can be unintelligible
to the individual.

## 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* 

*Redundant text link* -- A link that points to the same location as the
active image region, or to another location that is equivalent to that
referenced by the active region.

*Active region* -- The coordinates or geometric shape defined in HTML
code that is linked in an image map.

*Server-side image map* -- A single image that links to multiple pages
whose link information resides on the server (e.g., on an image of the
world, by clicking on Mexico, the user will then be linked to more
information on Mexico).

###### *Determine compliance* 

Click on all the different parts of an image map

-   Each area should have a corresponding text link on the page

**Notes:**

-   The two methods to locate server-side image maps are:

    -   Presence of an ISMAP attribute in the \<IMG\> image element

    -   Presence of \<INPUT TYPE="image"\> within 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 on the image.

###### *Examples*

It is important to provide a list of equivalent text links for
server-side image maps. Be sure to include one text link for each
hotspot that can be activated on the map. Here is an example from IBM:

  -------------------------- --------------------------------------- -------------------
  In this image of a world   ![](media/image4.png){width="1.875in"   Austria \|
  map, each country could be height="1.0416666666666667in"}          Australia \| etc.
  a hotspot. To make the                                             Belgium \| Belize
  image accessible, list                                             \| etc.\
  each of the countries as                                           USA \| etc.
  hypertext links.                                                   

  -------------------------- --------------------------------------- -------------------

\<a href=\"cgi-bin/countries/database\"\>\
\<img src=\"worldmap.gif\" alt=\"World Map\" ISMAP\>\</a\>\
\<br\>\
\<a href=\"austria.html\"\>Austria\</a\>\|\<a
href=\"australia.html\"\>Australia\</a\>\|etc. 

As an alternative to an inline list of equivalent text links, provide a
hypertext link next to the map.

  -------------------------- --------------------------------------- -------------------
  In this example, \"Choose  ![](media/image4.png){width="1.875in"   Choose a Country
  a Country\" is a link that height="1.0416666666666667in"}          
  accesses a list of                                                 
  countries on a separate                                            
  page. It is important that                                         
  equivalent links be as                                             
  convenient for the                                                 
  individuals as the                                                 
  server-side map.                                                   

  -------------------------- --------------------------------------- -------------------

\<a href=\"cgi-bin/countries/database\"\>\
\<img src=\"worldmap.gif\" alt=\"World Map\" ISMAP\>\</a\>\
\<Br\>\
\<a href=\"countrylist.html\"\>Choose a Country\</a\> Source IBM

## 1194.22 (f) 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.

###### *In other words...* 

Use client-side image maps unless the HTML regions for client-side image
maps cannot define a linked area for an image.

###### *Terms* 

*Client-side image map* -- When a user activates a region of a
client-side image map with a mouse, the user's web browser interprets
the pixel coordinates. The browser selects a link that was specified for
the activated region and follows it.

*Server-side image map* -- When a user activates a region of a
server-side image map with a mouse, the pixel coordinates of the click
are sent to the server specified by the HREF attribute of the \<A\>
element. The server interprets the coordinates and performs some action.

*Active region* -- The coordinates or geometric shape defined in HTML
code that is linked in an image map.

###### *Determine compliance* 

Identify all server-side image maps by looking for ISMAP attributes in
\<IMG\> tags in the HTML code.

-   Ignore \<IMG\> tags with USEMAP attributes, which are used in
    client-side image maps.

-   For each server-side image map, ensure that it cannot be represented
    by client-side image map.

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

###### *In other words...*

Informational headers must be provided in tables used for information
(as opposed to tables used for design or layout, which should avoid such
markup).

###### *Determine compliance*

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

-   Column headers: the first data row of the table is composed of
    \<th\> elements instead of \<td\> elements.

-   Row headers: the first cell of each data row is a \<th\> element
    instead of a \<td\> element.

-   Using AT, the row and column headers are identified in each cell of
    the data table.

**Notes**

-   There are software solutions 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

-   Please see this document's review of web compliance testing software
    in the Evaluation Tools section

-   Using the \"scope\" attribute is one of the most effective ways of
    making HTML compliant with these requirements. It is also the
    simplest method to implement. The scope attribute also works with
    some (but not all) assistive technology in tables that use
    \"colspan\" or \"rowspan\" attributes in table header or data cells.
    The first row of each table should include column headings.
    Typically, these column headings are inserted in \<TH\> tags,
    although \<TD\> tags can also be used.

###### *Example*

Below is an image of an HTML web site and the HTML source with correct
row/column header definitions:

  ----------------------------------- -----------------------------------
  Caption for the Table               

  Column 1, Row 1 header              Column 2, Row 1 header

  Column 1, Row 2 header              Column 2, Row 2 content
  ----------------------------------- -----------------------------------

\<table summary=\"Summary of the table's contents\"\>

\<caption\>

Caption for the Table

\</caption\>

\<tr\>

\<th scope=\"col\"\>Column 1, Row 1 header\</th\>

\<th scope=\"col\"\>Column 2, Row 1 header\</th\>

\</tr\>

\<tr\>

\<th scope=\"row\"\>Column 1, Row 2 header\</th\>

\<td\>Column 2, Row 2 Content\</td\>

\</tr\>

\</table\>

## ![](media/image5.png){width="9.3125in" height="0.7381944444444445in"}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...* 

Use HTML to associate data cells with headers in data tables consisting
of two or more logical levels of row or column headers. From any cells
in a data table, the user should be able to identify the appropriate
header to explain the significance of the data.

###### *Determine compliance* 

Two ways of determining compliance for this standard are review of HTML
source or the use of AT to evaluate a page. Review all data tables that
have more than two columns and/or rows to explain content.

-   *From any cells in a data table, the user can identify the
    appropriate header to explain the significance of that cell*.

```{=html}
<!-- -->
```
-   *In the HTML code, look for various combinations of the \<thead\>,
    \<col\>, \<colgroup\>, and \<th\> elements, and "axis", "id",
    "scope", and "headers" attributes.*

**Notes:**

-   Tables that are used strictly for layout should avoid this markup

-   The use of AT as an evaluation tool is limited because AT software
    was primarily designed to support accessibility and not to determine
    Section 508 compliance

-   See 1194.22(g) for related information

## 1194.22 (i) Frames shall be titled with text that facilitates frame identification and navigation.

###### *In other words...* 

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

###### *Term*

*Frames* -- HTML documents that consist of multiple web pages that are
displayed in panes in one browser window.

###### *Determine compliance* 

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

-   The frame is clearly identified through the "title" attribute of the
    \<FRAME\> or \<IFRAME\> element (e.g., \<FRAME SRC=\"nav.html\"
    TITLE=\"Navigational Links\"\>)

-   The frame is clearly identified by including text within the body of
    each frame that clearly identifies which frame the user is in

**Note:** When including text within the body of a frame for
identification, the text should be at the beginning of the frame
contents to facilitate quick identification of the frame contents beyond
the title attribute.

## 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 pages to avoid causing the screen to flicker with a frequency
greater than 2 Hz and lower than 55 Hz.

###### *Terms* 

*Hertz (Hz)* -- The international unit of frequency, equal to one cycle
per second.

*Flicker* -- An unintentional and undesirable cyclic variation in
display of a screen image. Also referred to as flashing or blinking.

###### *Determine compliance* 

It is best to not have any flashing or blinking functions on web pages
(e.g., avoid images or media that flashes messages across the screen to
get the users attention).

Special tools are required to accurately measure screen flicker
frequency that might be caused by web pages. An effective method for
finding flashing or blinking functions is to visually review the web
pages:

-   Check the user manual for flashing/blinking 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 if the flicker is greater than 2 Hz. The
    screen flashing/blinking should not be faster than a one second
    interval. If you do not have a timing device, the most simplistic
    way to determine a one second interval is to count "one thousand
    one", which is fairly close to one second.

**Notes:**

####### Because 2 Hz is relatively slow, webmasters are currently using visual observation to determine if flicker is greater than 2 Hz.

-   If there are multiple items that are flashing simultaneously in the
    same visual space, the cumulative effect should be considered.

-   Remember processor speed and graphic cards can affect flash rate so
    it is best to measure flashing/blinking rate on all the pertinent
    products.

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

###### *Determine compliance* 

Identify all cases where an equivalent text-only page is required.

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

**Note:** 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*

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

## 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
create interface elements the information provided from 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 --* Any component of a web user interface intended to
allow the user to access information or to perform an action (e.g.,
menus, tabs, radio buttons, text fields, etc.)

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

###### *Determine compliance*

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

-   The \<SCRIPT\> element

-   Event handler attributes (i.e. attributes whose name begins with
    \"on\" (e.g., \"onMouseOver\"))

-   JavaScript URLs (i.e., HREF attributes that use the javascript
    protocol (e.g., \<A HREF=\"javascript:doSomething()\"\>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 scripts that are used to change an image\'s
    state when a user moves a mouse over it are an accessibility problem
    if:

    -   text or other meaningful information is conveyed in the
        mouseOver image (e.g., the normal state is a blank button, but
        on mouseOver the button shows a title for the item or a
        recognizable logo)

    -   the item changes other content on the page (e.g., mousing over
        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

-   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\>)), people
    with JavaScript turned off won\'t be able to submit the form.

-   Dynamic HTML code

-   Redirecting or refreshing a web page

-   Popup windows (\<A
    HREF=\"javascript:window.open(\'foo\')\"\>text\</a\>) and window
    focus changes (\<A
    HREF=\"javascript:window.parent.frames\[1\].focus()\"\>other
    text\</a\>) confuses users of screen readers by changing the focus
    on their windows without permission.

-   Dynamic content generation

-   The use of AT as a measurement method is limited by the adequacy of
    algorithms and heuristic methods of the specific AT tool used. It
    can be used to identify problems with specific AT-E&IT
    interoperability but it cannot predict results with other AT or with
    other versions of the same AT, OS, application or accessibility
    architecture. AT should include the full range e.g. 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.

###### *Example* 

JavaScript mouseovers used for visual effects, such as highlighting that
does not change content or is the only means of color coding (see
1194.22 (i)), are not an issue for accessibility for the visually
impaired and might improve usability for the learning impaired.

## 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 of a user's browser
(e.g., an applet or plug-in) to view content, the application must be
compliant with Software Applications and Operating System standards
1194.21(a) to (l).

###### *Terms*

*Applet* -- An applet is a program that executes inside a web page's
content.

*Plug-in* -- A plug-in is a program that executes and works with a
user's web browser, and that is not part of content. Users generally
choose to include or exclude plug-ins from their user agent. Note these
add-on programs or \"plug-ins\" can be downloaded and installed on the
user\'s computer that makes it possible for their web browsers to
display or play the content of the files with proprietary formats when
these file(s) is (are) included as a part of the web page.

###### *Determine 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 1194.21 or otherwise verify that the plug-in
    actually conforms to §1194.21(a) through (l).

**Note:** Other common plug-ins and applications used may include MSWord
(.DOC), Excel (.XLS), PowerPoint (.PPT), and Adobe PDF or Macromedia
Shockwave and Flash files.

## 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 assistive
technologies. This includes the fields in the form, all information
required to complete the form, and any functions used to submit the
form.

###### *Term*

*Field element* -- a user interface element that appears within an
electronic form field.

###### *Determine compliance*

Inspect web page 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 label to entry area and be able to enter and
    verify text entered.

-   For buttons (like reset, submit): be able to determine their purpose
    and activate them.

-   For forms embedded in data tables: be able to associate the column
    header and row header with a text entry cell in the form.

-   For instructions, be able to navigate/access the instructions
    relevant to the part of the form being filled and return to that
    part.

**Notes:**

-   Some design features of an electronic form generally facilitate
    access to assistive technology, such as the relationship between
    control labels and controls or the sequence/ordering of form fields
    and directions or cues. Look for the attribute named "tabindex" --
    if used, the sequence of this attribute should be the same as the
    optimal sequence for a user moving through the form. Note that some
    browsers cannot tabindex.

-   Labels should be associated with input fields in the HTML using the
    explicit \<LABEL\> tag - this association is what is required by
    assistive technology. If this is done, the placement of the label
    for display on the page is not relevant for assistive technology.

-   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
    algorithms and heuristic methods of the specific AT tool used. It
    can be used to identify problems with specific AT-E&IT
    interoperability but it cannot predict results with other AT or with
    other versions of the same AT, OS, application or accessibility
    architecture. AT should include the full range e.g. screen readers,
    screen magnifiers, alternate input devices, etc.

-   Satisfying this requirement supports interoperability with assistive
    technology such as screen readers or screen magnifiers.

```{=html}
<!-- -->
```
-   *When using AT, the screen reader receives all information in the
    correct order*

###### *Example* 

The text input fields are programmed and associated with the
corresponding label using the LABEL element. The "for attribute" is used
to associate the label with the control. The value of the "for
attribute" must be the same as the value of the "id attribute" of the
associated control.

\<form\>

\<p\>\<label for=\"City\"\>City\</label\>\<br\>

\<input type=\"text\" name=\"City\" size=\"20\" id=\"City\"\>\<br\>

\<label for=\"State\"\>State\<br\>\</label\>

\<input type=\"text\" name=\"State\" size=\"20\" id=\"State\"\>\<br\>

\<input type=\"submit\" value=\"Submit\" name=\"Submit\"\>

\<input type=\"reset\" value=\"Reset\" name=\"Submit\"\>\</p\>

\</form\>

Top of Form

> City\
> ![](media/image6.wmf)\
> State\
> ![](media/image7.wmf)\
> ![](media/image8.wmf)![](media/image9.wmf)

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

###### *Term*

*Repetitive navigation links* -- a set of routine navigation links that
appear on the top, side(s), or bottom of a web page.

###### *Determine 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 among the interface.

-   If a page has repetitive navigation links, there is an adequately
    identified mechanism in the HTML code to skip past the page's
    non-content

-   The link to skip should appear before the repetitive navigation
    links

**Notes:**

-   Where to skip to is not specified. Appropriate locations are: to the
    beginning of the following block of links, or to the top of the
    content new to that page.

-   Jumping straight to the beginning of the content may prevent the
    user from seeing additional links that are not repetitive.

-   Navigation links are sometimes hidden because it is thought that
    only screen reader users need them. People that access web content
    only using the keyboard can benefit from skipping such links.

-   When frames are used, grouping all the navigation links within a
    single frame may be an approach. Provided that the frame containing
    the links is properly identified as required by 1194.22 (i), and the
    frameset is static.

###### *Example* 

The alternative text for the image is "skip to main content." This is
displayed in graphical browsers when the indivdual moves the mouse over
the image.

\<a href=\"#navskip\"\>\<img src=\"blank.gif\" alt=\"skip navigation
links\"\>\</a\>\
\<a name=\"navskip\"\>\</a\>\<h1\>The main content\</h1\>

***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 sufficient time to indicate if they need
more time to respond.

**Note:** Assume that informed humans can reasonably and consistently
judge the amount of time that is sufficient for a user to indicate that
more time is required.

###### *Determine compliance*

For each product or function that requires a response:

-   If a response is required 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

-   A user should be able to extend the response time to allow
    sufficient time for the user to complete the function by indicating
    such

**Notes:**

-   If there is not a response time required, this standard is not
    applicable.

-   Although not required, it is good programming practice to include a
    method that when time has run out, the product or/function that must
    automatically reset does not lose any user input or key presses that
    they have already entered

    -   This is called 'non-destructive time outs'. It is defined as
        where the entrance or additional cues are repeated but the user
        is not thrown out, their input is not erased, and they are
        returned to the point in the program where they were when the
        time ran out.

## General Rules for Compliant Web Pages

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

-   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

-   Include redundant text links for server-side image maps

-   Use client-side image maps when possible

-   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, be sure to provide the
    information in text

-   Always 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

-   Be sure to make it easy for users to skip any multimedia and Flash
    demos

-   Avoid creating a text-only version of your site

***Quick Tips for Building an Accessible Website***

+-----------------------------------------------------------------------+
| Skip link at top of page (use 1x1 pixel transparent gif and link to   |
| your main content area of the page so individuals can skip the menu   |
| and go straight to the content. This is hidden to regular users but a |
| screen reader or text only browser will display it)                   |
+-----------------------------------------------------------------------+
| Always remember to use ALT tags on all images. If your image is a     |
| decorative element, make sure to use an empty ALT tag. The reason you |
| use an empty tag is so that screen readers do not constantly annoy    |
| their users by reading decorative graphics that are not important.    |
+-----------------------------------------------------------------------+
| Always 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 individuals. The title is simply a          |
| description of what the link is for.                                  |
+-----------------------------------------------------------------------+
| Always add the "Summary" attribute to table tags for tables that      |
| contain user content. This is also done for screen reader users. It   |
| is a brief description of what the table content contains. If you are |
| using nested tables put the Summary Attribute on the outermost table  |
| or the inner most table and simply put an empty summary attribute on  |
| the other tables. This makes it less confusing.                       |
+-----------------------------------------------------------------------+
| For images such as photos that need more explanation than you can     |
| provide with the ALT tag, use the LONG DESC tag.                      |
+-----------------------------------------------------------------------+
| If you use audio of any kind, always 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 individuals who can\'t access the sound or  |
| who are otherwise unable to hear it.                                  |
+-----------------------------------------------------------------------+
| Use the \'TBODY\' Tag around tables that contain multiple columns of  |
| data, such as comparison charts. Properly used, this causes the table |
| to be rendered as it appears on the page, from right to left          |
| (horizontally), instead of each cell being rendered one on top of the |
| other (vertically), which does not make sense when read.              |
+-----------------------------------------------------------------------+
| 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.                                                           |
+-----------------------------------------------------------------------+
| Always add a \<NOSCRIPT\> tag to pages containing client side scripts |
| such as JavaScript. In this tag, explain that the page contains       |
| scripts that require that JavaScript 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.                                       |
+-----------------------------------------------------------------------+
| Always 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 i.e. 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. |
+-----------------------------------------------------------------------+
| Shy away from the use of 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. Always tab index |
| your form elements in relation to the other tab indexes in the page.  |
| That is to say, if you menu 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 i.e. First Name, Last    |
| Name, etc.                                                            |
+-----------------------------------------------------------------------+
| Do not use the \'Blink\' attribute, Flashing Text, or any element or  |
| graphic that flashes or blinks at the individual, and try to avoid    |
| animated graphics. If you want to use an element that does flash or   |
| blink, or an animated graphic, always provide individuals 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 speed of the flashing 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 questions about accessibility, always create a text-only  |
| version of your site with a minimum use of tables and graphics. This  |
| will ensure that individuals who might have a problem with your       |
| graphic site can always 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, always 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 that for Audio. |
| Provide transcripts and detailed information of any images you wish   |
| the individual to be able to see mentally.                            |
+-----------------------------------------------------------------------+
| Do not use 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 tags and link   |
| title attributes so individuals can understand what the ad is and     |
| where the link on the ad banner goes.                                 |
+-----------------------------------------------------------------------+
| Finally, when you do create your web site, always 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 as discussed   |
| earlier, and then pages with content. Once you feel comfortable that  |
| you have caught most major accessibility items, it is then safe to    |
| continue to the end of the project and then 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, in ASP if create 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. Of course, it could be any      |
| field in the database that describes the content of the dynamically   |
| generated table.                                                      |
+-----------------------------------------------------------------------+