|
Section 508 Workshop
508 Guidelines
<-
Back
Guideline A: Non-Text Elements - Top
|
Description:
|
A text equivalent for every non-text element shall be provided.
|
|
Interpretation:
|
Images:
All images that meet any of the following criteria must have an ALT
attribute containing meaningful descriptive text:
All other images must contain at least a blank or
1 space ALT attribute (i.e.
ALT="" or ALT=" "),
but may contain a useful alternative text description if applicable. Do not
provide meaningless or unnecessary text descriptions that will only
clutter the auditory version of the page.
Audio/Video:
All audio presentations must have a text transcript
accompanying the presentation. All audio/video presentations must
be captioned.
|
|
Instruction:
|
To Edit the ALT
Attribute Using FrontPage 2000
-
Right-Click on the image
-
Left-Click on the "Picture Properties" menu item
-
Type the alternate text in the "Text" text box
of the "Alternative representations" frame
To Edit the ALT
Attribute Using FrontPage 2002
-
Right-Click on the image
-
Left-Click on the "Picture Properties" menu item
-
Left-Click on the "General" tab
-
Type the alternate text in the "Text" text box
of the "Alternative representations" frame
more detailed example To Caption Audio/Video Presentations
|
Guideline B: Multimedia Presentations -
Top
|
Description:
|
Equivalent alternatives for any multimedia presentation
shall be synchronized with the presentation.
|
|
Interpretation:
|
All audio/video presentations must have captioning for
both the
audio portion and the audio description of visual information that
is synchronized with the audio.
|
|
Instruction:
|
To Caption Audio/Video Presentations
|
Guideline C: Color - Top
|
Description:
|
Web pages shall be designed so that all information
conveyed with color is also available without color, for example
from context or markup. |
|
Interpretation:
|
For example, when asking for input from users, do not write "Please
select an item from those listed in green." Instead, ensure that
information is available through other style effects (e.g., a font
effect or in graphics, different shapes) and through context (e.g.,
comprehensive text links).
|
|
Instruction:
|
To test whether your document still works without colors, examine it
with a monochrome monitor, print it on a black and white printer, or
view with browser colors turned off.
|
Guideline D: Readability (style sheets) -
Top
| Description: |
Documents shall be organized so they are readable
without requiring an associated style sheet. |
| Interpretation: |
If you use a style sheet, use an "external" style
sheet, in which the style rules are set up in a separate file and referred
to by using the HTML similar to the following:
<LINK REL=stylesheet
TYPE="text/css" HREF="section508.css">
Style sheets are effective in adding font
variations and colors to your Web pages. But don't substitute style
changes for the structural elements of HTML like headings,
paragraphs, and lists.
|
| Instruction: |
If you use CSS for positioning or page-wide
color controls, check out your pages with style sheets disabled to
be sure that information is not lost. |
Guideline E: Server-Side Image Maps -
Top
| Description: |
Redundant text links shall be provided for each active
region of a server-side image map. |
| Interpretation: |
Assistive technologies cannot determine the navigation of a
server-side image map. Therefore, do not use server-side image
maps. |
| Instruction: |
If utilized, be sure to provide redundant, non server-side image
mapped navigation to the same locations. |
Guideline F: Client-Side Image Maps -
Top
| Description: |
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. |
| Interpretation: |
Client-side image maps are preferred. FrontPage is able to
create image maps with several geometric shapes. The "hot
spots" are indicative of navigational links, therefore be sure
to include ALT attributes for each "hot spot". Also, since the
image map is an image the overall image needs an ALT attribute as
described in Guideline A. |
| Instruction: |
To Edit the ALT Attribute
of a Hotspot Using FrontPage 2002:
- Right-click the hotspot
- Select Hyperlink...
- Click the "Screen Tip..." button
- Enter the alt text for the hotspot
more detailed example |
Guideline G & H: Data Tables -
Top
| Description: |
(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. |
| Interpretation: |
All data tables will use the "SCOPE"
attribute to associate data in columns and rows.
Example of a Simple Data Table
| |
Spring |
Summer |
Autumn |
Winter |
| Betty |
9-5 |
10-6 |
8-4 |
7-3 |
| Wilma |
10-6 |
10-6 |
9-5 |
9-5 |
| Fred |
10-6 |
10-6 |
10-6 |
10-6 |
Example of a Complex Data Table
| |
Winter |
Summer |
| |
Morning |
Afternoon |
Morning |
Afternoon |
| Wilma |
9-11 |
12-6 |
7-11 |
12-3 |
| Fred |
10-11 |
12-6 |
9-11 |
12-5 |
|
| Instruction: |
The header cell tag of each column must include
the following attribute:
SCOPE="col"
and the header cell tag for each row must include the
following attribute:
SCOPE="row"
more detailed example
|
Guideline I: Frames -
Top
| Description: |
Frames shall be titled with text that facilitates frame
identification and navigation. |
| Interpretation: |
Label a frame so that the user can identify what content they should
expect to find in that frame. |
| Instruction: |
If you must use frames, the best approach to meet this requirement is
to include text at the beginning of the content in each frame that
explains what is contained in that frame.
For instance, a popular use of frames is to create "navigational
bars" in a fixed position on the screen and have the content of the
web site retrievable by activating one of those navigational
buttons. The new content is displayed in another area of the
screen. A web developer should consider putting words such as
"Navigational Links" at the beginning of the contents of the
frame to let all users know that the frame depicts navigational links.
|
Guideline J: Flicker Rate -
Top
| Description: |
Pages shall be designed to avoid causing the screen to
flicker with a frequency greater than 2Hz and lower than 55Hz |
| Interpretation: |
It has been discovered that images that flash at certain frequencies
may cause epileptic seizures. Hz is a unit of measure of
frequency of cycles per second. 2Hz would then be two cycles
every second, and 55Hz would be fifty five cycles every second.
Normally you would not be designing a web page to flash at all.
Therefore, for the majority of web designers, this guideline is not
an issue. |
| Instruction: |
This guideline includes anything that can be viewed on a web page
including the entire page itself. Thus, animated gif's, Java
applets, or third-party plug-ins or applications that cause any sort
of flickering should be avoided in all possible cases.
|
Guideline K: Text-Only Alternative -
Top
| Description: |
A text-only page, with equivalent information or
functionality, shall be provided to make a web site comply with the
provisions of these standards, when compliance cannot be
accomplished in any other way. The content of the text-only
page shall be updated whenever the primary page changes. |
| Interpretation: |
This can be used if you link to a page that has no 508compliant
version. For example, if you linked to a PDF document and
Adobe Acrobat Reader was not 508 compliant, then you would need to
create a text-only equivalent of that PDF document.
The use of "text-only" equivalent pages is to be used
only as a last resort.
|
| Instruction: |
Take the content from your non-508 compliant page and place it into
a page that is compliant. Include a link to your compliant
page wherever you have a link to your non-compliant page. And
be sure to maintain the content on the compliant page whenever the
content on the non-compliant page changes. |
Guideline L: Scripts - Top
| Description: |
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.
|
| Interpretation: |
This guideline can be broken down into three categories:
Interface Elements:
If you use a JavaScript hyperlink with an image as the clickable
interface, be sure to use the ALT attribute as described in Guideline A for
that image.
Status Bar:
If you use a JavaScript hyperlink and use JavaScript to modify the the
contents of the status bar, remember that assistive technology cannot
access the status bar and thus you must provide functional text in the JavaScript
hyperlink or by providing an ALT attribute if the JavaScript is
used with an image.
Event Handlers:
The following event handlers can be used in JavaScript code on web
pages with the corresponding restrictions.
| onClick |
Do not use the onClick event handler
for form elements that include several options (e.g. select
lists, radio buttons, checkboxes) unless absolutely
necessary.
|
|
| onDblClick |
Should be avoided.
|
|
onMouseDown
onMouseUp |
These tags should be used
sparingly, if at all. Opt for the onClick
event handler instead of these.
|
|
onMouseOver
onMouseOut |
Web designers who use these event handlers should be careful to duplicate the information (if any) provided by these event handlers through other means.
|
|
onLoad
onUnload |
These do not present
accessibility problems.
|
|
| onChange |
Should be avoided.
|
|
onBlur
onFocus |
Should be avoided.
|
|
|
| Instruction: |
Refer to
the table above for details on which scripts can be used safely and how. |
Guideline M: Applets and Plug-Ins -
Top
| Description: |
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 Section 508 1194.21(a) through (l) |
| Interpretation: |
All 3rd party plug-ins must be 508 compliant and any web page that
uses that 3rd party plug-in must also provide a link for the user to
download the plug-in in the event that they do not already have it.
|
| Instruction: |
Find out if a particular third party plug-in or program is 508
compliant.
Create a link from your web site to a site that the user can
download the plug-in from. |
Guideline N: Electronic Forms - Top
| Description: |
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. |
| Interpretation: |
Use the LABEL tag to
associate labels with form fields.
|
| Instruction: |
To Add a Label to a Form
Using FrontPage 2000
-
Select the label text and the form
field object together
-
Click Insert | Form | Label
more detailed example |
Guideline O: Navigation Links - Top
| Description: |
A method shall be provided that permits users to skip
repetitive navigation links. |
| Interpretation: |
In order for assistive technologies to bypass the repetitive text on
each page, provide an anchor link to bypass this information.
|
| Instruction: |
The simplest method to meet this requirement would be to add text to
your page that states "Skip Navigation Links" and have this
text link to an anchor (Bookmark in FrontPage) that is placed at the beginning of the page
content. (more detailed example) A slightly more advanced method would be to create a 1 pixel graphic
that has an ALT attribute that states "Skip navigation links" and
hyperlink it to the same sort of anchor as described above. This
allows your page to conform to this guideline and yet not affect
your page with any unwanted text.
|
Guideline P: Time Delays - Top
| Description: |
When a timed response is required, the user shall be
alerted and given sufficient time to indicate more time is required. |
| Interpretation: |
Some web pages will automatically update or redirect to another page
without user intervention. For example, a site that provides
timed quizzes would disable the user's ability to continue
answering questions after their time has expired.
|
| Instruction: |
This guideline is fairly self-explanatory but if the functionality
of a timeout is used, then the functionality to extend the timeout
must also be in place. |
<-
Back
|