Access 508 Standards

Section 508 Standards

The Board interprets paragraphs (a) through (k) of this section as consistent with the following priority 1 Checkpoints of Accessibility Guidelines 1.0 (WCAG 1.0) 5-May-1999) published by the Web Accessibility Initiative of the World Wide Web Consortium. Pages must also comply with paragraphs (l) through (p).

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

(b) MEDIA - Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
Fix: Supply a captioned version of the presentation or a text file of the content. Contact Carolyn Fiori or Judith LaRiviere

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

(d) STYLE SHEETS - Documents shall be organized so they are readable without requiring an associated style sheet.
Fix: http://www.access-board.gov/sec508/guide/1194.22.htm#(d)

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

(f) IMAGE MAPS - 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. Fix: Use a client-side image map.

(g) DATA TABLES - Row and column headers shall be identified for data tables. Fix

(h) DATA TABLES - 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. Fix: Use the "scope" attribute. (Not yet supported by the Dreamweaver interface.)

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

(j) "FLICKERING" - Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. Fix: Set animated GIFs between the above parameter. http://www.access-board.gov/sec508/guide/1194.22.htm#(j)

(k) TEXT-ONLY PAGE ALTERNATIVE - A text-only page, with equivalent information of 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. Fix

(l) SCRIPTING LANGUAGES - 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. Fix Use ALT tag in the script.

(m) PLUG-INS - When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with sections 1194.21 (a) through (l Fix?

(n) FORMS - When electronic forms are designed to be completed online, 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 clues. Fix. User <label> tags.

(o) SKIP NAVIGATION - A method shall be provided that permits users to skip repetitive navigation links. Fix Use a "skip navigation" link.

(p) TIMER ALERTS - When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
Fix If you are using TestPilot, a timer message is an option: #5 Security: Manage Time Limits.

Resources

508 Standards - http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web

Web Access Board, "Web-based Intranet and Internet Information and Applications (1194.22)"
Updated: June 21, 2001 http://www.access-board.gov/sec508/guide/1194.22.htm

AccVerify software is available on computers in your CTL to check your page for accessibility. (Windows platform)
Dreamweaver Extensions offer a 508 Standards accessibility checker. http://www.macromedia.com/cfusion/exchange/index.cfm

a) Text equivalents

Images should be labeled for content (Alt or Longdesc tags). Test it yourself: if you turn off image display in your browser do you lose information?

Problem:

People using text readers or people who need to turn off images in their browsers will not be able to understand what the missing content is unless the it is indicated in text.

Example of Fix

Code View
<img src="img/handicapped.gif" alt="handicapped symbol">

Page View

Using Dreamweaver
Enter the Alt tag in the Property Inspector (pictured below.)

NOTE: If the image is text, use the image's word as the ALT tag.
The ALT tag should be "top". Enter an "ALT" label in your Web editor:

Resource: http://www.access-board.gov/sec508/guide/1194.22.htm#(a)

c) Information is conveyed equally with our without color.

Problem:

If a user does not see color, he will not benefit from "color coding" and will not know which of the below assignments fits into specific categories.

Assignments (homework=orange, assigments=gold, projects=purple)

Read Chapters 3-4

Answers Chapter questions

Attend a movie on the subject

(Turn colors off in your browser. Is any critical information missing? If so, create redudant text)

Example of Fix

Assignments

Homework Read Chapters 3-4

Assignment Answers Chapter questions

Project Attend a movie on the subject

Redundant text corresponding to the color-coding has been added.

Resource: http://www.access-board.gov/sec508/guide/1194.22.htm#(c)

e) Image Maps (Image Maps need to be labeled differently from simple images.)

Problem:

Images may have "hot spots" behinds parts of the image. When you click on a "hot spot", you are actually clicking on a link. Visually impaired users will require alternative text.

VIEWS OF THE SOLAR SYSTEM by Calvin J. Hamilton

Example of Fix

VIEWS OF THE SOLAR SYSTEM by Calvin J. Hamilton

Our solar system consists of an average star we call the Sun, the planets Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune, and Pluto.

Text links are written (redundantly) below the "mapped image".

Add an Alt or Longdesc description.(Picture of solar system with 10 links listed below image)
Add redundant text links.

Resource: http://www.access-board.gov/sec508/guide/1194.22.htm#(e)

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

Problem 1: Use Table "Caption" and/or "Summary" Tags (optional, but useful)

People using text readers cannot quickly scan the content of a table to understand what the table is about.

