Section 508 Workshop
Example Page
(Not Compliant)
Guideline A: Non-Text Elements
Question: Which image below needs an ALT attribute?
|
|
Reading a book in a comfy chair is very relaxing and rewarding. |
|
|
As shown in the picture to the left, the Brontosaurus had a long neck, a long tail and walked on four feet.. |
Answer: Both. The image of the chair is not essential to the information on the page. However, Guideline A tells us that all non-text elements must have an ALT attribute even if that attribute's value is empty.
How can we represent the following information in a different format that does not rely on color?
Items listed in green are required.
Required
Backpack
Socks
Toothbrush
Map
Not-Required
Lantern
Rope
Thermal underwear
Anti-venom kit
Fire extinguisher
Bug Spray
Guideline F: Client-Side Image Maps
Image maps provide a means to make parts of an image "click-able". User's of screen readers would have a difficult time navigating the image map without some additional information.
![]() |
Click on the butterfly's left wing to be transported to
an alternate universe!
Click on the butterfly's right wing to get answers to the meaning of life! |
Data tables need additional information to associate data in the table with column and/or row headings.
| 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 |
Question: Which image(s) is flashing between 2Hz and 55Hz?
![]() |
![]() |
![]() |
![]() |
Answer: I don't know. But the KISS method tells us that we should not include these types of images unless we want to invest the time into researching the exact refresh times in order to be sure that the images are compliant. Besides, most animated images only detract and distract from the true importance of a web page.
Guideline M: Applets and Plug-Ins
In order to make our page(s) more accessible, we want to provide all the necessary tools to view our page(s). If these tools include programs above and beyond the web browser, then we must provide a link to download the tool.
|
Not Very Accessible |
|||
|
You can download my course outline, but only if you have Adobe Acrobat Reader. What? You don't have Adobe Acrobat Reader? Too bad! |
|
Labels are necessary to identify what information is to be provided for each form field. Here the text in the left column acts as a label to the form fields in the right column to a visual web user. However, screen readers have a difficult time associating the label with the form field without extra assistance.
| Last Name: | |
| Phone Number: |
Consistent pages may have navigation links on every page. A screen reader must read through the navigation links every time a page in the site is loaded. This can become monotonous and time consuming especially if the navigation link list is lengthy.
| Skip Navigation Links Page 1 Page 2 Page 3 Page 4 Page 5 |
The quick brown fox jumped over the lazy
dogs. The quick brown fox jumped over the lazy dogs. The
quick brown fox jumped over the lazy dogs. The quick brown fox
jumped over the lazy dogs.
The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. |
| The quick brown fox jumped over the lazy dogs.
The quick brown fox jumped over the lazy dogs. The quick brown
fox jumped over the lazy dogs. The quick brown fox jumped over
the lazy dogs.
The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. |