Guidelines

Web Content Accessibility Guidelines 2.1

Provide text alternatives for non-text content (e.g. images)
Non-text Content  -  Level A   WCAG 2.0

All images and other non-textual items should have a text alternative that describes what it is, so that blind users are able to understand these items.

  • Provide all images with a descriptive ALT attribute, or an empty string (alt="") if it is a purely decorative image.
  • Provide a descriptive TITLE attribute for all embedded audio/video, non-image charts, Flash, form elements and other items that require textual explanation in order to be understood.
  • Do not use CAPTCHA that relies on visual identification
  • Decorative images such as icons should preferably be displayed using CSS rather than directly in HTML

How to test: Use WAVE or axe and look for images with missing ALT attributes. Manually check that the text descriptions provided by ALT and TITLE attributes are clear and descriptive

External links: W3C
Provide alternatives for time-based media (audio and video)
Audio-only and Video-only (Prerecorded)  -  Level A   WCAG 2.0

Audio and video should be provided with a text-based transcript so that the content is accessible to blind or deaf users.

  • Prerecorded video without an audio track should have a textual transcript describing what it shown in the video.
  • Prerecorded audio should have a textual transcript describing what is said or played in the audio

How to test: Check if audio or video is present. If so, check that a transcript is available.

External links: W3C
Captions (Prerecorded)  -  Level A   WCAG 2.0

Pre-recorded audio should be captioned with text describing what is said and what happens, so that the audio is accessible to deaf users.

How to test: Check if audio is present. If so, check that captions are available.

External links: W3C
Audio Description or Media Alternative (Prerecorded)  -  Level A   WCAG 2.0

All video with an audio track should be made accessible to blind users, by providing descriptions of everything that happens.

Descriptions can be provided either textually or as part of the audio track.

How to test: Check if video is present. If so, check that textual or audio descriptions are available.

External links: W3C
Audio Description (Prerecorded)  -  Level AA   WCAG 2.0
External links: W3C
Content can be presented in different ways (e.g. through a screen reader) without losing info or structure
Information and Relationships  -  Level A   WCAG 2.0

This is to ensure that being able to see the page, including its visual layout and color use, is not required in order to be able to understand the information presented.

  • The structure and meaning of the page can still be understood when all CSS styling is removed.
  • HTML elements should be used to define the structure and meaning of the elements on the page, including headings, lists, paragraphs, and table elements (including row and column headers).

How to test:

  • Use the Web developer toolbar to remove all CSS styling.
  • Use a tool like Accessibility Bookmarklets to check headings.
  • Check manually that the correct HTML markup is used for elements such as tables, headings, and lists.
External links: W3C
Meaningful Sequence  -  Level A   WCAG 2.0

This is to ensure users do not need to be able to see the visual layout of the page in order to understand the correct order of the information presented.

  • When all CSS styling of the page is removed, the elements on the page are still in a logical reading order in the HTML code.
  • Make sure the tabbing order of the page elements is logical. If necessary, use the tabIndex property to enforce the correct tabbing order.

How to test:

  • Use the Web developer toolbar to remove all CSS styling.
  • Check manually that the elements on the page are in a logical reading order and that the tabbing order is logical.
External links: W3C
Sensory Characteristics  -  Level A   WCAG 2.0

Users should not be required to identify elements solely by their shape or their position on the page.

  • Some examples of what NOT to say: "the button on the right", "the left-hand sidebar", "the round button", "the sounds that chimes".
  • In on-screen help texts and instructions, identify elements by multiple characteristics, such as the label, color and position, e.g. "the green button 'Next' on the right"
  • When using beeps or other sound cues to inform the user of an event, display a textual message as well.

How to test: Check manually.

External links: W3C
Identify Input Purpose  -  Level AA   WCAG 2.1
Tags: forms

The attribute provides metadata to let the user know the intent of the input. It also provides autofill capabilities so previous entries can populate a form.

External links: W3C
Make sure content is readable and the foreground contrasts sufficiently with the background
Use of Color  -  Level A   WCAG 2.0

