The following checklist covers all aspects of Section 508. Use this as a guide to ensure your application is in compliance.
Multimedia
Designing content accessible to those with audio or visual disabilities
- For all pages that contain audio or video:
o Does it address auditory issues for those with hearing disabilities?
¨ If not, create a detailed transcript describing the presentation.
o Does it address visual issues for those with visual disabilities?
¨ If not, create voiceovers for the presentation.
Color
Designing content accessible to the color blind
- For all pages that use color to emphasize important text:
o Are hyperlinks styled with a significantly different color than regular text?
¨ If not, change the text color to show a strong contrast between hyperlinks and regular content.
o Is color used to describe numbers?
¨ If so, use symbols or labels to clearly distinguish the characteristic of the number.
o Are you using color to signify a special meaning? For example, using red to denote a required field.
¨ If so, clearly describe what the meaning. If a field is required, use an asterisk “*” and describe at the top the meaning of the symbol.
Accessibility without Style Sheets
Designing content that is readable without a style sheet
- For all pages that use a style sheet:
o Is all content readable when the style sheet is removed?
¨ If not, rewrite the HTML code using standards compliant techniques so that all of the information renders correctly.
o Does your page use CSS for positioning?
¨ Consider using relative positioning only. Utilize headers, paragraphs, lists, and tables to ensure that the content is readable if a style sheet were not present, rather than using frequent <DIV> and <SPAN> tags that are confusing if a style sheet isn’t available.
o Does your page use CSS to describe something?
¨ CSS, by itself anyways, should never be used to describe the importance of content. If the style sheet were to be removed, the user should be able to distinguish the importance of what was being styled. To emphasize content with CSS, consider using <EM> or <STRONG> tags to describe the information and then style those tags in CSS.
Image Maps
Designing content that describes the geometric shapes within an image map
- For all pages that utilize image maps:
o Does the page use server-side image maps?
¨ If so, convert your server-side image maps to client-side image maps.
o Does the <IMG> tag contain an ALT attribute?
¨ If not, describe the appearance of the image map in the ALT attribute.
o Does the <AREA> tag contain an ALT attribute?
¨ If not, describe the hyperlink of the geometric shape in the ALT attribute.
o Does the page include an alternative text link for those who cannot handle image maps?
¨ If not, create a counterpart for every hyperlink within the image map.
Tables
Designing content that describes header and data cells for tables
- For all pages that utilize tables:
o Does your table contain actual data?
¨ If not, consider moving the content into a <DIV> rather than using it as a layout mechanism.
o Does your table utilize column headers to describe the data?
¨ If not, change the cells that describe data from <TD> tags to <TH> tags. Use ID and HEADER attributes to associate the headers with content.
o Does your table utilize row headers to describe data
¨ If not, use <STRONG> and <EM> tags to show a relationship with the content. While you cannot use the <TH> tag as a row header, you can use ID and HEADER attributes to describe the relationship within the table.
o Does your table have two or more logical levels of row or column headers?
¨ If so, use ID, SCOPE, and HEADER attributes to describe the data in each column and row. Also, utilize <TBODY>, <CAPTION>, <COLGROUP>, and <THEAD> tags to better describe and format the content.
Frames
Designing content that properly uses frames
- For all pages that utilize frames:
o Does your page clearly define the purpose of each frame and are frames even necessary?
¨ If not, either (1) remove frames entirely because most assistive technologies do not support frames, or if absolutely necessary (2) add text to the body of each frame that clearly identifies its purpose.
o Do the <FRAME> and <FRAMSET> tags include a TITLE attribute?
¨ If not, detail what type of content is included within each frame.
o Do the hyperlinks within each frame properly target the correct frame?
¨ If not, be sure to add the TARGET attribute within every hyperlink that isn’t intended to open in the current frame.
o Is your page available in a format that doesn’t require frames?
¨ If not, give the user the option to break out of frames and include (within the <NOFRAMES> tag) alternative text for browsers that don’t support it.
Flicker
Designing content that is between a flicker frequency of 2Hz and 55Hz
¨ Ensure that all animations do not flicker faster 55Hz per second.
JavaScript and Other Scripting Languages
Designing content that uses scripts readable by assistive technologies
- For all pages that utilize a scripting language:
o Is your navigation menu script accessible to assistive technologies?
¨ If not, ensure that the navigation content is not loaded into an array, but instead included within an unordered list—which can be styled and controlled with CSS and JavaScript.
o Are you using the <NOSCRIPT> tag?
¨ Create a text version for browsers who cannot handle scripting languages.
o Does script manipulated content include a respective description attribute?
¨ Ensure that content manipulated with a scripting language includes a readable description, including ALT and LONGDESC attributes.
o Are client-side form validation scripts readable to assistive technologies?
¨ Ensure that when a user enters an invalid item, they are alerted in a modal window which item is invalid. Remember not to refer to the color or font-weight of a required field, but to focus the selection to the field.
o Does the developer ensure that the field is selected to bring attention to a change or update within a page.
¨ Ensure that the field is selected after any changes are made. If fields are auto-populated, the developer should ensure the form field is selected so that assistive technologies know to read it.
o Are you using event handlers that are not supported by handicap devices?
¨ Ensure that scripting is device independent. (onDblClick, for example, is dependent on a device on the availability of a mouse.)
Other Plug-Ins
Designing content that uses plug-ins readable by assistive technologies
- For all pages that utilize external plug-ins such as Java, Flash, etc.:
o Does your page include a link so the user can download the plug-in?
¨ If not include a link so the user can download it.
¨ Ensure that the plug-in is accessible to assistive technologies.
¨ Ensure that the document is accessible to assistive technologies.
o Note: PowerPoint is usually not accessible and must be converted to HTML to be in compliance.
Form Handling
Designing forms that can by handled by assistive technologies
- For all pages that utilize forms:
o Does your form reside within a table?
¨ If so, remove it from the table. It is not proper to include field titles within table cells. Instead, utilize the <LABEL> tag. Always define an <INPUT> tag with a preceding <LABEL> tag to describe the field.
o Does each field include a TABINDEX attribute?
¨ If not, ensure that the TABINDEX is ordered properly so the focus will move in the proper order.
Navigation (skipping)
Designing content that gives the user the ability to skip repetitive navigation
- For all pages that utilize a navigation menu:
o Does your page give the user the ability to skip the navigation menu to avoid repetitive links?
¨ If not, create a bookmark where your content begins (<A NAME=”content” />) and create a hyperlink at the beginning of your navigation menu to tell the assistive technology it can skip ahead.
Timed Responses
Designing content that gives sufficient time to give a response
- For all pages that require a timed response:
o Does your page force the user to logout after a set amount of time without first alerting the user?
¨ Ensure that the application first alerts the user when the session is about to end and allow them to opportunity to request more time.
Images
Designing content that has a text-equivalent for anything that is not readable by assistive software (images)
- For all pages that have images:
o Do all of the images within your web pages include ALT attributes that thoroughly describe what is being presented?
¨ Ensure that every image contains an ALT attribute. If the description is longer than one sentence, also include a LONGDESC attribute.
Video
Designing content that has a text-equivalent for anything that is not readable by assistive software (video)
- For all pages that have video or other types of animation:
o Does the page display animations that are not defined?
¨ Ensure that every image contains an ALT attribute. If the description is longer than one sentence, also include a LONGDESC attribute. If the image/animation is for decorative purposes, put it in CSS or include empty ALT attributes.
o Does the page display video that isn’t described?
¨ Include a detailed transcript of the video.
Objects and Applets
Designing content that has a text-equivalent for anything that is not readable by assistive software (objects or applets)
- For all pages that have objects or applets:
o Do all of the objects or applets within your web pages include ALT attributes that thoroughly describe what is being presented?
¨ Ensure that every object or applet contains an ALT attribute. If the description is longer than one sentence, also include a LONGDESC attribute.
Equivalent Pages
To be used under special circumstances when it is impossible to be in compliance
- For all pages that cannot be in compliance:
¨ Create text equivalent pages for content that isn’t in compliance
¨ Create a synchronization policy for content to be updated on compliant and non-compliant versions
