How to Identify Section 508 Errors in HTML

U.S. Department of Health & Human Services

Section 508 Guide

January 2016

Contents

• Purpose
• Introduction
• Tools
  • How to Use a Tool to Evaluate HTML
• Evaluating Images
  • Simple Images
  • Complex Images
• Evaluating Multimedia
  • Sound Files
  • Videos
• Evaluating Color
  • Conveying Information with Color
  • Color Contrast for Text
• Evaluating Keyboard Navigation
  • Visual Focus
  • Interactive Content
• Evaluating Tables
  • Data Tables
  • Layout Tables
• Evaluating Forms
  • Form fields
• Evaluating Other Common Elements
  • Repetitive Navigation
  • Frames
  • Plugins
  • Content Order
  • Time Restrictions
  • Flicker
• Evaluating with Assistive Technology
  • NVDA
• Future Considerations
  • Links
  • Language
  • Page Titles
• Additional Resources
  • HHS
  • Official Standards
  • Other US Government
  • Other Dependable Resources
• Appendix
  • Subpart B — Technical Standards
  • Subpart C — Functional Performance Criteria

Purpose

The purpose of this document is to guide developers and reviewers in analyzing the accessibility of a web site or page based on the current 508 standards.

Introduction

Section 508 standards aim to ensure web content is accessible to all users, regardless of disability. These standards are required to be implemented on any publicly available electronic content including documents, applications, and web sites produced by HHS or with HHS funding.

It should be noted that standards are set to be refreshed to include Web Content Accessibility Guidelines (WCAG 2.0) by reference in the near future so it is strongly encouraged that developers and reviewers research on their own and prepare web content to meet those guidelines. As such, references to WCAG 2.0 have been included throughout the document to give a sense of how these accessibility issues will be mapped in the future.

This guide aims to help web site designers and developers as well as those tasked with reviewing web sites to ensure 508 compliance.

Notes:

• Most common issues are given as examples. For a full list go to http://www.hhs.gov/web/section-508/making-files-accessible/html-required/index.html
• Common accessibility issues that do not trace back to 508 standards are not included, but a full list of enhancement issues can be found at http://www.hhs.gov/web/section-508/making-files-accessible/html-encouraged/index.html
• A high level checklist can be found at http://www.hhs.gov/web/section-508/making-files-accessible/checklist/html/index.html

Tools

The following table shows the tools most commonly used during testing at ASPA/DCD.

How to Use a Tool to Evaluate HTML

Tools included above are used specifically to fit into a process that identifies the greatest number of issues in the least amount of time. Though the above tools are not mandated for use, the following types of tools and natural progression are encouraged:

1. Use a site-wide scanning tool to find specific accessibility issues, problematic areas of the website (clustering of issues for pages), and aid in selecting a solid representative sample.
2. Use a single page checking tool to find additional issues in the representative sample and supplement with manual analysis of the results along with additional manual checks.
3. Use regulation-specific tools to aid in evaluation of content appropriate to that regulation.
4. Use manual inspection with assistive technology to navigate the web site and elements that would appear to be problematic to Assistive Technology (AT).
5. Use manual evaluation to supplement and confirm ALL results from automated tools.

In addition, the tools above were chosen to best evaluate current 508 regulations. Additional tools may be needed to aid in the evaluation of new regulations as mandated by the Access Board’s WCAG 2.0 508 refresh when it goes into effect.

Tools are used in our testing process to aid in the evaluation of the current and future 508 standards for Information and Communications Technology (ICT) and to increase efficiency. However, they are in no way a replacement for the knowledge necessary to manually evaluate the results of automated checks within the tools, nor is there a single or set of tools that alleviates the need to manually evaluate and use human judgment to ascertain the accessibility of a website or piece of content.

A good place to practice using these tools is the W3 Before and After Demo, which provides examples of web pages that have accessibility issues, as well as mirrored pages that have the issues fixed.

Evaluating Images

Simple Images

When images are used on web pages, they must convey the same information to an assistive technology user as they do to a visual user. This is typically done through alternative text, or alt text.

Steps to check:

1. Open the web page
2. Inspect the code of each image
3. Ensure that an alt attribute is present
4. Determine whether the image is decorative or if it conveys information
5. For decorative images, ensure the alt attribute is empty (alt=””)
6. For informational images, ensure the alt attribute contains text that captures all information a sighted user would gain
7. For linked images, ensure the alt attribute gives the user an idea of where the link leads.

Common Issues

1. Image is missing an alt attribute

   Screenshot of a promotional web image announcing a “Holiday Food Safety Twitter Chat” on December 9, 2015, 2-3 pm EST, illustrated with a snowy scene of a gingerbread house and decorated tree. The image conveys the event information visually but its code, shown below, contains no alt attribute.

   <img style="float: right; typeof="foaf:Image" src="default/files/holiday-party-promo.jpg">

2. Alt text is incorrect/insufficient

   Screenshot of a National Suicide Prevention Lifeline graphic that displays the phone number 1-800-273-TALK (8255) and the website suicidepreventionlifeline.org. An evaluation tool flag shows the alt text is only “Suicide Prevention Lifeline phone number”, which does not give the actual number shown in the image.

   <img style="-webkit-user-select: none" alt = "Suicide Prevention Lifeline phone number"
   src=" /Pictures/SPL.png">

3. Decorative image has alt text

   Screenshot of the MMWR site banner. A red arrow points to a small decorative blue curve graphic at the banner’s edge; an evaluation tool flag shows it has the alt text “Blue curve” even though it conveys no information. The MMWR logo in the same banner is flagged with alt text “MMWR”.

   <img src="../../images/blue_curve.gif" alt="Blue curve" border="0" width="10" height="60" />

Correct Examples

Alt attribute is present and the alt text captures the same information gained by a sighted user:

Screenshot of a web page item showing a photo of a boy holding a sign that reads “Learn the History Behind Bullying Prevention Month”, next to a paragraph about schools, communities, organizations, and individuals releasing new resources for bullying prevention. An evaluation tool flag shows the image’s alt text is “Learn the History Behind Bullying Prevention Month.”, matching the information in the photo.

