Accessibility and WCAG filter rules summary

<img> elements have an alt attribute

Descriptive <img> elements have a programmatic description of the image

Complex images (like infographics, charts or diagrams) that communicate complex information also have longer text descriptions within the same page.

Two different modalities of CAPTCHA are provided
or, providing access to a human to bypass CAPTCHA
or, not requiring CAPTCHA for authorised users.

A text alternative is provided for charts and graphs.

Prerecorded audio-only media has an alternative format (such as text or visual), and prerecorded video-only media has an alternative format (such as text or audio).

The generated transcript for pre-recorded audio is easily accessible.

The video includes synchronised captions of the conversation, who is speaking, and non-speech information, as well as meaningful sound effects.

A pre-recorded video presenting crucial visual information is supported by an easily accessible full-text alternative describing important visual details
or, an audio description track is provided.

Captions are provided for all live audio content.

Audio description is provided for all prerecorded video content.

Provide sign language translations for pre-recorded videos.

Elements are used based on their meanings rather than their appearance.

Create accessible tables with designated header cells using <th> elements and proper scope attributes.

The <caption> element is used to associate data table captions with data tables.

Labels are programmatically associated to form controls using a <label>, aria-labelledby, or aria-label.

Extra input data is marked up programmatically.

To indicate a context group of form elements like as radio buttons or checkboxes, provide grouping and group-level labels
and, use <fieldset> and <legend> to achieve grouping and group.

Provide hierarchically logical heading markup for the contents.

Markup the contents that logically fall into a list as an ordered or unordered list. Lists should not contain large text blocks that are normally paragraphs.

All content must be contained in landmarks.

Content on the page follows a logical and understandable sequence when read by screen readers or viewed in alternative ways.

Instructions for understanding or operating the content do not solely rely on color, shape, size, visual location or sound.

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

The autocomplete attribute techniques should be used for each input field to make form filling easier, especially for people with cognitive disabilities.

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

You must have a contrast ratio of 3:1 with surrounding text, providing additional visual cues on focus for links or controls where color alone is used to identify them.

If any audio content that is longer than 3 seconds plays automatically, the user should have a way to stop or turn down the volume independently of the system volume.

Text smaller than 18 point (23.94 pixels) and not bold has a minimum contrast ratio of 4.5:1 with the background color

Text smaller than 14 point (18.62 pixels) and bold has a minimum contrast ratio of 4.5:1 with the background color.

Text at least 18 point (23.94 pixels) and not bold has a minimum contrast ratio of 3:1 with the background color.

Text at least 14 point (18.62 pixels) and bold has a minimum contrast ratio of 3:1 with the background color.

At 200% browser zoom, all text (including controls) is readable.

Where possible, do not use images to display text. Text inside an image can’t be read by assistive technologies like a screen reader, will have to rely on the image alt attribute, and cannot be resized by browsers when a user chooses to use larger fonts.

Users should not have to scroll in their browser in more than one way – horizontally and vertically – when zoom the content up to 400% of the default size.

If a border is the only way to identify an active control, it must contrast at least 3:1 with the surrounding color.

The visual state of active control must have a minimum contrast of 3:1 with the adjacent color.

Graphics that are required to understand the content have a minimum contrast of 3:1 with the adjacent color.

When the text-spacing bookmarklet is used, there is no loss of content or functionality.

Additional content triggered on hover or keyboard focus can be dismissed without moving mouse or keyboard focus
and, if hover triggers the content, pointer can be moved to hovered content without disappearing
and, additional content remains visible until hover or focus trigger is removed or user dismisses it.

All interactive elements must be available from the keyboard
and, shortcut and access keys do not conflict with browser or assistive technology shortcuts

If elements can receive keyboard focus through a keyboard interface then focus can be moved away from that element using the keyboard interface. Keyboard users should not get stuck in an element or area of the webpage.

Character key shortcuts can be turned off
or, character key shortcuts can be remapped
or, character key shortcuts are only active when the relevant UI component is in focus

Time limits can be turned off or adjusted to become 10 times the original limit. Does not apply for real-time interactions such as auctions or time limits that are longer than 20 hours.

Any content that automatically plays, lasts longer than 5 seconds or and is presented in parallel with other content can be paused, stopped or hidden. Automatic content includes content that is: Moving, Blinking, Scrolling or auto updating.

Webpage does not contain anything that flashes faster than 3 times a second.

A mechanism is provided to bypass blocks of repeated content such as the navigation section.
It could be provided with skip links
or a proper heading structure
or, aria/HTML5 landmarks.

frame or iframe element have the title attribute to describe the contents of each frame.

Webpage has a <title> that describes topic or purpose.

Keyboard focus order is logical for content, links, forms and objects. Document Object Model (DOM) order follows visual order.

The purpose of a link can be determined from the link text alone
or, from link text together with it’s context.

Multiple ways are available to find other web pages on the site – at least two of: a list of related pages, table of contents, site map, site search, or list of all available web pages.

Labels for form controls and interactive controls are informative.

Page headings are informative.

When an interactive element receives keyboard focus, it should be visually obvious.

You must not let anything fully obscure the element that has keyboard focus. The user must be able to see at least a portion of the focus indicator at all times.

The focus indicator must always be fully visible, which is slightly different from what is outlined under 2.4.11, which allows it to be partially obscured.

The focus indicator must be fully visible when an item receives focus. The focus indicator must

• Be at least a two-pixel wide perimeter of the unfocused component or sub-component.
• Provide a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

Exceptions:

• The focus indicator is determined by the user agent and cannot be adjusted by the author,
  or
• The focus indicator and the indicator’s background color are not modified by the author.

Pointer gestures include more than just multipoint inputs like pinch and drag. Users must be able to perform the same tasks using a single point gesture, such as a single tap, long press, or double tap.

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.

Functionality triggered by a users motion or gestures can be turned off
and, functionality can be operated without device motion or user gestures.

For users with limited hand function, shaking is often not possible.

Drag-and-drop functionality (e.g., sliders, drag-and-drop interfaces) should include a single pointer mode of operation that does not need dragging the elements.

Interactive elements must have an area of at least 24 by 24 pixels
or, target size for interactive elements plus spacing for adjacent elements is a minimum 24 pixels
and, links within paragraph text are exempt
and, unstyled native HTML components are exempt
except when the size of the target is legally required.

The level AAA requirement for accessible authentication is essentially the same as the level AA requirement except that it only allows cognitive function tests if the user is provided an alternative method or a mechanism to assist with the test. There is no exception for object recognition or personal content.

Make sure all elements have complete start and end tags, that they’re nested properly, have no duplicate attributes and that IDs are unique, in order to make sure assistive technology can properly parse your content. Test your page with W3C Markup Validator or HTML Partial Page Validator.

This criterion has been removed from WCAG 2.2. In WCAG 2.1 and 2.0 this Success Criterion should be considered as always satisfied for any content using HTML or XML.