Week	Lab	Handout	Post Test
8/16	Chapter 1	families	Quiz 1
8/23	Chapter 2	gangs	Quiz 2
8/30	Chapter 3	community	Quiz 3
9/6	Chapter 4	support services	Quiz 4

Example of Fix

Use a caption or a summary to help the user understand what the table contains.

Weekly Schedule
Week	Lab	Handout	Post Test
8/16	Chapter 1	families	Quiz 1
8/23	Chapter 2	gangs	Quiz 2
8/30	Chapter 3	community	Quiz 3
9/6	Chapter 4	support services	Quiz 4

Code View
<table width="100%" summary="Weekly Schedule">
<caption>
Weekly Schedule
</caption>
< tr>
<td>

Using Dreamweaver
Check accessibility boxes in your Dreamweaver preferences to ienable the Caption dialog box prompt.

Table caption dialog box

Problem 2: Use the "ID" and "Headers" Attributes in Tables

People using text readers will not be able to benefit from the organization of data that you see visually below:

Weekly Schedule

Week	Lab	Handout	Post Test
8/16	Chapter 1	families	Quiz 1
8/23	Chapter 2	gangs	Quiz 2
8/30	Chapter 3	community	Quiz 3
9/6	Chapter 4	support services	Quiz 4

Text Reader users hear a blur of data:

Weekly Lab, Handout and Post Test Assignments 8/16 Chapter 1 families Quiz 1 8/23 Chapter 2 gangs Quiz 2 8/30 Chapter 3 community Quiz 3 9/6 Chapter 4 support services Quiz 4

Example of Fix

Row and column headers need to be identified for data tables. Header cell contents will be repeated by “Jaws” (the software that visually impaired users employ) when reading all successive cell contents in its column.

Code View

<tr>
<th> Week </th>
<th> Lab </th>
<th> Handout</th>
<th> Post Test </th>
</tr>

Using Dreamweaver

header checkbox in Dreamweaver

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.

Use the "scope" attribute (Not yet supported by the Dreamweaver interface.)

scope="col"

By doing this simple step, the text in that cell becomes associated with every cell in that column. Unlike using other approaches (notably "id" and "headers") there is no need to include special attributes in each cell of the table. Similarly, the first column of every table should include information identifying information about each row in the table. Each of the cells in that first column are created by either <TH> or <TD> tags. Include the following attribute in these cells:

scope="row"

By simply adding this attribute, the text in that cell becomes associated with every cell in that row. While this technique dramatically improves the usability of a web page, using the scope attribute does not appear to interfere in any way with browsers that do not support the attribute.

Example:

Weekly Schedule
Week	Lab	Handout	Post Test
8/16	Chapter 1	families	Quiz 1
8/23	Chapter 2	gangs	Quiz 2
8/30	Chapter 3	community	Quiz 3
9/6	Chapter 4	support services	Quiz 4

<table width=85% border=1 align="center" cellpadding="3" cellspacing="1" summary="Weekly lab, handouts and posttests schedule.">
<caption>Weekly Schedule</caption>
<tr >
<th scope="col"> Week </th>
<th scope="col"> Lab </th>
<th scope="col"> Handout</th>
<th scope="col"> Post Test </th>
</tr>
<tr >
<td scope="row">8/16 </td>
<td scope="row">Chapter 1 </td>
<td scope="row">families </td>
<td scope="row">Quiz 1 </td>
</tr>
<tr>
<td scope="row">8/23 </td>
<td scope="row">Chapter 2 </td>
<td scope="row">gangs</td>
<td scope="row">Quiz 2 </td>
</tr>
<tr>
<td scope="row">8/30</td>
<td scope="row">Chapter 3</td>
<td scope="row">community </td>
<td scope="row">Quiz 3</td>
</tr>
<tr>
<td scope="row">9/6 </td>
<td scope="row">Chapter 4 </td>
<td scope="row">support services </td>
<td scope="row">Quiz 4 </td>
</tr>
</table>

"The efficiency of using the scope attribute becomes more apparent in much larger tables. For instance, if an agency used a table with 20 rows and 20 columns, there would be 400 data cells in the table. To make this table comply with this provision without using the scope attribute would require special coding in all 400 data cells, plus the 40 header and row cells. By contrast, using the scope attribute would only require special attributes in the 40 header and row cells." (see resource below)

Resource: http://www.access-board.gov/sec508/guide/1194.22.htm#(g)

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

Use "title" attribute.

Code View

Using Dreamweaver

Dreamweaver Frame Title Window

Resource: http://www.access-board.gov/sec508/guide/1194.22.htm#(i)