<img alt="Learn the History Behind Bullying Prevention
Month." src="/sites/default/files/pacers.jpg">

A linked image has alt text that lets the user know the destination:

Screenshot of a “Connect With Us” site footer area containing a Facebook icon link. An evaluation tool flag shows the icon’s alt text is “Visit the HHS Facebook account”.

<a href="http://www.facebook.com/HHS" target="_self"><img
src="/sites/all/themes/project_h/css/images/footer-fb.png" alt="Visit the HHS
Facebook account"> </a>

Notes

• Automated tools can aid in the inspection as they can flag any images missing alt attributes and reveal the alt text of an image without code inspection. However, the accuracy of the alt text must be manually determined
• If a linked image has an empty alt attribute, but is in the same anchor tag with appropriate link text, then it is compliant. See http://www.w3.org/TR/WCAG20-TECHS/H2.html (This method may still throw an error in automated checkers, but those can be ignored if properly implemented)
• This maps to 1194.22(a) - A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).
• Additional Resources:
  • http://webaim.org/techniques/alttext/
  • http://www.w3.org/WAI/tutorials/images/
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html

Complex Images

Alt text is meant to be brief, so when a complex image is used that requires a lot of description to convey the full information gained by a visual user, an alternate method must be used. This can come in the form of providing the information in the surrounding text, or linking to a page that contains an alternate text only description.

Steps to check:

1. Open the web page
2. Inspect the code of each complex image
3. Ensure that an alt attribute is present
4. Ensure a brief description is included
5. Inspect the surrounding text
6. Ensure the surrounding text fully captures all information conveyed in the image, or;
7. Ensure there is a link that indicates there is an alternate version of the image
8. Follow the link and ensure the alternate version fully captures all information conveyed in the image

Common Issues

1. Complex image lacks detailed descriptions
2. Alternate version of original content is not equivalent

Correct Example

An infographic on second hand smoke requires a good amount of text to fully capture the information. The alt text of the image is “Infographic showing how secondhand smoke is toxic. For a text-version of the information displayed on the infographic, use the link after the image.” The image is immediately followed by a link to a text only version of the image.

Screenshot of a web page displaying a CDC infographic titled “Secondhand Smoke is toxic”. The infographic uses a circular arrangement of icons grouped under the headings Cancer Causing Chemicals, Toxic Metals, and Poison Gases, with statements that secondhand smoke has more than 4,000 chemicals, that many of these chemicals are toxic and cause cancer, and that you breathe in these chemicals when you are around someone who is smoking. Directly beneath the infographic is a link labeled “Infographic text-only version.”

http://betobaccofree.hhs.gov/health-effects/secondhand-smoke/

http://betobaccofree.hhs.gov/health-effects/secondhand-smoke/infographic-text.html

Notes

• Automated tools can aid in the inspection as they can flag any images missing alt attributes and reveal the alt text of an image without code inspection. However, the accuracy of the alt text and need for an alternate version of a complex image must be manually determined
• When determining whether the image is “complex”, there is no official limit on the alt text field, however best practices recommend limits ranging from 120-250 characters
• This maps to 1194.22(a) - A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).
• There are special provisions for image maps. Because they are not prevalent, see the following resource for proper implementation and the difference between client and server side image maps http://webaim.org/techniques/alttext/#imagemaps, http://www.w3.org/WAI/tutorials/images/imagemap/
• Image maps map to 1194.22(e) - Redundant text links shall be provided for each active region of a server-side image map and;
• 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.
• Additional Resources:
  • http://www.w3.org/WAI/tutorials/images/complex/
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html
  • http://webaim.org/techniques/alttext/#advanced

Evaluating Multimedia

Sound Files

Sound files must include text transcripts so that those who cannot hear can access the information.

Steps to check:

1. Open the Web Page
2. Inspect the surrounding text of a sound file for a transcript on the page or a link to a transcript
3. Play the sound file
4. Compare the transcript to the sound file

Common Issues

1. Audio file lacks a transcript
2. The transcript does not fully capture the information in the audio file

Correct Example

An audio file is accompanied by a link to a PDF containing an equivalent transcript

Two side-by-side browser screenshots. The first shows an FDA “2015 Media Transcripts” page listing audio files with accompanying transcript links, for example “October 6, 2015 [PDF - 58.92 KB] Audio [4 MB]” and “September 15, 2015 [PDF - 58.92 KB] Audio [6 MB]”. The second shows the opened PDF transcript titled “FDA Media Briefing of the Fresh Empire Campaign Launch, October 06, 2015, 10:30 am ET”, with the spoken remarks of the Coordinator and Tara Goodin written out speaker by speaker.

Notes

• This requires manual inspection and will not typically be flagged in any automated tools
• This maps to 1194.22(b) - Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation and;
• 1194.31(c) - At least one mode of operation and information retrieval that does not require user hearing shall be provided, or support for assistive technology used by people who are deaf or hard of hearing shall be provided.
• Additional Resources:
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html

Videos

There are two main considerations for reviewing videos. Content that can be missed by persons who cannot hear, and content that can be missed by persons who cannot see.

Steps to check:

1. Open the Web page
2. Play the video
3. Ensure there are captions (may need to toggle)
4. Ensure the captions are accurate (e.g. NOT auto generated)
5. Turn off the monitor or minimize the video window
6. Replay the video
7. Ensure the video is understandable and significant visual actions or sequences are understood
8. Ensure any informational text that was visible when first reviewing is announced
9. If there is a failure in step 6 or 7, check to see if there is another version of the video

Common Issues

1. Videos lack captioning or captioning is “auto generated”

   Screenshot of a video player’s Subtitles/CC menu with the options Off, English, English (auto-generated), and Auto-translate. The option “English (auto-generated)” is the one selected.

2. Captioning is inaccurate
3. Video requires audio description for visual text that is never narrated

Correct Example

