Accessibility and WCAG filter rules summary

Web Content Accessibility Guidelines (WCAG) Overview

The Web Content Accessibility Guidelines (WCAG) is an international standard that explains how to make web content more accessible to people with disabilities. It is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. The guidelines are organized under 4 principles: perceivable, operable, understandable, and robust.

For each guideline, there are testable success criteria. The success criteria are at three levels: A If this need is not satisfied, assistive technology may be unable to read, comprehend, or fully operate the page., AA Multiple government and public entity websites require it., and AAA This is generally used for parts of websites and web apps that target to a certain audience.. The success criteria are what determine conformance to WCAG. That is, in order to meet WCAG, the content needs to meet the success criteria.

WCAG versions:

  • WCAG 2.0: Published on .
  • WCAG 2.1: Published on , with an update on .
  • WCAG 2.2: Published on .

WCAG 2.2 is the most recent version of the guidelines, containing nine new success criteria. While website conformance with WCAG 2.2 may not yet be required by law in all jurisdictions, understanding the 2.2 A and AA success criteria can help website owners be prepared to meet them and demonstrate an ongoing commitment to accessibility.

This page provides ways to view success criteria grouped by WCAG version (2.0, 2.1 and 2.2) and conformance level, along with many other WCAG filter rules summary and sort options.

Check how you can convert this page to PDF.

WCAG version
Conformance level
Accessibility categories
Checklist for Web Content Accessibility Guidelines 2.2
WCAG versionConformance LevelSuccess CriterionTestCategory
2.0A

<img> elements have an alt attribute

Content
Easy win
2.0A

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

Content
2.0A

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

Content
2.0A Controls have a name that describes their function (often, but not always, a programmatically linked label).
Custom controls
Forms and UI
2.0A

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

Content
2.0A

A text alternative is provided for charts and graphs.

Content
Easy win
2.0A An invalid test or exercise presented by an image has text identification describing the non-text content.
Content
2.0A

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).

Audio and video
2.0A

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

Audio and video
Easy win
2.0A

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

Audio and video
2.0A

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.

Audio and video
2.0AA

Captions are provided for all live audio content.

Audio and video
2.0AA

Audio description is provided for all prerecorded video content.

Audio and video
2.2AAA

Provide sign language translations for pre-recorded videos.

Audio and video
2.2AAA

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.

Audio and video
2.2AAA

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

Audio and video
2.2AAA

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

Audio and video
2.0A

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

Content
2.0A

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

Content
Easy win
2.0A

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

Content
Easy win
2.0A

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

Forms and UI
Easy win
2.0A

Extra input data is marked up programmatically.

Forms and UI
2.0A

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.

Content
2.0A

Provide hierarchically logical heading markup for the contents.

Content
Easy win
2.0A

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.

Content
Easy win
2.0A

All content must be contained in landmarks.

Structure
2.0A

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

Structure
2.0A

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

Content
2.1AA

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.

Structure
2.1AA

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

Forms and UI
Easy win
2.1AAA

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.

Forms and UI
Easy win
2.0A

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

Color
2.0A

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.

Color
2.0A

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.

Audio and video
Easy win
2.0AA

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

Font size
Structure
Color
2.0AA

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

Font size
Structure
Color
2.0AA

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

Font size
Structure
Color
2.0AA

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

Font size
Structure
Color
2.0AA

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

Font size
Structure
Easy win
2.0AA

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.

Content
2.0AAA
  • 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.
Forms and UI
2.0AAA

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

Audio and Video
2.0AAA

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.
Forms and UI
2.0AAA

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

Forms and UI
2.1AA

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.

Structure
Easy win
2.1AA

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

Color
Forms and UI
2.1AA

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

Color
2.1AA

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

Color
2.1AA

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

Structure
2.1AA

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.

Dynamic content
Keyboard
2.0A

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

Custom controls
Forms and UI
Keyboard
2.0A

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.

Keyboard
Easy win
2.0AAA

All page functionality is available using the keyboard.

Keyboard
2.1A

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

Keyboard
2.0A

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.

Dynamic content
2.0A

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.

Dynamic content
2.0AAA

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.

Dynamic content
2.0AAA

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

Dynamic content
2.0AAA

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.

Dynamic content
2.1AAA

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.

Dynamic content
2.0A

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

Dynamic content
Easy win
2.0AAA

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

Dynamic content
2.1AAA

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.

Dynamic content
2.0A

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.

Structure
Easy win
2.0A

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

Structure
2.0A

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

Structure
Easy win
2.0A

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

