| 1.1 |
Use valid, standard web programming code. |
G134: Validating Web pages
G192: Fully conforming to specifications
H74: Ensuring that opening and closing tags are used according to specification
H75: Ensuring that Web pages are well-formed
H88: Using HTML according to spec
|
| 1.2 |
Use appropriate markup to convey document structure. |
G115: Using semantic elements to mark up structure
G117: Using text to convey information that is conveyed by variations in presentation of text
G138: Using semantic markup whenever color cues are used
G140: Separating information and structure from presentation to enable different presentations
H39: Using caption elements to associate data table captions with data tables
H42: Using h1-h6 to identify headings
H43: Using id and headers attributes to associate data cells with header cells in data tables
H44: Using label elements to associate text labels with form controls
H48: Using ol, ul and dl for lists or groups of links
H49: Using semantic markup to mark emphasized or special text
H51: Using table markup to present tabular information
H63: Using the scope attribute to associate header cells and data cells in data tables
H65: Using the title attribute to identify form controls when the label element cannot be used
H71: Providing a description for groups of form controls using fieldset and legend elements
H73: Using the summary attribute of the table element to give an overview of data tables
H85: Using OPTGROUP to group OPTION elements inside a SELECT
SCR21: Using functions of the Document Object Model (DOM) to add content to a page
|
| 1.3 |
Provide meaningful page titles. |
G88: Providing descriptive titles for Web pages
[G115: Using semantic elements to mark up structure]
H25: Providing a title using the title element
|
| 1.4 |
Use headings to introduce sections and sub-sections, and use them in the correct order. |
[G130: Providing descriptive headings]
H42: Using h1-h6 to identify headings
|
| 1.5 |
Use lists to identify series of related items, including navigation menus. |
H48: Using ol, ul and dl for lists or groups of links |
| 2.1 |
Use text to display text, unless formatting that cannot be achieved with CSS is required. |
G140: Separating information and structure from presentation to enable different presentations
C22: Using CSS to control visual presentation of text
C30: Using CSS to replace text with images of text and providing user interface controls to switch
|
| 2.2 |
Use relative sizes for fonts. |
G142: Using a technology that has commonly available user-agents that support zoom
G146: Using liquid layout
G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent
G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not resize
C12: Using percent for font sizes
C13: Using named font sizes
C14: Using em units for font sizes
C28: Specifying the size of text containers using em units
SCR34: Calculating size and position in a way that scales with text size
|
| 2.3 |
Identify the language of text. |
H57: Using language attributes on the html element
H58: Using language attributes to identify changes in the human language
|
| 2.4 |
Use images instead of "ASCII art." |
[H86: Providing text alternatives for ASCII art, emoticons, and leetspeak] |
| 3.1 |
Do not convey information with color alone. |
G14: Ensuring that information conveyed by color differences is also available in text
G182: Ensuring that additional visual cues are available when text color differences are used to convey information
G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
H92: Including a text cue for colored form control labels
|
| 3.2 |
Use contrasting foreground and background colors. |
G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text
G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults
G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
|
| 4.1 |
Provide appropriate "alternate text" for all images. |
G68: Providing a descriptive label that describes the purpose of live audio-only and live video-only content
G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content
G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description
G82: Providing a text alternative that identifies the purpose of the non-text content
G92: Providing long description for non-text content that serves the same purpose and presents the same information
G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
G95: Providing short text alternatives that provide a brief description of the non-text content
G100: Providing the accepted name or a descriptive name of the non-text content
G143: Providing a text alternative that describes the purpose of the CAPTCHA
G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality
G196: Using a text alternative on one item within a group of images that describes all items in the group
H2: Combining adjacent image and text links for the same resource
H24: Providing text alternatives for the area elements of image maps
H30: Providing link text that describes the purpose of a link for anchor elements
H35: Providing text alternatives on applet elements
H36: Using alt attributes on images used as submit buttons
H37: Using alt attributes on img elements
H44: Using label elements to associate text labels with form controls
H45: Using longdesc
H53: Using the body of the object element
H65: Using the title attribute to identify form controls when the label element cannot be used
H67: Using null alt text and no title attribute on img elements for images that AT should ignore
H86: Providing text alternatives for ASCII art, emoticons, and leetspeak
C9: Using CSS to include decorative images
|
| 4.2 |
Provide full descriptions for graphs, diagrams, and other meaningful images. |
G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content
G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description
G92: Providing long description for non-text content that serves the same purpose and presents the same information
|
| 5.1 |
Provide alternate text for each area in client-side image maps. |
H24: Providing text alternatives for the area elements of image maps |
| 5.2 |
Use client-side image maps instead of server-side image maps unless areas cannot be defined with available shapes. |
n/a |
| 6.1 |
Do not convey information with sound alone. |
G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content |
| 6.2 |
Do not automatically play audio. |
G60: Playing a sound that turns off automatically within three seconds
G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically
G171: Playing sounds only on user request
|
| 6.3 |
Provide text transcripts for audio containing speech when it is provided to the public and/or required to be viewed by employees. |
[G158: Providing an alternative for time-based media for audio-only content]
[G159: Providing an alternative for time-based media for video-only content]
[G166: Providing audio that describes the important video content and describing it as such]
|
| 7.1 |
Provide synchronized captions for all multimedia containing essential auditory information when it is provided to the public and/or required to be viewed by employees. |
G9: Creating captions for live synchronized media
G87: Providing closed captions
G93: Providing open (always visible) captions
|
| 7.2 |
Provide audio descriptions for all multimedia that contains essential visual information when it is provided to the public and/or required to be viewed by employees. |
G8: Providing a movie with extended audio descriptions
G58: Placing a link to the alternative for time-based media immediately next to the non-text content
G69: Providing an alternative for time based media
G78: Providing a second, user-selectable, audio track that includes audio descriptions
G173: Providing a version of a movie with audio descriptions
H53: Using the body of the object element
|
| 8.1 |
Provide a means of pausing any moving, blinking, scrolling, or auto-updating information. |
G4: Allowing the content to be paused and restarted from where it was paused
G11: Creating content that blinks for less than 5 seconds
G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)
G186: Using a control in the Web page that stops moving, blinking, or auto-updating content
G187: Using a technology to include blinking content that can be turned off via the user agent
G191: Providing a link, button, or other mechanism that reloads the page without any blinking content
SCR22: Using scripts to control blinking and stop it in five seconds or less
SCR33: Using script to scroll content, and providing a mechanism to pause it
|
| 8.2 |
Do not include content that flashes faster than 3 times per second. |
G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold
G19: Ensuring that no component of the content flashes more than three times in any 1-second period
G176: Keeping the flashing area small enough
|
| 9.1 |
Ensure that links are understandable out of context. |
[G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence]
[G91: Providing link text that describes the purpose of a link]
[G189: Providing a control near the beginning of the Web page that changes the link text]
[H24: Providing text alternatives for the area elements of image maps]
[H30: Providing link text that describes the purpose of a link for anchor elements]
[H33: Supplementing link text with the title attribute]
[H77: Identifying the purpose of a link using link text combined with its enclosing list item]
[H78: Identifying the purpose of a link using link text combined with its enclosing paragraph]
[H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings]
[H80: Identifying the purpose of a link using link text combined with the preceding heading element]
[H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested]
[C7: Using CSS to hide a portion of the link text]
[SCR30: Using scripts to change the link text]
|
| 9.2 |
Provide a means of skipping past repetitive navigation links. |
G1: Adding a link at the top of each page that goes directly to the main content area
G123: Adding a link at the beginning of a block of repeated content to go to the end of the block
G124: Adding links at the top of the page to each area of the content
H50: Using map to group links
H64: Using the title attribute of the frame and iframe elements
H69: Providing heading elements at the beginning of each section of content
H70: Using frame elements to group blocks of repeated material
SCR28: Using an expandable and collapsible menu to bypass block of content
|
| 9.3 |
Avoid using small links. |
n/a |
| 9.4 |
Ensure that same-page links move keyboard focus as well as screen focus. |
G90: Providing keyboard-triggered event handlers
H91: Using HTML form controls and links
SCR2: Using redundant keyboard and mouse event handlers
SCR20: Using both keyboard and other device-specific functions
SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons
|
| 10.1 |
Provide labels or titles for all form fields. |
G83: Providing text descriptions to identify required fields that were not completed
G89: Providing expected data format and example
G130: Providing descriptive headings
G131: Providing descriptive labels
G162: Positioning labels to maximize predictability of relationships
G167: Using an adjacent button to label the purpose of a field
G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input
H44: Using label elements to associate text labels with form controls
H65: Using the title attribute to identify form controls when the label element cannot be used
|
| 10.2 |
Provide legends for groups of form fields. |
[G83: Providing text descriptions to identify required fields that were not completed]
[G89: Providing expected data format and example]
[G130: Providing descriptive headings]
[G131: Providing descriptive labels]
[G162: Positioning labels to maximize predictability of relationships]
[G167: Using an adjacent button to label the purpose of a field]
[G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input]
H71: Providing a description for groups of form controls using fieldset and legend elements
|
| 10.3 |
Ensure that form fields are in a logical tab order. |
G59: Placing the interactive elements in an order that follows sequences and relationships within the content
H4: Creating a logical tab order through links, form controls, and objects
C27: Making the DOM order match the visual order
SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element
SCR27: Reordering page sections using the Document Object Model
SCR37: Creating Custom Dialogs in a Device Independent Way
|
| 10.4 |
Avoid placing non-focusable text between form fields. |
n/a |
| 10.5 |
Ensure that text in form fields can be enlarged. |
G142: Using a technology that has commonly-available user agents that support zoom
G146: Using liquid layout
G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent
G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not resize
C12: Using percent for font sizes
C13: Using named font sizes
C14: Using em units for font sizes
C28: Specifying the size of text containers using em units
SCR34: Calculating size and position in a way that scales with text size
|
| 11.1 |
Identify a header cell for each column and row in simple data tables. |
H51: Using table markup to present tabular information
H63: Using the scope attribute to associate header cells and data cells in data tables
|
| 11.2 |
Identify relationships in complex data tables using id and headers attributes. |
H43: Using id and headers attributes to associate data cells with header cells in data tables |
| 11.3 |
Provide summary attributes for data tables. |
H73: Using the summary attribute of the table element to give an overview of data tables |
| 12.1 |
Provide concise, unique, and understandable titles for frames. |
G115: Using semantic elements to mark up structure |
| 12.2 |
Avoid using hidden, empty, or non-essential frames. |
n/a |
| 13.1 |
Ensure that scripted functions are usable with assistive technologies. |
G10: Creating components using a technology that supports the accessibility API features of the platforms on which the user agents will be run to expose the names and roles, allow user-settable properties to be directly set, and provide notification of changes
G108: Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes
G135: Using the accessibility API features of a technology to expose names and roles, to allow user-settable properties to be directly set, and to provide notification of changes
H44: Using label elements to associate text labels with form controls
H64: Using the title attribute of the frame and iframe elements
H65: Using the title attribute to identify form controls when the label element cannot be used
H88: Using HTML according to spec
H91: Using HTML form controls and links
SCR21: Using functions of the Document Object Model (DOM) to add content to a page
|
| 13.2 |
Ensure that significant interactions can be performed with both keyboard and mouse. |
G90: Providing keyboard-triggered event handlers
H91: Using HTML form controls and links
SCR2: Using redundant keyboard and mouse event handlers
SCR20: Using both keyboard and other device-specific functions
SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons
|
| 13.3 |
Avoid changing focus unexpectedly. |
G13: Describing what will happen before a change to a form control that causes a change of context to occur is made
G80: Providing a submit button to initiate a change of context
G107: Using "activate" rather than "focus" as a trigger for changes of context
H32: Providing submit buttons
H84: Using a button with a select element to perform an action
|
| 13.4 |
Avoid changing content unexpectedly. |
G13: Describing what will happen before a change to a form control that causes a change of context to occur is made
G80: Providing a submit button to initiate a change of context
G107: Using "activate" rather than "focus" as a trigger for changes of context
H32: Providing submit buttons
H84: Using a button with a select element to perform an action
|
| 14.1 |
Use accessible embedded objects whenever possible. |
G10: Creating components using a technology that supports the accessibility API features of the platforms on which the user agents will be run to expose the names and roles, allow user-settable properties to be directly set, and provide notification of changes
G108: Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes
G135: Using the accessibility API features of a technology to expose names and roles, to allow user-settable properties to be directly set, and to provide notification of changes
H44: Using label elements to associate text labels with form controls
H64: Using the title attribute of the frame and iframe elements
H65: Using the title attribute to identify form controls when the label element cannot be used
H88: Using HTML according to spec
H91: Using HTML form controls and links
SCR21: Using functions of the Document Object Model (DOM) to add content to a page
|
| 14.2 |
If an inaccessible embedded object must be used, provide an accessible alternative that includes the same content and functionality. |
H53: Using the body of the object element |
| 15.1 |
Provide natively accessible downloadable documents whenever possible. |
G108: Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes
G135: Using the accessibility API features of a technology to expose names and roles, to allow user-settable properties to be directly set, and to provide notification of changes
H44: Using label elements to associate text labels with form controls
H64: Using the title attribute of the frame and iframe elements
H65: Using the title attribute to identify form controls when the label element cannot be used
H88: Using HTML according to spec
H91: Using HTML form controls and links
SCR21: Using functions of the Document Object Model (DOM) to add content to a page
|
| 15.2 |
If a downloadable document cannot be made natively accessible, provide an accessible alternative that includes the same content and functionality. |
n/a |
| 16.1 |
Notify users of time limits and provide a means to extend time if possible. |
G4: Allowing the content to be paused and restarted from where it was paused
G133: Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit
G180: Providing the user with a means to set the time limit to 10 times the default time limit
G198: Providing a way for the user to turn the time limit off
SCR1: Allowing the user to extend the default time limit
SCR16: Providing a script that warns the user a time limit is about to expire
SCR33: Using script to scroll content, and providing a mechanism to pause it
SCR36: Providing a mechanism to allow users to display moving, scrolling, or auto-updating text in a static window or area
|
| 16.2 |
Do not automatically refresh the current page. |
n/a |
| 17.1 |
When using tables for layout, ensure that reading order is logical. |
G57: Ordering the content in a meaningful sequence
H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline
H56: Using the dir attribute on an inline element to resolve problems with nested directional runs
C6: Positioning content based on structural markup
C8: Using CSS letter-spacing to control spacing within a word
C27: Making the DOM order match the visual order
|
| 17.2 |
When using style sheets for layout, ensure that reading order is logical. |
G57: Ordering the content in a meaningful sequence
H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline
H56: Using the dir attribute on an inline element to resolve problems with nested directional runs
C6: Positioning content based on structural markup
C8: Using CSS letter-spacing to control spacing within a word
C27: Making the DOM order match the visual order
|
| 17.3 |
Avoid horizontal scrolling. |
n/a |