1. Video is properly captioned

   Screenshot of a video of astronaut Scott Kelly speaking outdoors in front of a rocket, with accurate closed captions displayed on screen reading “up, I saw a lot of kids get bullied and I know you see it too because it’s pretty common;”. The player’s CC control is enabled.

2. Video has or has an alternate version with audio description

   Screenshot of an embedded video titled “Explore the Reimagined HHS.gov Website”. Directly beneath the video, a red arrow points to a link reading “Access this video with audio description on YouTube.”

   https://www.youtube.com/watch?v=9f7eHBU1YsY

Notes

• This requires manual inspection and will not typically be flagged in any automated tools
• This maps to:
  • 1194.22(b) - Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation;
  • 1194.24(c) All training and informational video and multimedia productions which support the agency’s mission, regardless of format, that contain speech or other audio information necessary for the comprehension of the content, shall be open or closed captioned and;
  • 1194.24(d) All training and informational video and multimedia productions which support the agency’s mission, regardless of format, that contain visual information necessary for the comprehension of the content, shall be audio described.
• Additional Resources:
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc-only.html
  • http://webaim.org/techniques/captions/

Evaluating Color

Conveying Information with Color

No information can be conveyed with color alone. There must be a non-color method available so that color blind users can access all information.

Steps to Check:

1. Open the web page
2. Identify any information that may be conveyed with color; for example, graphs and charts.
3. Analyze the content itself and surrounding content to see if the same information is conveyed without the use of color
4. For content where it is hard to tell, print in black and white and analyze the hard copy.

Common Issues

1. Distinctions Beyond Color-Only are Missing

   Example content reading “List of 5 mammals, heavy ones appear in red” followed by this bulleted list:

   • Cat
   • Elephant
   • Dog
   • Hamster
   • Whale

   In the example, the items Elephant and Whale are displayed in red text while the other items are black, so the heavy mammals are identified only by color.

2. Charts/Graphs rely on color only legend

   Stacked bar chart with five unnamed categories (1 through 5) on the horizontal axis and a vertical axis from 0 to 30. Each bar is divided into three colored segments identified only by a color-coded legend: Apples (blue), Oranges (orange), and Bananas (green). Approximate values read from the chart: Apples grow from 1 to 5 across categories 1 to 5; Oranges grow from about 4 to about 20; Bananas shrink from about 10 to about 3; the bar totals rise from 15 to about 28. Nothing but the segment colors relates the segments to the legend entries.

Correct Example

Pie chart uses visual labels in addition to a color only legend

Pie chart with three slices and a color-coded legend for Apples, Bananas, and Oranges. In addition to the legend, each slice carries its own text label directly on or beside it: Apples (the largest slice, slightly more than half), Oranges, and Bananas, so the information does not depend on color alone.

Notes

• This requires manual inspection and will not typically be flagged in automated tools
• The color method can remain as long as there is a non-color method
• An alternative to the print in black/white test is to take a screenshot of the content and run it through a simulator such as Coblis to verify that no information is missed by ANY colorblindness types
• Surrounding charts/graphs with text or data tables containing equivalent information is considered a non-color method.
• This maps to
  • 1194.21(i) - Color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element;
  • 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."
• Additional Resources:
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html
  • http://webaim.org/articles/visual/colorblind

Color Contrast for Text

With the exception of logos, all text must have sufficient color contrast so it is easily visible to all users. The preferred tool to measure the contrast is the Colour Contrast Analyser, which is a free tool that measures the contrast ratio between text and background. The minimum contrast ratio for text of any size at HHS is 4.5:1.

Steps to Check:

1. Open the Web page
2. Identify any color schemes with seemingly low color contrast
3. Use the Contrast tool to capture the color of the background adjacent to the text
4. Use the Contrast tool to capture the color of the text
5. Analyze the contrast ratio

Common Issues

1. Color Contrast is Insufficient

   Screenshot of a web page with the light teal text “Take the First Step” on a white background, beside the Colour Contrast Analyser window. The tool shows a foreground color of hex #079BB7 against a background of hex #FFFFFF, with a resulting luminosity contrast ratio of 3.29:1, below the required 4.5:1.

Correct Example

Contrast ratio of text against background is at or greater than 4.5:1

Screenshot of the same “Take the First Step” page text in a darker teal, beside the Colour Contrast Analyser window. The tool shows a foreground color of hex #036172 against a background of hex #FFFFFF; a red arrow points to the resulting luminosity contrast ratio of 7.1:1.

Notes

• This requires manual inspection and will not typically be flagged in automated tools

• HHS requires all text no matter what size to have a contrast ratio of 4.5:1 or greater. Therefore, the Pass/Fail values in the tool should be ignored.

  Screenshot of the Colour Contrast Analyser result panel for a contrast ratio of 3.29:1. Under “Text” it shows Fail (AA) and Fail (AAA); under “Large text” it shows Pass (AA) and Fail (AAA). These built-in pass/fail judgments differ from the HHS requirement.

• In cases where background or text color varies at different points (e.g. a gradient), use the lowest measurement as the contrast ratio value
• This maps only to WCAG 2.0 and is the only issue currently required by HHS that does not map directly to Section 508 standards
• Additional Resources:
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
  • http://webaim.org/articles/visual/lowvision#highcontrast

Evaluating Keyboard Navigation

Visual Focus

When tabbing through a web page with interactive elements such as menus and links, a visual indicator allows keyboard users to know which element currently has focus.

Steps to check:

1. Open the web page
2. Start at the top and repeatedly select the Tab key on the keyboard
3. Ensure that each interactive element that receives focus has a visual indicator of some kind

Common Issues

At least one interactive element lacks a visual indicator when it has keyboard focus in at least 1 major browser.

Correct Example

When an image link receives keyboard focus, there is a dotted box that surrounds it.

Screenshot comparing the same page region twice. Both show a paragraph reading “Each Regional Director ensures the Department maintains close contact with state, local, and tribal partners and addresses the needs of communities and individuals served through HHS programs and policies.” followed by a yellow “View Map” image link. In the second copy, a red arrow points to the View Map link, which is surrounded by a dotted focus outline because it has keyboard focus.

