Section 508 Checklist

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

Any graphics added to your site will need to have an “alt tag” (alternative text) within your HTML code.  This tag describes details of the graphic.  If the graphic is decorative only, you will need to place an empty “alt tag” in your HTML code. 

Example of graphic that adds value:
<img src=”secleavitt.jpg alt=”Photo of H H S Secretary Leavitt at the latest News Conference”> (Note: acronyms should contain spaces or the screen reader will try to read the acronym as a word.)

Example of graphic for decoration:
<img src=”yellowsun.jpg” alt=””>. (Note: Placing this null value will allow the screen reader to skip over the graphic.)

• Every image, video file, audio file, plug-in, etc. has an alt tag.
• Complex graphics (graphs, charts, etc.) are accompanied by detailed text descriptions.
• The alt descriptions describe the purpose of the objects.
• If an image is also used as a link, make sure the alt tag describes the graphic and the link destination.
• Decorative graphics with no other function have empty alt descriptions (alt= "").

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

Multimedia files include audio and video presentations.  Each of these types of files should have an alternative that is synchronized to the original presentation.

• Add captions to your video
• Add audio descriptions
• Create text transcript
• Create a link to the video rather than embedding it into web pages
• Add link to the media player download
• Add an additional link to the text transcript

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

If you are using a graphic that has “hot-spots” for links. 

Ex. You may have a graphic of the US and have area links for each state.

• Does the page provide alternative links to the Image Map?

   

• Do the <area> tags contain an alt attribute?

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

Tables that contain data in columns and rows need to have the headings for the table. 

Example:
Use <th> table header tags for your headings and the <td> table data tags for the data within the tables.

Tables created for layout only, should have a summary statement noting such.  Ex. <table border="0" cellspacing="0" cellpadding="0" summary="This table is used to format page content" width="100%">

• Data tables have the column and row headers appropriately identified (using the <th> tag).
• Tables used strictly for layout purposes do NOT have header rows or columns.

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

Another way to accomplish identifying data cells use the headers and id attributes. This method is NOT recommended for simple tables. The headers and id method should only be used when there is more than one logical level in a table, and when it is necessary to link more than two headers with a data cell.

• Table cells are associated with the appropriate headers (e.g. with the id, headers, scope and/or axis HTML attributes).

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

Because of the potentially serious nature of seizures, developers should be extra careful to avoid any graphics, animations, movies, or other objects which have strobing, flickering, or flashing effects. Developers should also avoid graphics which may induce nausea or dizziness.

• Make sure the page does not contain repeatedly flashing images
• Check to make sure the page does not contain a strobe effect

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

If you are linking to any files that are not HTML, you will need to provide the download for the plug-in on the page.  It is also recommended that you place an HTML equivalent on the page.

Examples:

Powerpoint:  http://www.microsoft.com/downloads/details.aspx?FamilyID=428d5727-43ab-4f24-90b7-a94784af71a4&DisplayLang=en

Excel: http://www.microsoft.com/downloads/details.aspx?FamilyID=c8378bf4-996c-4569-b547-75edbd03aaf0&DisplayLang=en

Word: http://www.microsoft.com/downloads/details.aspx?FamilyID=95e24c87-8732-48d5-8689-ab826e7b8fdf&DisplayLang=en

Adobe:  http://www.adobe.com/products/acrobat/readstep2.html

• A link is provided to a disability-accessible page where the plug-in can be downloaded.

   

• All Java applets, scripts and plug-ins (including Acrobat PDF files and PowerPoint files, etc.) and the content within them are accessible to assistive technologies, or else an alternative means of accessing equivalent content is provided.

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

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.

• When form controls are text input fields use the LABEL element
• When text is not available use the title attribute
• Include any special instructions within field labels.
• Make sure that form fields are in a logical tab order.