Section 508 Workshop

Example Page

(Compliant)

<- Back

Guideline A: Non-Text Elements

Question: Which image below needs an ALT attribute?

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.

Guideline C: Color

How can we represent the following information in a different format that does not rely on color?

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.

Question:. What additional information does this image map require?
Answer: We must provide ALT attributes for all areas in an image map.

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!

Guideline G & H: Data Tables

Data tables need additional information to associate data in the table with column and/or row headings.

Question: What additional information does this data table need?
Answer: We must identify the column heading cells with the attribute SCOPE="col" and identify the row heading cells with the attribute SCOPE="row".

Guideline J: Flicker Rate

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.

Question: What tool does this page need in order to view the linked document?
Answer: Since the type of document that we are downloading is a PDF, we need to provide a link to download Adobe Acrobat Reader.

Guideline N: Electronic Forms

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.

Question: How do you associate a text label with it's associated form field?
Answer: We must use the LABEL tag to identify the label text, and use the ID attribute in the form field's tag to identify which label the field belongs to.

Guideline O: Navigation Links

Consistent pages generally have repetitive navigation links on every page.  A screen reader must read through those 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. We must provide a way for the user to bypass the navigation links and skip right to the content of the page.

Question: How can we provide a means to skip past the navigation links?
Answer:  Place an anchor (bookmark) at the start of the page content.  Then create a hyperlink at the start of the navigation links that links to the anchor (bookmark).  This hyperlink should be the first link available to the user, allowing them to select it before the rest of the links are read.

<- Back