Notes

• This requires manual inspection and will not typically be flagged in any automated tools
• It is important to test this on multiple browsers as one browser could have an indicator when another does not
• This maps to 1194.21(c) - A well-defined on-screen indication of the current focus shall be provided that moves among interactive interface elements as the input focus changes. The focus shall be programmatically exposed so that assistive technology can track focus and focus changes.
• Additional resources:
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html

Interactive Content

Anything on the page that can be controlled by a mouse must be able to be controlled by the keyboard or have an equivalent alternative for the keyboard. This allows not just keyboard only users to correctly interact with the page but also those who rely on Assistive Technology that depend on keyboard equivalence.

Steps to check:

1. Open the web page
2. Use the mouse to interact with elements on the site (be sure to hover over elements to see if additional information is revealed)
3. Ensure simple keyboard commands (Tab, directional arrows, space, and Enter) can be used to perform the same actions / reveal the same information as the mouse
4. Ensure if special keys are required to interact with the content, it is communicated to the user

Common Issues

There is at least 1 element on the page that cannot be controlled by the keyboard (and can with a mouse) and has no accessible alternative. This can be experienced on: http://www.w3.org/WAI/demos/bad/before/news.html

Correct Example

All actions that can be performed with a mouse can also be performed with a keyboard. This can be experienced on:

http://www.w3.org/WAI/demos/bad/after/news.html

Notes

• This requires manual inspection and will not typically be flagged in any automated tools
• It is important to test this on multiple browsers
• This maps to
  • 1194.21(a) - When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually and;
  • 1194.31(f) - At least one mode of operation and information retrieval that does not require fine motor control or simultaneous actions and that is operable with limited reach and strength shall be provided
  • 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. (if javascript is the culprit)
• Additional Resources:
  • http://webaim.org/techniques/keyboard/
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html
  • http://webaim.org/techniques/keyboard/

Evaluating Tables

Data Tables

Data tables must be coded in such a way that assistive technology can relate the table header cells to the appropriate data cells. The more complex the table, the more complicated the coding will be to analyze.

Steps to check:

1. Open the Web Page
2. Inspect the page for data tables
3. Inspect the code of the data table
4. Ensure all header cells use the TH tag
5. If there is 1 set of column and 1 set of row header cells, ensure the appropriate scope attributes are correctly implemented on the TH cells
6. If there is more than 1 set of column and/or row header cells, ensure each TH cell has an ID attribute and is correctly related to the appropriate data cells

Common Issues

1. Tabular data does not use HTML table markup http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F34

2. Header cells are not marked as TH

   Screenshot of a rendered example table whose data is reproduced below. An evaluation tool icon indicates the table has a structure, but none of the header cells are marked as TH.

   Example table with column headers Founded, Employees, and Phone #, and the company names Acme Inc and 123 Medical as row group headers

   Founded	Employees	Phone #
   Acme Inc
   1947	2000	555-123-0000
   123 Medical
   1979	1150	555-410-0001

   <td id="fnd"> Founded </td>
   <td id="Emp"> Employees </td>
   …..

3. Table Header Cells are not Associated with Data Cells for a Table with Multiple Column and/or Row Headers

   Screenshot of the same Founded/Employees/Phone # example table overlaid with evaluation tool flags. The cells Founded, Employees, Phone #, Acme Inc, and 123 Medical each carry a “col th” flag showing they are marked as TH cells scoped to columns, but the data cells beneath them have no markup associating them with the multiple levels of headers.

Correct Example

1. The first row of a data table contains header cells that are all tagged as TH and scoped to the column (note the scope is not required in this instance because there are no row header cells):

   Screenshot of a data table in which every cell of the first row carries an evaluation tool “col th” flag. The table’s data is reproduced below.

   Investment in Research and Development (in Millions), For the Year Ended September 30, 2015

   Responsibility Segments	Basic	Applied	Developmental	2015 Total	2014	2013	2012	2011	Grand Total
   AHRQ	$-	$167	-	$167	$250	$372	$401	$333	$1,523
   CDC	73	391	26	490	394	457	408	457	2,206
   FDA	123	-	6	129	103	94	80	58	464
   NIH	16,856	11,237	-	28,093	27,719	29,328	30,681	32,902	148,723
   Other	3	23	-	26	3	1	2	7	39
   Totals	$17,055	$11,818	$32	$28,905	$28,469	$30,252	$31,572	$33,757	$152,955

   <table>
       <tr>
           <th scope="col"> <strong>Responsibility Segments</strong></th>
           <th scope="col"> <strong>Basic</strong></th>
           ………..

2. A data table contains a first row of header cells as well as sub-headers. Each header cell is tagged as TH and given an ID. Data cells are then related to the ID’s.

   Screenshot of the Founded/Employees/Phone # example table overlaid with evaluation tool flags showing full header association: the header cells carry the flags id="fnd", id="Emp", and id="phn"; the sub-header rows carry id="acme" (Acme Inc) and id="123" (123 Medical); and each data cell carries a headers flag pairing it with both applicable headers, for example headers="fnd acme" for 1947 and headers="Emp 123" for 1150.

   <table>
       <tr>
           <th id="fnd"> Founded </th>
           <th id="Emp"> Employees </th>
           …..
       </tr>
       <tr>
           <th colspan="3" id="acme"> Acme Inc </th>
       </tr>
       <tr>
           <td headers="fnd acme"> 1947 </td>
           <td headers="Emp acme"> 2000 </td>
           …..

Notes

• Automated tools can aid in the inspection as some show the presence of data table coding. However, manual inspection is required to ensure the correct cells are marked as TH and appropriately associated to data cells.
• This maps to 1194.22(g) - Row and column headers shall be identified for data tables and;
• 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.
• Additional Resources:
  • http://webaim.org/techniques/tables/data
  • http://www.w3.org/WAI/tutorials/tables/
  • http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H51
  • http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H63
  • http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H43