Color should not be used as the only means of conveying information, because blind users are not able to see colors, and colorblind or older users may not see colors correctly.

  • When using color to convey information, use another means (like text) to convey the same information in another way
  • Do not rely solely on color to identify links. Distinguish links from regular text by underlining them, bolding them, showing an icon next to each link, or some other means other than color.
  • In forms, use not just color but also text labels to identify required fields or fields with errors

How to test: Check manually.

External links: W3C
Audio Control  -  Level A   WCAG 2.0

For audio that plays longer than 3 seconds, users should be able to pause or stop the audio, or change the volume of the audio.

This is to ensure that blind users can hear their screen reader software speak aloud the page. The spoken text is not interrupted by an audio clip.

  • Offer audio controls for all audio clips

How to test: Check if audio is present. If so, check that controls are present.

External links: W3C
Contrast (Minimum)  -  Level AA   WCAG 2.0

How to test: Use a color contrast analyzer to compare the text color to the background color.

External links: W3C
Reflow  -  Level AA   WCAG 2.1

Pixel height and width for this to start occurring:

  • Vertical scrolling at a width equivalent to 320 pixels.
  • Horizontal scrolling at a height equivalent to 256 pixels.

External links: W3C
Non-text Contrast  -  Level AA   WCAG 2.1

Visual objects refers to:

  • User Interface Components: Interface components that do not have accompanying text must adhere to the contrast rule. Inactive components are exempt.
  • Graphical Objects: Graphics such as charts and graphs, unless a particular presentation of those graphics is essential to convey its information.

How to test: Use a color contrast analyzer to compare adjacent colors.

External links: W3C
Text Spacing  -  Level AA   WCAG 2.1
Tags: CSS, text

The text-based CSS settings are as follows:

  • Line height (line spacing) to at least 1.5 times the font size.
  • Spacing following paragraphs to at least 2 times the font size
  • Letter spacing (tracking) to at least 0.12 times the font size.
  • Word spacing to at least 0.16 times the font size.

How to test: Use the following bookmarklet to activate the minimum CSS values to a site: Text Spacing.

Just drag the link to your bookmarks bar on your browser to use it on any page.

Check if activating the bookmarklet causes any text or content to become unreadable or cut-off.

External links: W3C
Content on Hover or Focus  -  Level AA   WCAG 2.1

Further description of the three rules:

  • Dismissable: The user can close the content without moving the pointer or focus (Esc Key).
  • Hoverable: The pointer can move over the additional content without it disappearing.
  • Persistent: The content remains until closed by the user, or if hover/focus is moved away.

External links: W3C
Make all functionality available from a keyboard
Keyboard  -  Level A   WCAG 2.0

This ensures that the site can be accessed using a keyboard only.

Blind users cannot use a mouse; they must use the keyboard to navigate Web pages. Users with hand tremors and other motor skills also have trouble using a mouse.

  • All clickable items should also be selectable using the keyboard
  • Where "drag and drop" functionality is used, a keyboard-based "cut and paste" alternative should be offered
  • Do not use non-standard interface elements that are not keyboard-accessible but can be controlled with a mouse only

How to test: Check manually by tabbing through the page and checking all interactive elements for keyboard accessibility.

External links: W3C
No Keyboard Trap  -  Level A   WCAG 2.0

Users navigating a Web page using the keyboard should not become trapped on a particular element or section of the page.

This is a particular issue for Java applets, Flash files and other plugins. Once the user has entered one of these, they must be able to leave them again using the keyboard only.

How to test: Check manually by tabbing through the page and checking for keyboard traps.

External links: W3C
Give users enough time to read and use content
Timing Adjustable  -  Level A   WCAG 2.0

This allows users to extend or turn off time limits. For each time limit one of the following should be true:

  • The time limit can be turned off beforehand
  • The time limit can be extended beforehand
  • The user is warned before a time limit expires and given at least 20 seconds to extend the time limit

Exceptions can be made where the time limits are essential or longer than 20 hours.

How to test: Check manually if time limits are present. If so, check that they are compliant.

External links: W3C
Pause, Stop, Hide  -  Level A   WCAG 2.0

Users should be able to pause, stop or hide any moving, blinking or automatically updating content on the page.