Structure
2.0A

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

Content
2.0AA

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.

Content
2.0AA

Labels for form controls and interactive controls are informative.

Custom controls
Forms and UI
2.0AA

Page headings are informative.

Structure
Easy win
2.0AA

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

Custom controls
Forms and UI
Easy win
2.0AAA

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).

Custom controls
2.0AAA

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.

Custom controls
2.0AAA

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

Custom controls
2.2AA

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.

Keyboard
Structure
2.2AAA

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.

Keyboard
Structure
2.2AAA

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.
Keyboard
Structure
2.1A

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.

Custom controls
2.1A

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.
Custom controls
2.1A If a button, link, or other interface element has visible text on the screen, its accessible name must have the same text as the one displayed.
Custom controls
Forms and UI
2.1A

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.

Structure
2.1AAA

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.
Structure
2.1AAA

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.

Structure
2.2AA

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.

Keyboard
Forms and UI
2.2AA

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.

Structure
2.0A Ensure the primary language of a webpage is defined within the HTML code, primarily through the lang attribute on the <html>. The correct speaking language will be loaded by screen readers to read the words on the webpage.
Structure
Easy win
2.0AA When appropriate, the language of sections of content that are a different language are identified, for example, by using the lang attribute (<blockquote lang="pl">).
Structure
2.0AAAIf words or phrases are used in an unusual or restricted way, such as unusual expressions or jargons, make sure users can find their correct definitions.
Structure
2.0AAAIt is recommended that if your site uses abbreviations, you provide a mechanism for users to access their expanded forms.
Structure
2.0AAAAuthors are advised to use shorter phrases and less difficult terminology, to write in plain English and in active voice, and to ensure that each paragraph focuses on one point rather than including many ideas or transitions to different topics. Furthermore, for more complex content, authors can consider including additional explanatory content in a different format, such as videos, maps, images, or symbols.
Structure
2.0AAAIf there are words having different meanings when using different pronunciation, provide a clear explanation of the pronunciation.
Structure
2.0A When any component receives focus, it does not initiate a change of context. This means when keyboard focus is on any interactive element in a form, the focus will not be redirected to anywhere else, the form will not be submitted or a new window will not open up. All substantial changes need to be initiated by the user.
Forms and UI
2.0A Entering data or changing settings will not cause any unexpected results. Any uncommon contextual changes should be notified to the user in the instructions before they interact with any of the elements that cause this change.
Forms and UI
2.0AA Navigational mechanisms such as links that repeat on multiple pages always appear in the same order throughout the same website.
Structure
2.0AA Components such as links that appear on multiple pages across the same website are always identified the same way. For example, a link has the same link text every time it appears on a page in the same website.
Structure
2.0AAAEnsure that users have control over content changes that occur automatically. For example, slideshows may automatically change context. In this scenario, make sure that users can control this automated adjustment.
Structure
2.2A If you have help functionality, keep your support options in the same place on every page.
Content
Structure
2.0A If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
Forms and UI
2.0A Sufficient labels, cues, and instructions for required interactive elements are provided via instructions, examples, properly positioned form labels, and/or fieldsets/legends.
Forms and UI
2.0AAIf an input error is detected (through client-side or server-side validation), provide suggestions for fixing the input in a timely and accessible manner.
Forms and UI
2.0AAIf the user can change or delete legal, financial, or test data, the changes or deletions are reversible, verified, or confirmed.
Content
2.0AAA

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.

Content
2.0AAAUser submitted content can be reversed, checked, or confirmed.
Content
2.2AIf the user needs to enter the same information again, it should either be auto-populated or selected rather than re-keyed.
Content
2.2AA A cognitive function test is not used to authenticate a user
or a cognitive function test has a non-cognitive function alternative
or user authentication is through an email link
and user input controls contain autocomplete attributes with correct values
and user input controls do not restrict copying and pasting.
Forms and UI
Content
2.2AAA

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.
Forms and UI
Content
2.0A

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.

Structure
2.0AName and role can be programmatically determined for all user interface components (including but not limited to form elements, links, and components generated by scripts); states, properties, and values that can be set by the user can be programmatically set
and notification of changes to these items is available to user agents, including assistive technologies.
Custom controls
Forms and UI
2.1AA Even if a visible status message (e.g., an error, success, chat message or logs added to a page) is not in focus, users should be informed via assistive technology tools. This criterion could be implemented by implementing the Accessible Rich Internet Application (ARIA) role (status, alert, log) or Live Regions.
Custom controls
Dynamic content