Layout Tables

Sometimes developers use HTML tables to layout information. Though CSS is the most accessible way to position content, layout tables are permitted as long as they are void of data table markup and do not alter the intended order of the content.

Steps to check:

1. Open the web page
2. Inspect the page for table structures
3. Analyze whether or not the content contained in the structure is a data table, if not:
4. Ensure the following tags are not used:
   1. Summary
   2. TH
   3. Scope
   4. ID
   5. Headers
5. Ensure the structure of the table does not alter the intended reading order

Common Issues

1. Layout table contains data table coding

   Screenshot of a three-column layout used for course listings, overlaid with evaluation tool “th” flags on each column heading. The columns read: “Learning Accessible HTML, Offered every thursday, Contact to register: Mark”; “Learning Accessible PDF, Offered the first monday of each month, Contact to register: Janet”; and “Learning Accessible Office, Offered on demand, Contact to register: Chris”. The flags show the layout table’s heading cells are coded as TH data table markup.

2. Layout table alters the intended order of the content

   <table>
       <tr>
           <tH> Learning Accessible HTML </TH>
           <tH> Learning Accessible PDF </TH>
           <tH> Learning Accessible Office </TH>
       </tr>
       <tr>
           <td> Offered every thursday </Td>
           <td> Offered the first monday of each month </Td>
           <td> Offered on demand </Td>
       </tr>
       <tr>
           <td> <b>Contact to register:</b> Mark </Td>
           …..

Correct Example

A series of links to videos uses the HTML table structure to layout the content, but is void from any data table markup and keeps the content in the intended visual order:

Screenshot of a two-row, three-column grid of cartoon webisode links, each cell holding a linked illustration with alt text, a linked bold title, and a short description:

• Webisode 1: KB’s First Day. Illustration alt text “A worried KB reading her new class schedule.” Description: “Being the new girl at school isn’t easy for KB.”
• Webisode 2: Milton’s Dreams. Illustration alt text “Milton tells his music teacher he is being bullied.” Description: “Milton is bullied because he loves to play the tuba.”
• Webisode 3: Josh North. Illustration alt text “Josh bumps into a girl at school.” Description: “Brick surprises Josh by complimenting him on a great race.”
• Webisode 4: Melanie’s Friends. Illustration alt text “Melanie hangs out with the bullying crowd.” Description: “Melanie finds it hard to be friends with someone who bullies others.”
• Webisode 5: KB’s Day. Illustration alt text “KB finds a bullying note on her locker.” Description: “KB doesn’t tell her mom about what is happening at school.”
• Webisode 6: Josh & Raven. Illustration alt text “Josh and Raven share a table for lunch.” Description: “When Brick bullies Milton, Josh remembers when he was bullied.”

<table>
<tr>
<td> <a href="/kids/webisodes/kbs-first-day.html"><img alt="A worried KB reading her new class
schedule." src="/images/webisodes/webisode-1-kb-first-day.jpg"></a><a href="/kids/webisodes/kbs-
first-day.html"><b>Webisode 1: KB’s First Day</b></a><p>Being the new girl at school isn’t easy for
KB.</p></td>
<td <a href="/kids/webisodes/miltons-dreams-are-dashed.html"><img alt="Milton tells his music
teacher he is being bullied." src="/images/webisodes/webisode-2-miltons-dreams-dashed.jpg"
……..

Notes

• Automated tools can aid in the inspection as some show the presence of a table structure and additional data table tags. However, manual inspection is required to determine whether the content is a data table or not, and to ensure the order of the content is intact
• This maps to 1194.22(g) - Row and column headers shall be identified for data tables.
• Additional Information:
  • http://www.w3.org/TR/WCAG20-TECHS/F49.html
  • http://www.w3.org/TR/WCAG20-TECHS/F46.html
  • http://webaim.org/techniques/tables/

Evaluating Forms

Form fields

Interactive forms such as text fields, checkboxes, radio buttons, etc., need to be coded in a special way that allows assistive technology users a way to interpret.

Steps to check:

1. Open the Web page
2. Run an automated check with a page based tool
3. Look for errors that have to do with forms
4. Click the visual label of each form
5. Ensure the form receives focus
6. View the HTML of the form
7. Ensure the form is correctly coded (There is a Label tag associated to an Input tag)

Common Issues

1. Forms are missing labels

   Screenshot of a “QUICKMENU” dropdown control marked with evaluation tool error icons indicating the form field has no associated label.

2. Forms are mislabeled (The for attribute of the label must match the id attribute of the form)

   <label for="news-search">Search News Releases</label>
   <input autocomplete="off" id="news" maxlength="256" name="q" title="Search Text"
   value="" type="text">

Correct Example

Two screenshots of a “Search News Releases” form. In the first, the visual label “Search News Releases” is circled and a red arrow points to the text input beneath it, which has received focus after clicking the label. In the second, an evaluation tool flag on the label shows for="news-search", matching the input’s id.

<label for="news-search">Search News Releases</label>
<input autocomplete="off" id="news-search" maxlength="256" name="q"
title="Search Text" value="" type="text">

Notes

• Automated tools are generally good in flagging issues with forms
• This maps to
  • 1194.21(l) - When electronic forms are used, 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;
  • 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.
• Proper coding can be found on multiple websites including http://webaim.org/techniques/forms/controls

Evaluating Other Common Elements

Repetitive Navigation

In typical web page design, the header and navigational elements precede the main content of the page. For keyboard and screen reader users, this poses a problem as focus always starts at the top of the page and users must navigate past repetitive content each time. As such, there must be a way to quickly skip to the main content.

Steps to check:

1. Open the web page
2. Check for the presence of repeated content prior to the main content including header information and navigation
3. Disable the styles in the web browser
4. Ensure there is a link at the top of the page that indicates a skip (Skip to main content, Skip Navigation, etc.)
5. Enable the styles in the web browser
6. Tab to the link and hit enter
7. Ensure there is a shift to the main content of the page
8. Ensure when selecting Tab again, the first focusable item in the main content receives focus

