Procedures for
Accessible Web Design

• Standards
• Guidelines
• Examples
• Layouts
• Tools
• About

Examples

What compliance and non-compliance look like

The following are Section 508 rules with sub-rules as interpreted by UsableNet with examples of compliant and non-compliant pages.

1. A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
   • Sub-rules
     1. Non spacer IMG with equivalent ALT
     2. Non spacer IMG with valid ALT
        • Non-compliant example (rule a.ii)
        • Compliant example (rule a.ii)
     3. Non spacer IMG needs LONGDESC
     4. Non spacer IMG with valid LONGDESC
        • Non-compliant example (rule a.iv)
        • Compliant example (rule a.iv)
     5. APPLET with equivalent ALT
     6. APPLET with valid ALT
     7. APPLET with valid CONTENT
     8. AREA with equivalent ALT
     9. AREA with valid ALT
     10. Audio/video OBJECT with equivalent CONTENT
     11. Audio/video OBJECT with valid CONTENT
     12. FRAME with valid LONGDESC
     13. Image OBJECT with equivalent CONTENT
     14. Image OBJECT with valid CONTENT
     15. INPUT with equivalent ALT
     16. INPUT with valid ALT
     17. Linked AUDIO with equivalent CONTENT
     18. No LONGDESC for spacer IMG
     19. OBJECT with equivalent CONTENT
     20. OBJECT with valid CONTENT
     21. SCRIPT with equivalent NOSCRIPT
     22. SCRIPT with valid NOSCRIPT
     23. Spacer IMG with valid ALT
         • Non-compliant example (rule a.xxiii)
         • Compliant example (rule a.xxiii)
2. Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
   • Sub-rules
     1. Multimedia with equivalent audio description
     2. Multimedia with synchronized alternative
3. Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
   • Sub-rules
     1. Color is not essential
        • Non-compliant example (rule c.i)
     2. Colors are visible
        • Non-compliant example (rule c.ii)
4. Documents shall be organized so they are readable without requiring an associated style sheet.
   • Sub-rules
     1. Style sheets should not be necessary
   • Non-compliant example (rule d)
   • Compliant example (rule d)
5. Redundant text links shall be provided for each active region of a server-side image map.
   • Sub-rules
     1. Links are needed for server-side image map
   • Non-compliant example (rule e)
   • Compliant example (rule e)
6. 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.
   • Sub-rules
     1. No server-side image maps should be used
   • Non-compliant example (rule f)
   • Compliant example (rule f)
7. Row and column headers shall be identified for data tables.
   • Sub-rules
     1. Cell of data table should refer to headers
        • Non-compliant example (rule g.i)
     2. Data table should have headers
        • Non-compliant example (rule g.ii)
     3. Data tables should be defined by TABLE tag
        • Non-compliant example (rule g.iii)
   • Compliant example (rule g)
8. 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.
   • Sub-rules
     1. Multiple headers should be marked in data tables
   • Non-compliant example 1 (rule h)
   • Compliant example 1 (rule h)
   • Non-compliant example 2 (rule h)
   • Compliant example 2 (rule h)
9. Frames shall be titled with text that facilitates frame identification and navigation.
   • Sub-rules
     1. FRAME with valid TITLE
     2. IFRAME with valid TITLE
   • Non-compliant example (rule i)
   • Compliant example (rule i)
10. Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
    • Sub-rules
      1. Avoid causing the screen to flicker
      2. GIFs do not cause the screen to flicker
    • Non-compliant example (rule j)
11. A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
    • Sub-rules
      1. Text only equivalent page may be needed
12. 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.
    • Sub-rules
      1. Scripts are accessible
         • Non-compliant example (rule l)
         • Compliant example (rule l)
13. 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).
    • Sub-rules
      1. Link to plug-in is present
         • Non-compliant example (rule m)
         • Compliant example (rule m)
14. 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.
    • Sub-rules
      1. Form is accessible
         • Non-compliant example (rule n)
         • Compliant example (rule n)
15. A method shall be provided that permits users to skip repetitive navigation links.
    • Sub-rules
      1. Skip repetitive links
16. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
    • Sub-rules
      1. No auto redirect is used
         • Non-compliant example (rule p)
         • Compliant example (rule p)
      2. No auto refresh is used
         • Non-compliant example (rule p)
         • Compliant example (rule p)

| | |