Web Accessibility Best Practices

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

Comparison with W3C WCAG 1.0

Comparison of WCAG 1.0 and Best Practices Requirements
Functional
Requirements
W3C WCAG 1.0 Requirement Comparison
Standards
Support Web Standards
  • Same: Use and validate resources to W3C specifications (11.1)
  • Same: Avoid deprecated features of W3C specifications to insure interoperability with future user agents (11.2)
Styling
Liquid Design for Content Reflow
  • Same: Images should not be used to stylize text; use CSS to stylize text (3.1)
  • Same: Use percentages for specifying column widths, 'em' for box heights and percentages for font-sizes (3.4)
Layout
  • Same: Use CSS float and clear properties for creating columns instead of tables. Make sure when CSS is disabled or layout table markup is disabled that the linearized document makes sense (5.3)
  • Same: If table markup is used for layout, do not use th or caption elements or use attributes like headers or scope within the table markup (5.4)
Colors
  • Same: Color should not be the only way to convey information. Using only color to represent the grade on a test score or instructing, "Press the green button to continue," would fail this requirement (2.1)
  • Different: Use CSS to make it easy for users to override author defaults. Allow preferred color settings rather than defining a "high" contrast color set (2.2)
  • Same: Use text markup and CSS instead of images to define the foreground and background colors of text (3.1)
  • Same: Use CSS to stylize the color of content in a web resource (3.3)
  • Same: Documents must be readable when author styling is removed (6.1)
Fonts
  • Same: Use text markup and CSS instead of images to stylizing text (3.1)
  • Same: Use CSS to stylize text (3.3)
Navigation
Unique Titles
  • Same: Headers need to be used to identify major and minor sections of web resources (3.5)
  • Same: The use of headers (h1-h6 and the title attribute are a means to distinguish sections and groupings of content (13.8)
Headings
  • Same: Headers need to be used to identify major and minor sections of web resources (3.5)
  • Same: Grouping information in markup and providing the user with orientation information is very important for navigation (12.3)
  • Same: Consistency in navigation makes it easier for all users to navigate web resources, especially people with disabilities (13.4)
  • Same: The use of headers (h1-h6 and the title attribute are a means to distinguish sections and groupings of content (13.8)
Menus and Navigation Bars
  • Same: Grouping information in markup and providing the user with orientation information is very important for navigation (12.3)
  • Same: Consistency in navigation makes it easier for all users to navigate web resources, especially people with disabilities (13.4)
  • Same: Using consistent markup for navigation bars allows users and assistive technologies a means to identify, skip over and move to navigation bars (13.5)
  • Same: Grouping related links using list markup and the title attribute provides a means to identify, skip over or move to the group of links (13.6)
Forms
  • Same: All form controls are required to have labels (12.4)
Language
  • Same: All changes in language need to be identified with a lang attribute value (4.1)
  • Same: Include lang attribute in html element to indicate the default language of the document (4.3)
Tabular Data Tables
  • Same: Use th to indicate row and column header cells and caption to give the data table a title (5.1)
  • Same: Use headers and id attributes to identify headers cells in complex data tables. If the first cell in a table is a header use the scope attribute to define it as a row or column header (5.2)
  • Same: Use summary attribute of the table to provide a summary of what the author intended the viewer to know about the table (5.5)
Lists
  • Same: CSS can be used for styling the bullets and numbering of ordered, unordered and definition list markup for lists of information (3.6)
  • Same: Grouping related links using list markup and the title attribute provides a means to identify, skip over or move to groups of links (13.6)
Links
  • Same: Need redundant text links for server-side image maps (1.2)
  • Same: Need redundant text links for client-side image maps (1.5)
  • Same: Clearly identify the target of each link (13.1)
Accesskeys
  • Same: Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls (9.5)
Frames
  • Same: Provide a meaningful title that describes the purpose of each frame (12.1)
  • Different: Avoid the use of frames since frames have inherent accessibility problems. Problems include text disappearing when users resize the size of text using browser zoom features and users identifying changes in frame content when using speech and Braille technologies to render web content
  • Optional: Provide a description of the frameset for people to understand the overall organization of the frames (12.2)
Automation
Scripting
  • Same: Text equivalents for dynamic content must be updated when content changes (6.2)
  • Same: If a script cannot be made accessible, there needs to be an alternative accessible way to provide the same information or functionality (6.3)
  • Same: Support the keyboard: use device independent or keyboard redundant event handlers for elements with mouse events (6.4, 9.2)
  • Same: Provide a means to pause visually dynamic content (7.3)
  • Same: Ensure that any element that has its own interface can be operated in a device-independent manner (9.2)
  • Same: For scripts, specify logical event handlers rather than device-dependent event handlers (9.3)
Keyboard
  • Same: Support the keyboard: use device-independent or keyboard-redundant event handlers for elements with the mouse events. Make sure the content can be accessed with keyboard commands only (6.4, 9.2)
  • Same: Provide a means to pause visually dynamic content (7.3)
  • Similar: Use accessibility APIs or provide alternatives to embedded objects (8.1)
  • Same: For scripts, specify logical event handlers rather than device-dependent event handlers (9.3)
Objects and Applets
  • Same: Since embedded objects and applets are not accessible, there needs to be an alternative, accessible way to provide the same information or functionality. For example, provide an external link for video and audio resources so they may be played in external multimedia players (6.3)
  • Same: Use accessibility APIs or provide alternatives to embedded objects in order to support future accessibility enhancements that will make embedded applets and objects more accessible (8.1)
Animations (Flicker)
  • Same: Scripting, images, movies or other dynamic content that causes animation or movement should not cause a visual rendering to flicker between 2Hz and 50 Hz (7.1)
Timed Responses
  • None
  • Different: WCAG 1.0 has no requirement to extend the time of resources that have a required timed response. Time response sensitive resources must give the user an alert and sufficient time to indicate that more time is required
  • Different: In systems that require user authentication, users can configure the system to provide them with the extra time they need to respond to timed operations
Text Descriptions
Text Equivalents for Images, Pictures, Charts and Diagrams
  • Same: Provide text descriptions for all non-text content (1.1)
  • Same: Update text descriptions when non-text content changes (6.2)
Text Equivalents for Audio
  • Same: Text transcriptions are required for speech and other sounds of an audio track (1.1)
  • Same: Audio captions need to be synchronized with video track (1.4)