Common Issues

1. There is no skip link on pages with repetitive navigation
2. There is a skip link present, however:
   1. The link is not at the top of the page
   2. The link is not reachable when styles are enabled
   3. The link anchors prior to repetitive content

Correct Example

HHS.gov has a “Skip to Main Content” link that displays when it has keyboard focus and is anchored just above the main title of each page

Screenshot of an HHS.gov “Programs & Services” page. A red arrow points from a “Skip to main content” link, visible at the very top left corner of the page while it has keyboard focus, down past the site header, search box, and navigation buttons to the page’s main heading “Programs & Services”.

Notes

• The skip link is not required on pages that have no repetitive navigation
• While it is not required that the skip link be visible when it has keyboard focus, it is strongly recommended as a best practice
• Automated tools can aid in the inspection as some show the presence of a skip link and or whether the link is anchored. However, manual inspection is required to ensure the link can be reached and anchors to the main content of the page.
• This maps to 1194.22(o) - A method shall be provided that permits users to skip repetitive navigation links.
• Additional Resources:
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html
  • http://webaim.org/techniques/skipnav/

Frames

When a frame is included on a web page, it must have a descriptive title attribute that lets users know the purpose/content of the frame. In addition, all content in the frame must be fully 508 compliant.

Steps to check:

1. Open the web page
2. Inspect the source for the presence of frames
3. Ensure a proper title attribute exists
4. Ensure the content within the frame is fully compliant

Common Issues

Frame element lacks a title attribute

<iframe width="400" height="329" src="http://www.youtube-
nocookie.com/embed/rQHaL8EJHvA?autoplay=0&amp;rel=0&amp;hl=en_US&amp;showinfo
=0&amp;enablejsapi=1&amp;modestbranding=1" </iframe>

Correct Example

<iframe width="400" height="329" title="YouTube embedded video: Astronaut
Scott Kelly Speaks Out Against Bullying" src="http://www.youtube-
nocookie.com/embed/rQHaL8EJHvA?autoplay=0&amp;rel=0&amp;hl=en_US&amp;showinfo
=0&amp;enablejsapi=1&amp;modestbranding=1" </iframe>

Notes

• Automated tools can aid in the inspection as some show the presence of a frame. However, manual inspection is required to ensure the title attribute is present and appropriate
• Frames are commonly found on pages with embedded videos or interactive maps
• This maps to 1194.22(i) - Frames shall be titled with text that facilitates frame identification and navigation.
• Additional Resources
  • http://www.w3.org/TR/WCAG20-TECHS/H64.html
  • http://webaim.org/techniques/frames/

Plugins

Anytime an additional piece of software (other than a browser) is needed to view content, a link must be provided to the software. Typically this is resolved by putting a link in the footer to a page that contains all the additional software needed to view the site.

Steps to check:

1. Open the web page
2. Inspect the page for any direct links to source files that require a viewer such as PDF, Office, Flash, etc.
3. Determine if there is a direct link to the software needed to view the files
4. If not, determine if there is a link in the repeated header or footer that takes the user to a page that lists all software that may be needed on the site
5. Inspect the page from step 4 to ensure all software needed is listed and correctly linked

Common Issues

A page includes a link to a file that requires an additional viewer, but the link to the viewer (or a general viewers & players link in the footer) is not provided.

Correct Example

HHS.gov has a Viewers and Players link in the global footer of the site. This page lists all plugins that may be needed to access site content:

Screenshot of the HHS.gov global footer with two columns of links: HHS Home, HHS/Open, HHS Archive, Budget/Performance, and FOIA in the first column; Accessibility, Privacy Policy, Disclaimers, Viewers & Players, and Site Feedback in the second. The “Viewers & Players” link is circled in red.

Notes

• Automated tools can aid in the inspection as some can tell whether source files exist on the page or not. However, the presence of the link to the software must be manually evaluated.
• This maps to 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).

Content Order

It is important to ensure that content order is programmatically maintained so users of Assistive Technology can encounter content the way it is intended on a web page.

Steps to check:

1. Open the web page
2. Open the same web page in a different browser window
3. Disable the styles in the second browser window
4. Compare the order of the content
5. Ensure the order is maintained, or that the modified order in the second window does not disrupt the understanding of the content

Common Issues

Content order is altered when styles are disabled (or read by a screen reader) to the point of creating a problem in understanding the content.

Correct Example

On http://www.hhs.gov/programs/index.html, the order of the content matches when the page with styles enabled is compared to the page with styles disabled:

Side-by-side screenshots of the HHS.gov “Programs & Services” page. The left shows the styled page with header, navigation buttons, the “Programs & Services” heading, and content boxes including “I would like info on…” and “HIPAA & Your Health Rights”. The right shows the same page with styles disabled as a plain text-and-links list, presenting the same items in the same order: navigation links, then “Programs & Services”, then “I would like info on…”, then “HIPAA & Your Health Rights”, then “Health Insurance”.

Notes

• This requires manual inspection and will not typically be flagged in any automated tools
• This can also be evaluated with a screen reader
• This maps to 1194.22(d) - Documents shall be organized so they are readable without requiring an associated style sheet.
• Additional Resources
  • http://webaim.org/techniques/css/
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html
  • http://www.w3.org/WAI/GL/WCAG20-TECHS/css.html

Time Restrictions

Putting any kind of time restriction on a user’s ability to interact with content imposes a burden on those who may require additional time to complete tasks due to cognitive disabilities or reliance on Assistive Technology.

Steps to check:

1. Open the web page
2. Inspect the page for elements that give time restrictions on viewing content
3. Ensure there is an accessible method to extend time on viewing content
4. Inspect the page for time restrictions on user response
5. Ensure there is an accessible method to alert the user of the time restriction before it runs out and an option to extend the time

Common Issues