Content that is constantly changing can be problematic for users who have trouble reading text quickly as well as anyone who has trouble tracking moving objects. It can also cause problems for screen reader software.

  • This pertains to content that starts automatically and lasts more than five seconds
  • This can be onscreen text as well as video, audio or animation

How to test: Check manually if moving, blinking or automatically updating content is present. If so, check that it is compliant.

External links: W3C
Do not use content that can cause seizures
Three Flashes or Below Threshold  -  Level A   WCAG 2.0

This ensures that users with epilepsy and other who have photosensitive seizure disorders do not get seizures from content that flashes onscreen.

How to test: Check manually if flashing occurs. If so, check that it is compliant.

External links: W3C
Help users to navigate, find content, and determine where they are
Bypass Blocks  -  Level A   WCAG 2.0

This allows blind users, who use screen reader software, to skip the page header, navigation menus and other content that is repeated on every page, and go straight to the main content on the page.

How to test:

  • Use the Web developer toolbar to remove all CSS styling
  • Check for the presence of "skip" links
External links: W3C
Page Titled  -  Level A   WCAG 2.0

Each page should have a title clearly describing the topic or purpose of that page.

This helps users orient themselves within the site and understand the purpose of the current page.

  • Use the <title> tag in the HTML page header

How to test: check what is shown on the browser tab, or bookmark the current page.

External links: W3C
Focus Order  -  Level A   WCAG 2.0

This allows blind users and others accessing the site through a keyboard to move through the page elements in a logical reading order

  • The tabIndex property can be used to enforce a certain tabbing order
  • When the user leaves a modal dialog box on the page, they should not lose their focus on the page and have to start from the top of the page again. Instead, the element that had the focus when the modal dialog opened should get the focus again

How to test:

  • Tab through the interactive elements on the page
  • Open and close modal windows using the keyboard only
External links: W3C
Link Purpose (In Context)  -  Level A   WCAG 2.0
Tags: links

The purpose or target of each link should be clear from the text (label) of that link, or from the sentence in which the link appears

  • Make sure each link is clearly labeled
  • When the link text or context is not clear enough, give the link a title property with a clear description of the link purpose or target, e.g. <a href="page.html" title="View more details about this person">John Smith</a>

How to test: Manually check each link on the page to verify that it is clearly labeled.

External links: W3C
Make it easier for users to operate functionality through various inputs beyond keyboard
Pointer Gestures  -  Level A   WCAG 2.1

If a complex path or multi-touch gesture is essential, such as a signature, it is exempt.

External links: W3C
Pointer Cancellation  -  Level A   WCAG 2.1

For functionality that can be operated using a single pointer, at least one of the following is true:

  • No Down-Event: The down-event of the pointer is not used to execute any part of the function.
  • Abort or Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion.
  • Up Reversal: The up-event reverses any outcome of the preceding down-event.
  • Essential: Completing the function on the down-event is essential.

External links: W3C
Label in Name  -  Level A   WCAG 2.1

Best practice is to have the visible text at the start of the name.

A couple examples of this guideline:

  • Accessible name matches visible label: The accessible name and visible label of a control match.
  • Accessible name starts with visible label: The accessible name of a "Buy Now" button begins with the same text as the visible label.
External links: W3C
Motion Actuation  -  Level A   WCAG 2.1
Tags: motion

The motion actuation or responding to the motion can be disabled to prevent accidental actuation.

Exemptions to this guideline include:

  • Supported Interface: The motion is used to operate functionality through an accessibility supported interface.
  • Essential: The motion is essential for the function and doing so would invalidate the activity.

External links: W3C
Text should be readable and understandable
Language of Page  -  Level A   WCAG 2.0

This allows screen reader software (used by blind users) to use the correct pronounciation when speaking the text on the page aloud.

  • Identify the primary language of a Web page in the HTML page header, e.g. <html lang="en"> for English in HTML5.

How to test: Use a tool like axe or WAVE, or inspect the HTML code.

External links: W3C
Make Web pages appear and operate in predictable ways
On Focus  -  Level A   WCAG 2.0

No unexpected actions should occur when a particular UI element receives keyboard focus. This can be very confusing to blind users and other keyboard-only users.

