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.

When audio descriptions cannot be added to a video due to audio timing (e.g., insufficient pauses in the audio), an alternative version of the video with pauses that allow audio descriptions is provided.

For pre-recorded media with a video track, a transcript is supplied.

For live content with audio, a descriptive text transcript (e.g., the script of the live audio) is provided.

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.

Ensure that users with cognitive impairments, such as problems with memory, focus, language, and decision-making, can benefit from content that clearly identifies the purpose of its components. Programmatically indicate the purpose of icons, regions, and user interface components.

Use HTML5 regions or ARIA landmarks to identify page regions
or, use ARIA where appropriate, to enhance HTML semantics to better identify the purpose of interface components.

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.

• Text and images of text have a contrast ratio of at least 7:1.
• Large text – at least 18 point (typically 24px) or 14 point (typically 18.66px) bold – has a contrast ratio of at least 4.5:1.

Audio with speech has no or very low background noise so the speech is easily distinguished.

For the visual presentation of blocks of text, a mechanism is available to achieve the following:

• Foreground and background colors can be selected by the user.
• Width is no more than 80 characters or glyphs (40 if CJK).
• Text is not justified (aligned to both the left and the right margins).
• Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
• Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.

Do not use text in images unless it is purely decorative,
or, the text as an image is central to the idea being communicated.

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.

All page functionality is available using the keyboard.

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.

If finishing a task within a time limit isn’t critical, allow people as much time as they need. This requirement does not apply to real-time activities such as fast-paced auctions, multiplayer gaming sites, and other competitive events.

Allow users to delay automatic updates by allowing them to prevent automatic content updates and/or set the frequency of automated content updates.

Allow visitors to continue a transaction after a session has expired without losing the information they have previously provided. More people will be able to conduct authorised transactions as a result of this.

Users must be informed at the start of a session about what period of inactivity will cause a timeout. An exception is when data is preserved for 20 hours or more after a timeout occurs.

This success criteria does not apply to timeouts that are out of the control of the provider, such as a user closing a browser window or reloading it while it contains unsaved data.

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

Within any given second, web pages do not include any content that flashes more than three times.

Unless the animation serves a crucial purpose in conveying information or functionality, motion animation triggered by user interaction can be turned off.

This criterion does not apply to necessary animation initiated by users. For instance, scrolling is considered essential, as users have full control and can adjust their scrolling speed to prevent any symptoms related to motion.

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.

To help visitors orient themselves, include information about the current location in relation to the whole. Some ways to achieve this include emphasizing the current page in a set of navigation links, offering a breadcrumb trail, or specifying the current step in a sequence (e.g., Step 2 of 4 – Billing Address).

Links should make sense on their own, without the benefit of surrounding context to add meaning. An exception applies when the purpose of a link cannot be determined from any information present on the web page. In such cases, individuals with disabilities are not at a disadvantage since the context is not accessible to anyone.

Whenever possible, divide pages into sections and begin each section with the heading that reflects the place of the section within the whole.

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.

The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:

• Equivalent: If the target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels, it can be smaller.
• Inline: If the target is in a sentence or block of text, it can be smaller.
• User Agent Control: If the size of the target is determined by the user agent and is not modified by the author, it can be smaller.
• Essential: If a particular presentation of the target is essential to the information being conveyed, it can be smaller.

Enable users to utilize and seamlessly transition between various input modes while interacting with web content. Users may employ diverse input methods, which can include a combination of mechanisms like keyboards or keyboard-like interfaces, as well as pointer devices such as mice, styli, or touchscreens.

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.

Provide additional instructions or information for context-sensitive inputs when the label doesn’t provide enough context.

Users with cognitive impairments find it difficult to fill up forms or other places where it requires text input. Therefore, providing context-sensitive help or cues will help them to perform these tasks easily.

A cognitive function test (such as remembering a password or completing a puzzle) is not necessary for any step in an authentication process unless that step includes at least one of the following:

• Alternative: Another authentication method that does not rely on a cognitive function test.
• Mechanism: A mechanism is available to assist the user in completing the cognitive function test.

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.