(k) A text-only page, with equivalent information of functionality, shall be provided

You can either create a text page or paste this script into the code of your page: (Note the link at the top of this page!)

Provide a link: Text View (link)

Code View

Learn How to Quickly and Easily Add a "Text Only" Transcoder to Your Website! Text Transcoder Page!

Resource: http://www.access-board.gov/sec508/guide/1194.22.htm#(k)

(l) When pages utilize scripting languages

When developers use images inside of JavaScript URL's they should provide meaningful information about the image or the effect of the anchor link. For instance, the following link alsoinvokes the JavaScript function myFunction, but requires the user to click on an image instead of the text "Start myFunction":

This type of link, as written, presents tremendous accessibility problems, but those problems can easily be remedied. The <img> tag, of course, supports the "alt" attribute that can also be used to describe the image and the effect of clicking on the link. Thus, the following revision remedies the accessibility problems created in the previous example:

Resource: http://www.access-board.gov/sec508/guide/1194.22.htm#(j)

(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 sections 1194.21 (a) through (l).

Problem:

Part of the issue with the <embed> tag is that it is “correct” for HTML 4.01/XHTML coding – the recommendation is to use the <object> tag instead. Only problem with this approach is that not all browsers recognize just the <object> tag (or just the <embed> tag). So, the only way to make the content recognizable by all browsers is to use a combination of the two – or do some hacking around in the HTML code.

If a browser does not support the <embed> tag, then you still want to provide the content to the user; similar to the manner in which a <noscript> or <noframes> tag is handled (at least that is what HiSoftware is attempting to suggest). That way, if the user does not have the appropriate plug-in, they will see the notification that there is a problem.

It is possible to deliver content using the <object> tag alone and not have to deal with the <embed> tag if you are attempting to pass W3C validation. I know you can do it with Flash content, so there is probably not too much tweaking that is necessary for a QuickTime file.

Sean Keegan skeegan@htctu.net
Web Accessibility Instructor
High Tech Center Training Unit for the California Community Colleges
Cupertino, CA

Fix:

??? ( The jury is out on this one.)

(n) Making Electronic Forms Accessible

Use Label tags. Use attribures: id=" " and tabindex=""

Accessible Electronic Form Example
First Name
Last Name
Submit

Code View

<form name="form1" method="post" action="">
<table width="100%" border="0" cellpadding="4">
<caption align="left"> Accessible Electronic Form Example </caption>
<tr><td><label for="first">First Name</label></td>
<td><input type="text" name="firstname" tabindex="1" id="first"></td>
</tr>
<tr>
<td><label for="last">Last Name</label></td>
<td><input type="text" name="textfield" tabindex="2" id="last"></td>
</tr>
<tr>
<td><label for="submit">Submit</label></td>
<td><input type="submit" name="Submit" value="Submit" tabindex="3" id="submit"></td>
</tr>
</table>
</form>

Dreamweaver

In Preferences, make sure to check "Show attributes when inserting: Forms"

Insert, Form Area; Insert a 2-column table;

1. Insert a Text Field (Insert: Form: Text Field)
Insert a text field in the first row, second column of your table. The Input Tag Accesibilty Attributes window will open.
Give your text field a nice-name (no abbreviations) label

2. Edit the Form Tag

Select the text field. File Menu: Modify:Edit Tag or use the contect menu: right-click or Control Click the form : "Edit Tag Input"

Name: first (You can shorten the nice-name from "First name" to just "first".)

Enter a form ID and a Tab index number. (You can shorten the nice-name from "First name" to just "first".)
Give each input a sequential tab index number. Since this is the first field it gets "1".

3. Edit the Label Tag

Select the label of the text field. (eg. First Name) and modify its tag:

File Menu: Modify:Edit Tag or Contect Menu: right-click or Control Click the form : "Edit Tag Input"

OK.

Check the code view to see that Dreamweaver has placed your label in between the <lable> tags.

o) Skip navigation

Example: provide a link before the navigation area. Note: For esthetics, you can turn it white to blend with the background: the text reader will still read it.

Skip Navigation

Announcements

Course Info

Lessons

Class Forum

Instructor Email

("Skip navigation" will link to an anchor at the beginning of the page content.)

Lessons

(Lesson content here.)

top

For further information please contact:
Cañada: Jim Petromilli, CTL Director 650-574-6208	CSM : Peter Bruni, CTL Coordinator 650.574.6598	Skyline: Anyta Archer, CTL Coordinator 650.738.4207

Centers for Teaching and Learning San Mateo County Community College District