Some examples of what should NOT happen at the moment a component receives the focus:

  • a form is submitted automatically
  • a new window is openened
  • the focus is changed to another component

How to test: Go through the form elements on the page and check for unexpected actions.

External links: W3C
On Input  -  Level A   WCAG 2.0

No unexpected actions should occur when the user makes changes to a particular UI element. This can be very confusing to blind users and other keyboard-only users. Some examples of changes to a UI element are:

  • turning a checkbox or radio button on or off
  • selecting a different item from a dropdown menu
  • entering text into a text field

Some examples of what should NOT happen:

  • a new window is openened
  • the content on the page changes

How to avoid unexpected actions:

  • Provide a submit button. Do not perform any actions until this button is clicked by the user

How to test: Go through the form elements on the page and check for unexpected actions.

External links: W3C
Consistent Navigation  -  Level AA   WCAG 2.0

This ensures that blind users can find navigation menus in the same place on the page every time.

This also applies to other items repeated on every page, such as:

  • a search box
  • login/registration and links to edit your user account or preferences
  • a "Skip to content" link

How to test: Go through the site and check that the main navigation menus look and work the same on every page.

External links: W3C
Consistent Identification  -  Level AA   WCAG 2.0

If there are two components on a web page that both have the same functionality as a component on another page in a set of web pages, then all 3 must be consistent.

External links: W3C
Help users to avoid and correct mistakes
Error Identification  -  Level A   WCAG 2.0

This ensures that users are clearly informed of input errors in forms.

  • Display an error message with text alerting the user to the specific fields (or other form elements) containing errors and describing the specific errors in the input
  • Color or images can be used in addition to the text to mark the form elements containing errors

How to test: Submit each form on the page with errors and inspect the resulting messages and other feedback given.

External links: W3C
Labels or Instructions  -  Level A   WCAG 2.0

All fields and other form elements ar clearly labeled, or instructions for correct entry are provided

  • Use the <label for="[element ID]"> HTML tag to associate a form element with its label
  • Label all form elements. Use clear, unambiguous labels
  • Identify required (mandatory) fields with a text label. Do not use color or images only to identify required fields.
  • Display the label for an element in close proximity to that element
  • Provide examples of correct input, such as the correct date format

How to test:

  • Use AChecker to check for form elements that are not (properly) labeled.
  • Go through the forms on the page and check that each form element is clearly labeled.
External links: W3C
Error Suggestion  -  Level AA   WCAG 2.0
Tags: forms
External links: W3C
Maximize compatibility with assistive technologies (such as screen readers) and future browsers
Parsing  -  Level A   WCAG 2.0

Valid HTML ensures that both screen reader software and browser can accurately render the content

  • HTML code should pass W3C's HTML validation tool
  • Use unique IDs - no two elements on the same page should have the same ID
  • Browser add-ons like Firebug can be used for quick HTML validation during development
  • HTML5 is recommended because it is a lot more forgiving than previous versions of HTML

How to test:

  • Use W3C's HTML validation service to validate the HTML code.
  • Use a tool like axe and WAVE to check for duplicate IDs
External links: W3C
Name, Role, Value  -  Level A   WCAG 2.0

The name and state of all form elements, links and other UI components can be determined and the state can be changed. This ensures compatibility with assistive technology such as screen readers, screen magnifiers, and speech recognition software

  • Avoid using non-standard controls such as those created by Flash, Java or other plugins, components that are created using scripting, or clickable <div>s and <span>s
  • When using non-standard controls, make sure that it is keyboard accessible - it can receive focus and its state can be changed using the keyboard

How to test:

  • Use axe to check for clickable <div>s and <span>s
  • Go through the (non-standard) form elements on the page and check for unexpected actions
External links: W3C
Status Messages  -  Level AA   WCAG 2.1

A status message is defined as a visual message that provides information to the user on the success or results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors.

A few examples of relevant status roles can include:

  • role="status"
  • role="marquee"
  • role="progressbar"
  • role="timer"
  • role="alertdialog"
External links: W3C

Section 508 Amendment to the U.S. Rehabilitation Act

Functional Support Criteria (Chapter 3)
Support Documentation and Services (Chapter 6)
Information on Accessibility and Compatibility Features
External links: Section 508