-
Notifications
You must be signed in to change notification settings - Fork 1
WCAG decision tree
Andrew Hick edited this page Nov 28, 2024
·
74 revisions
Use this decision tree to help decide which criteria of the Web Content Accessibility Guidelines (version 2.2 to level AA) something might fail under. Choose the relevant sections for the thing you are testing. Whenever the answer is yes, continue to the next table row.
Although the most wide-ranging issues appear first in each table, a serious issue might fail on more than one success criterion. This page is intended to help you find the "main" criterion to fail an issue under, to avoid duplication in an audit report. The wording is intentionally kept simple, and it can be subjective whether a success criterion fails or not. If unsure, read the linked understanding page for each criterion or try the detailed accessibility testing guide.
It is also recommended to use an automated tool alongside manual testing, as this will quickly identify some issues, including some contrast failures or missing labels. However, you'll always need manual testing for full coverage.
This is unofficial. If you have any feedback, please contact me on Bluesky or LinkedIn.
These themes were also the basis for the WCAG 2.2 map by theme, which groups similar criteria together by common theme.
Test groupings:
| Check | If not |
|---|---|
| Can all functionality be accessed by keyboard without getting trapped? This applies to all page content, not just that in scope of your audit, as a failure could interfere with the rest of the page. |
Fail: 2.1.2 No keyboard trap |
| Can repeated navigational elements be bypassed with a skip link? | Does the page have a logical heading or landmark structure? If not, fail: 2.4.1 Bypass blocks |
| Can all functionality be interacted with using a keyboard? | Fail: 2.1.1 Keyboard |
| Are all components at least partially visible when they receive keyboard focus? | Fail: 2.4.11 Focus not obscured (WCAG 2.2) |
| Is the focus indicator clearly visible? | If the focus state is indicated purely by a change from one colour to another, and the contrast ratio between those two colours is below 3:1, fail: 1.4.1 Use of colour. If no part of the focus indicator has a contrast ratio of at least 3:1 against its surroundings, fail: 1.4.11 Non-text contrast. If the focus indicator is invisible, fail: 2.4.7 Focus visible. |
| Is the focus order logical? | Fail: 2.4.3 Focus order |
| Does keyboard focus stay where you expect it to stay when you focus on each element? | Fail: 3.2.1 On focus |
| Does keyboard focus stay where you expect it to stay when you input something into a form? | Fail: 3.2.2 On input |
| Use the bookmarklet from BITV-Test Prüfverbund to check for character key shortcuts (linked). This only needs to be carried out at 100% zoom. | - |
| Can any keyboard shortcuts can be turned off, re-mapped, or do they only work when focussed on a particular component? | Fail: 2.1.4 Character key shortcuts |
| Check | If not |
|---|---|
| Repeat the keyboard steps at 200% zoom. | - |
| Is everything still readable? | Fail: 1.4.4 Resize text |
| Is everything still keyboard accessible? | Fail: 2.1.1 Keyboard. It is also worth spot checking with a screen reader at this stage. |
| Repeat the same keyboard steps at 400% zoom and on a small screen (320×256). | - |
| Is everything still readable without horizontal scrolling? | Fail: 1.4.10 Reflow |
| Is everything still keyboard accessible? | Fail: 2.1.1 Keyboard. It is also worth spot checking with a screen reader at this stage. |
| Reset the page to 100% zoom and use Dylan Barrell's bookmarklet to change the text spacing. | - |
| Is text still readable when spaced out? | Fail: 1.4.12 Text spacing |
Review any audio, playable or moving media on the page. This can include videos, carousels, audio tracks or animated gifs.
| Check | If not |
|---|---|
| Is all visual media free from flashing? This applies to all page content, not just that in scope of your audit, as a failure could interfere with the rest of the page. |
Are there fewer than three flashes per second, or is the flashing minimal? If not, fail: 2.3.1 Three flashes or below threshold. If in doubt, always fail this as it presents a safety risk to some users. |
| Can any autoplaying audio which lasts for longer than 3 seconds be stopped or turned down independently of the operating system? This applies to all page content, not just that in scope of your audit, as a failure could interfere with the rest of the page. |
Fail: 1.4.2 Audio control |
| Can any content that moves for longer than 5 seconds be paused or hidden? This applies to all page content, not just that in scope of your audit, as a failure could interfere with the rest of the page. |
Fail: 2.2.2 Pause, stop, hide |
| If the media is a live video, does it have captions? | Fail: 1.2.4 Captions (live). Live captions are not in scope of the UK accessibility regulations. |
| If the media is prerecorded, then continue. | Otherwise, skip the rest of this table. |
| If the media is audio-only, does it have a transcript? | Is the media clearly marked as an alternative to text? If not, fail: 1.2.1 Audio-only and video-only (prerecorded) |
| If the media is video-only, does it have a transcript or equivalent audio track? | Is the video clearly marked as an alternative to text? If not, fail: 1.2.1 Audio-only and video-only (prerecorded) |
| If the media has synchronised audio and video, continue testing. | Otherwise, skip the rest of this table. |
| Does the media have accurate captions? | Fail: 1.2.2 Captions (prerecorded) |
| Does the media have an audio description or an alternative such as a transcript? | Fail: 1.2.3 Audio description or media alternative (prerecorded) |
| Does the media have an audio description? | Fail: 1.2.5 Audio Description (prerecorded) |
| Check | If not |
|---|---|
| Can all visual information be understood without relying on colour alone? | If not, and the contrast ratio between the differences in colour is below 3:1, then it fails 1.4.1 Use of colour. |
| Do all instructions avoid relying on sensory characteristics such as shape, colour, size, visual location, orientation or sound in order to convey meaning? | Fail: 1.3.3 Sensory characteristics |
| Does small text (below 18pt or 14pt bold) have a contrast ratio of at least 4.5:1? | Fail: 1.4.3 Contrast (minimum) |
| Does large text (at least 18pt or 14pt bold) have a contrast ratio of at least 3:1? | Fail: 1.4.3 Contrast (minimum) |
| Do user interface elements have a contrast ratio of 3:1 against their background? | If the parts with low contrast were removed, would the elements still be understandable? If not, fail: 1.4.11 Non-text contrast |
| Can any content which appears when hovered over or focussed be: dismissed, hovered over, and kept visible until no longer needed? | Fail: 1.4.13 Content on hover or focus |
| Is all meaningful content presented without a time limit? | Is the time limit either: over 20 hours, essential, able to be turned off, extendable (with a warning) or adjusted beforehand? If not, fail: 2.2.1 Timing adjustable |
| If there are images on the page then continue. | Otherwise, skip the rest of this table. |
| Do images and symbols have a text alternative? | Fail: 1.1.1 Non-text content. For interactive elements, read the 'Labels and assistive technology support' section. |
| Is all meaningful text on the page available as text, rather than being embedded in an image? | Is it a logo or text which is essential to be provided in this particular way? If not, fail: 1.4.5 Images of text |
| Check | If not |
|---|---|
Does the page have a <title> tag which uniquely describes the page's topic or purpose? |
Fail: 2.4.2 Page titled |
Does the page have a default language set using <html lang>? |
Fail: 3.1.1 Language of page |
| Is each section that is in a different language from the page default marked up with the correct language? | Fail: 3.1.2 Language of parts |
| Check | If not |
|---|---|
| Do elements that require user input have visible labels? | Fail: 3.3.2 Labels or instructions |
| Is the purpose of each link understandable from its text or immediate context? | Fail: 2.4.4 Link purpose (in context) |
| If there are headings or labels, are they descriptive? This refers to both visible labels and accessible names. | Fail: 2.4.6 Headings and labels |
| If a component has a visible text label and an accessible name, does the accessible name include the visible label? | Fail: 2.5.3 Label in name |
| Is content (such as headings, lists and tables) coded and structured consistently with how it appears visually? | Fail: 1.3.1 Info and relationships |
| Is functionality (such as links, form fields and buttons) coded consistently with how it appears visually and functions? | Fail: 1.3.1 Info and relationships |
| Is the accessible name, role and value (or state) of each element clear and correct when using assistive technology? | Fail: 4.1.2 Name, role, value. If there is a visible label which is incorrectly associated with the field, you may wish to fail this for 1.3.1 Info and relationships instead to highlight that visible and programmatic information need to be consistent. |
| Is content read out in a logical order when using a screen reader? | Fail: 1.3.2 Meaningful sequence |
If there are form controls on the page (such as text fields, buttons, radio buttons and checkboxes), also check the following:
| Check | If not |
|---|---|
| Do all instructions avoid relying on shape, colour, size, visual location, orientation or sound in order to convey meaning? | Fail: 1.3.3 Sensory characteristics |
| Do form fields have appropriate autocomplete values for common input purposes (linked)? This can be tested with Rachele DiTullio's autocomplete bookmarklet. | Fail: 1.3.5 Identify input purpose |
| Does focus stay where you expect it to stay when you focus on each element? | Fail: 3.2.1 On focus |
| Does focus stay where you expect it to stay when you input something into a form? | Fail: 3.2.2 On input |
| If status changes are shown without reloading the page, are those changes communicated to a screen reader user? | Fail: 4.1.3 Status messages |
| If the form can generate errors, continue. | Otherwise, skip the rest of this table. |
| Are errors highlighted using text? | Fail: 3.3.1 Error identification |
| Do the errors include suggestions on how to fix them? | Would it be a security risk to provide suggestions? If not, fail: 3.3.3 Error suggestion |
| Can submissions be undone, confirmed or automatically checked? | Fail: 3.3.4 Error prevention (legal, financial, data) |
| When information needs to be re-entered in a form, is that information either auto-populated or selectable from a list? | Fail: 3.3.7 Redundant entry (WCAG 2.2) |
| When logging in, is this possible without needing to remember or transcribe information, or solve a puzzle? | Fail: 3.3.8 Accessible authentication (WCAG 2.2) |
Test the site using a mobile device. Check that:
| Check | If not |
|---|---|
| Is each page readable and usable in both portrait and landscape mode? | Fail: 1.3.4 Orientation |
| Can functionality be used without relying on motion? | Fail: 2.5.4 Motion actuation |
| Can functionality be used without relying on path-based or multi-point gestures? | Fail: 2.5.1 Pointer gestures |
| Can functionality be used without relying on dragging? | Fail: 2.5.7 Dragging movements (WCAG 2.2) |
| Can actions be cancelled after touching a button, for example, by dragging away? | Fail: 2.5.2 Pointer cancellation |
| Is the size of all interactive elements plus the spacing between them at least 24 pixels across? This can be tested with Steve Faulkner's target size bookmarklet. |
Fail: 2.5.8 Target size (WCAG 2.2) |
Compare similar pages across the whole site and check:
| Check | If not |
|---|---|
| Is there more than one way to get to pages which aren't part of a linear process (for example, a navigation bar and search functionality)? | Fail: 2.4.5 Multiple ways |
| Are any repeated navigational elements laid out in a consistent order across the site? | Fail: 3.2.3 Consistent navigation |
| Is similar functionality named consistently across the site (for example, consistent use of 'search' or 'find')? This applies to both visible and accessible names. |
Fail: 3.2.4 Consistent identification |
| Do any help mechanisms appear in the same relative order on each page? | Fail: 3.2.6 Consistent help (WCAG 2.2) |
✅ If all of the checks pass then the page is probably accessible to most users up to WCAG 2.2 levels A and AA. This is still however a minimum standard. You should test with people with disabilities to identify other issues, and gain further insight into the accessibility of your site.
Contains public sector information licensed under the Open Government Licence v3.0.