1. A form has a time restriction for the user to submit and there is no notification to the user when time is about to expire, nor a way to extend that time.
2. An automatically advancing slideshow has no method to pause indefinitely nor go to previous slides.

Correct Example

http://www.stopbullying.gov/ has a slideshow that automatically advances. However, if a user activates one of the slide items by keyboard or mouse, the slideshow stops. In addition, the user can navigate to previous slides.

Screenshot of the stopbullying.gov slideshow. A “FEATURES” list on the left offers the slide items Common Mistakes, Report Cyberbullying, KnowBullying App, and Be More Than a Bystander, with Common Mistakes selected. The active slide shows a teacher pointing to a chalkboard message reading “When You See Bullying, Avoid These Common Mistakes” while three students look on.

Notes

• This requires manual inspection and will not typically be flagged in any automated tools
• This maps to 1194.22(p) - When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
• Additional Resources:
  • http://www.w3.org/WAI/tutorials/carousels/
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html

Flicker

Though uncommon in websites today, any flickering or flashing content has the potential to cause seizures.

Steps to check:

1. Open the web page
2. Inspect the page for flickering or flashing content
3. Determine if the flicker is at or greater than twice per second
4. Be sure to check videos and interactive objects that may flicker when a mouse hovers over them

Common Issues

Page contains content that flashes more than twice per second.

Correct Example

Page is free from any content that flashes more than twice per second.

Notes

• This requires manual inspection and will not typically be flagged in any automated tools
• This maps to 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.
• Additional Resources:
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html
  • http://webaim.org/articles/seizure/
  • http://trace.wisc.edu/peat/photosensitive.php

Evaluating with Assistive Technology

NVDA

NVDA is a free screen reader that can be used to experience a web site through Assistive Technology. It is recommended to navigate the site with NVDA both with the monitor off (to get a full experience of a blind user) and with the monitor on to identify any missed or problematic content.

Steps to check:

1. Start the NVDA screen reader
2. Open the Web page
3. Press the down arrow to go line by line
4. Ensure actionable items are clearly announced
5. Ensure actionable items can be activated with Enter or Space Bar
6. Ensure all informational content is announced
7. Ensure the order of the content is maintained

Guidelines:

• Meeting the 508 technical standards will not always translate to a usable site for users of assistive technology, especially on sites with dynamic content
• Issues found during a review with the screen reader will need to be evaluated on a case by case basis as to whether the problem is traces back to 508 standards or is a usability issue
• Use judgement when analyzing the issues found:
  • Issues where informational content is not able to be announced or the risk of missing the content is high should be considered a 508 failure
  • Issues where content can be accessed but requires additional searching of the page or extra keystrokes (going back and forth) may be considered 508 compliant but should be explored for WCAG 2.0 issues and/or accessibility enhancements

Notes

• Screen readers are not a testing tool, so there will be no pass/fail results, but they will give an evaluator the experience of a user and may uncover problematic elements.
• There is accessible example code of many common web elements such as menus, carousels, tabs, collapsible elements, etc. See https://playbook.cio.gov/designstandards/accordions/
• This maps to 1194.31(a) - At least one mode of operation and information retrieval that does not require user vision shall be provided, or support for assistive technology used by people who are blind or visually impaired shall be provided and (if javascript is the culprit);
• 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.
• Additional Resources:
  • http://webaim.org/articles/nvda/
  • http://webaim.org/techniques/screenreader/
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html
  • http://www.w3.org/WAI/PF/aria-practices/#aria_ex

Future Considerations

Section 508 has proposed to include WCAG 2.0 by reference. While there is some overlap, WCAG 2.0 provides additional and more specific guidance. In addition, there are new standards to fulfill. The following 3 are easy-to-understand examples but are in no way comprehensive. For a larger list of issues, see strongly encouraged fixes in HTML.

Links

When reviewing hyperlinks, 2 things must be considered. First, if the hyperlink is a different color than surrounding text, whether or not it is distinguishable. Second, if the actual link text is understandable within the context of the surrounding text.

Steps to check:

1. Open the web page
2. Inspect the page for links that are distinguished by color (and do not have another distinguisher such as an underline)
3. Ensure the link has contrast greater that 3:1 when compared to surrounding text
4. Inspect the link text
5. Ensure link text is either understandable on its own or is understandable within the context of the surrounding text (surrounding text must be in the same HTML tag)

Common Issues

1. Links are Only Identified Visually by Color

   Screenshot of a page of black paragraph text about bullying in which red arrows point to two links, “teen dating” and “gang”, that are distinguished from the surrounding text only by their dark blue color, with no underline. Beside it, the Colour Contrast Analyser compares the link color hex #003E7A against the surrounding text color hex #000000 and reports a luminosity contrast ratio of 1.97:1, below the 3:1 needed for color to serve as the distinguisher.

2. Generic Link Text is Present

   Screenshot of a page fragment reading “We are hosting an exsiting event next week!” followed, in a separate paragraph, by an underlined link whose entire text is “Read more”.

   In this case context is not sufficient because the link is in a separate paragraph:

   <p> We are hosting an exsiting event next week!</p>
   <p> <a href = "http://www.hhs.gov"> Read more </a> </p>

Correct Example

The hyperlink “register with Grants.gov” text is understandable out of context. Though it is blue, it is always underlined in addition to having sufficient contrast from surrounding text (only 1 is needed to be sufficient).

Screenshot of a Grants.gov instructions page containing the sentence “Thirdly, register with Grants.gov where gra…” in which the link “register with Grants.gov” is blue and underlined within black surrounding text. Beside it, the Colour Contrast Analyser compares the link color hex #0053CC against the surrounding text color hex #000000 and reports a luminosity contrast ratio of 3.11:1.

Notes

• Automated tools can aid in the inspection as some show the presence of generic text. However, manual inspection is required to determine whether the link has enough surrounding context and whether links have a non-color indicator or sufficient contrast from the surrounding text.
• Additional Resources:
  • http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G183
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html
  • http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F63
  • http://webaim.org/techniques/hypertext/

Language

Setting the language of the page allows assistive technology to render the text more accurately.

Steps to check:

1. Open the web page
2. View the source
3. Ensure the HTML tag includes the Lang attribute and is set to the appropriate language

Common Issues

Language is not set for the page

Screenshot of an evaluation tool report stating “The following apply to the entire page:” with a flag icon expanded to read “Document language missing. The language of the document is not identified.” followed by a “More Information” link.

<html>

Correct Example

When viewing the source on HHS.gov, the language is set in the HTML tag.

<html lang="en">

Notes

• Automated tools are generally good in flagging missing language, though some tools will flag this as a direct failure since they are scanning for WCAG 2.0.
• Additional Resources:
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-doc-lang-id.html

Page Titles

Having unique and descriptive page titles allows users to quickly identify web pages.

Steps to check:

1. Open the web page
2. Observe the title bar of the browser or inspect the code
3. Ensure a page title is present
4. Ensure the title is not generic and accurately describes the content of the page

Common Issues

1. Web page is missing a title

   Screenshot of an evaluation tool icon labeled “title” marked in red, indicating the page has no title.

2. Title is generic / does not identify the contents of the page

Correct Example

The environmental justice strategy page has an appropriate title attribute

Screenshot of the HHS Environmental Justice Strategy page open in a browser. One red arrow points to the browser tab, which reads “HHS Environmental Justice…”, and another points to the on-page heading “HHS Environmental Justice Strategy”, showing that the page title matches the page content.

<title>HHS Environmental Justice Strategy | HHS.gov</title>

Notes

• Automated tools are generally good in flagging missing page titles, though some tools will flag this as a direct failure since they are scanning for WCAG 2.0. However, manual inspection is required to ensure page titles are accurate
• Additional Resources:
  • http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html

Additional Resources

HHS

• HHS HTML 508 Checklist
• HHS Required fixes for HTML files

Official Standards

• Access Board Section 508 Standards
• Access Board Guide to Section 508 Standards
• WCAG 2.0

Other US Government

• https://playbook.cio.gov/designstandards/getting-started/

Other Dependable Resources

• http://webaim.org/
• http://www.w3.org/WAI/

Appendix

Included in this appendix are the current applicable 508 standards taken directly from the access board web site.

Subpart B — Technical Standards

§ 1194.21 Software applications and operating systems.

(a) When software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually.

(b) Applications shall not disrupt or disable activated features of other products that are identified as accessibility features, where those features are developed and documented according to industry standards. Applications also shall not disrupt or disable activated features of any operating system that are identified as accessibility features where the application programming interface for those accessibility features has been documented by the manufacturer of the operating system and is available to the product developer.

(c) A well-defined on-screen indication of the current focus shall be provided that moves among interactive interface elements as the input focus changes. The focus shall be programmatically exposed so that assistive technology can track focus and focus changes.

(d) Sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. When an image represents a program element, the information conveyed by the image must also be available in text.

(e) When bitmap images are used to identify controls, status indicators, or other programmatic elements, the meaning assigned to those images shall be consistent throughout an application’s performance.

(f) Textual information shall be provided through operating system functions for displaying text. The minimum information that shall be made available is text content, text input caret location, and text attributes.

(g) Applications shall not override user selected contrast and color selections and other individual display attributes.

(h) When animation is displayed, the information shall be displayable in at least one non-animated presentation mode at the option of the user.

(i) Color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

(j) When a product permits a user to adjust color and contrast settings, a variety of color selections capable of producing a range of contrast levels shall be provided.

(k) Software shall not use flashing or blinking text, objects, or other elements having a flash or blink frequency greater than 2 Hz and lower than 55 Hz.

(l) When electronic forms are used, 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.

§ 1194.22 Web-based intranet and internet information and applications.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

§ 1194.24 Video and multimedia products.

(a) All analog television displays 13 inches and larger, and computer equipment that includes analog television receiver or display circuitry, shall be equipped with caption decoder circuitry which appropriately receives, decodes, and displays closed captions from broadcast, cable, videotape, and DVD signals. As soon as practicable, but not later than July 1, 2002, widescreen digital television (DTV) displays measuring at least 7.8 inches vertically, DTV sets with conventional displays measuring at least 13 inches vertically, and stand-alone DTV tuners, whether or not they are marketed with display screens, and computer equipment that includes DTV receiver or display circuitry, shall be equipped with caption decoder circuitry which appropriately receives, decodes, and displays closed captions from broadcast, cable, videotape, and DVD signals.

(b) Television tuners, including tuner cards for use in computers, shall be equipped with secondary audio program playback circuitry.

(c) All training and informational video and multimedia productions which support the agency’s mission, regardless of format, that contain speech or other audio information necessary for the comprehension of the content, shall be open or closed captioned.

(d) All training and informational video and multimedia productions which support the agency’s mission, regardless of format, that contain visual information necessary for the comprehension of the content, shall be audio described.

(e) Display or presentation of alternate text presentation or audio descriptions shall be user-selectable unless permanent.

Subpart C — Functional Performance Criteria

§ 1194.31 Functional performance criteria.

(a) At least one mode of operation and information retrieval that does not require user vision shall be provided, or support for assistive technology used by people who are blind or visually impaired shall be provided.

(b) At least one mode of operation and information retrieval that does not require visual acuity greater than 20/70 shall be provided in audio and enlarged print output working together or independently, or support for assistive technology used by people who are visually impaired shall be provided.

(c) At least one mode of operation and information retrieval that does not require user hearing shall be provided, or support for assistive technology used by people who are deaf or hard of hearing shall be provided.

(d) Where audio information is important for the use of a product, at least one mode of operation and information retrieval shall be provided in an enhanced auditory fashion, or support for assistive hearing devices shall be provided.

(e) At least one mode of operation and information retrieval that does not require user speech shall be provided, or support for assistive technology used by people with disabilities shall be provided.

(f) At least one mode of operation and information retrieval that does not require fine motor control or simultaneous actions and that is operable with limited reach and strength shall be provided.