WCAG explorer
Navigate the WCAG guidelines and how to meet and test them.
Filter
Perceivable
Users must be able to perceive the content.
Text alternative for non-text content such as images and charts, captions and other alternatives for video should be provided, and content should be adaptable by the user to fit their requirements.
Text Alternatives
1.1.1 - Non-text content Copy link to criterion 1.1.1
Related guidance: WCAG 1.1.1 Non-text Content
All non-text content like images, charts, icons and infographics, must have an appropriate text equivalent. This ensures that information conveyed by non-text content is available to people who cannot see it, like screen reader users.
The exception to this is decorative images which should not be described or announced to screen reader users.
How to implement
All images must have an alternative text description that describes its meaning, not what the image is:
- images that communicate information (for example icons and logos) have short text descriptions
- editorial images that support the text around them have short descriptions
- images that communicate complex information (for example infographics and diagrams) have longer text descriptions within the same page
- charts or graphs contain the same data in a corresponding table
- decorative images have the null (or empty) alternative description alt="" (no space between the quotations)
How to test
- identify images on the page, right click on them and select 'Inspect'
- check the image tag to see if the alt attribute exists
- for decorative images, the alt attribute should be alt="" or just alt
- for editorial images and images which communicate information check that the descriptions are appropriate
- for images of complex information, check that the description refers to the availability of a longer description and that this is present on the page
Time based media
1.2.x - Alternatives for audio and video Copy link to criterion 1.2.x
Related guidance: WCAG 1.2 Time-based Media
Audio and video content has appropriate alternatives to ensure that everyone has a comparable experience when interacting with this content. This may include transcripts, captions and audio description depending on the type of audio or video content.
How to implement
The alternative required depends on the context of the audio or video, but broadly:
- always provide a transcript
- always provide captions for videos
- if the narration of a video does not include all the detail required, then provide audio description
How to test
If the page contains multimedia content, check that the required alternative is available.
The transcript should be available near to the multimedia content but can be a link to another page.
Adaptable
1.3.1a - Info and relationships - Tables Copy link to criterion 1.3.1a
Related guidance: WCAG 1.3.1 Info and Relationships
When information is visually presented as a table, this structure must be conveyed appropriately to assistive technologies. This ensures that tables are available to screen reader, screen magnification and speech recognition tool users.
How to implement
Tabular data is presented using proper HTML markup (<table>, <tr>, <th>, and <td> elements).
Tables include a <caption> element which summarises the overall purpose of the table.
How to test
- right click on any tables and select the 'Inspect' option
- manually review the table structure to identify the presence of the correct mark-up
- note - <thead> and <tbody> are not semantic HTML and are used for formatting purposes
1.3.1b - Info and relationships - Lists Copy link to criterion 1.3.1b
Related guidance: WCAG 1.3.1 Info and Relationships
When presenting lists of information, you must communicate this list in a way that assistive technology users can understand.
How to implement
Use appropriate and proper HTML markup for lists of items:
- ordered lists for structured data like the steps in a process (<ol> and <li> elements)
- unordered lists for unstructured data like the ID documents required for a process (<ul> and <li>)
- description list/definition list to group a series of key terms and their descriptions/definitions together (<dl>, <dt> and <dd>)
How to test
- right click on any list of information and select the 'Inspect' option
- manually review the list to ensure the appropriate list type has been used for the data
1.3.1c - Info and relationships - Headings Copy link to criterion 1.3.1c
Related guidance: WCAG 1.3.1 Info and Relationships
Where visual headings are used to communicate the structure of a page, they must also be communicated in a way that supports assistive technology users to access this structure.
How to implement
Use proper HTML markup for headings (<h1> through <h6> elements).
Each page should have a H1 which describes the overall purpose of the page.
Do not skip heading levels or use multiple H1s on a page if you can avoid it.
How to test
- right click on any heading and select the 'Inspect' option
- manually review the correct heading structure has been applied to visual headings
1.3.1d - Info and relationships - Form fields Copy link to criterion 1.3.1d
Related guidance: WCAG 1.3.1 Info and Relationships
All form fields have an associated visible label. Where this isn't possible a non-visible label must be present.
How to implement
If you can, use the <label> tag and 'for' attribute to give form field elements visible labels.
Group sets of radio buttons or checkboxes using the <fieldset> tag and have an appropriate <legend> tag to label the group.
How to test
- click on the visible label for the form control you're testing
- if focus moves to the control or activates it then the control and the label are correctly associated
1.3.1e - Info and relationship - Landmarks Copy link to criterion 1.3.1e
Related guidance: WCAG 1.3.1 Info and Relationships
Content sections within a page should have an appropriate HTML5 section element or ARIA landmark role defined.
How to implement
As a minimum, you must include a main landmark (either the HTML 5 <main> or ARIA role="main") on each page.
Add extra landmarks, for example navigation and footer content, if the page has these areas.
How to test
- right click on the page and select the 'Inspect' option
- review the code to ensure that the main section of the page either uses the <main> tag or has role="main"
1.3.2 - Meaningful sequence Copy link to criterion 1.3.2
Related guidance: WCAG 1.3.2 Meaningful Sequence
When the order of content is important, the content order must be preserved no matter how it is presented to the user.
How to implement
The structure of your code should reflect the visual structure of the page.
This keeps the order of content meaningful for screen reader users, or users who have turned off visual styling.
How to test
- to check the reading order of the page, the visual styling needs to be switched off
- you can do this by using a simple bookmarklet or using the 'Reading view' option in the browser
- once enabled, you should read through the linearised content to check that the reading order follows the reading order with styles enabled
1.3.3 - Sensory characteristics Copy link to criterion 1.3.3
Related guidance: WCAG 1.3.3 Sensory Characteristics
Instructions must not depend on sensory characteristics like shape, size, colour, or location. This ensures that instructions can be understood by users who are unable to see or recognise information communicated using sensory characteristics.
How to implement
Do not rely on visual descriptions like 'green' or 'below' to communicate user instructions. For example, in 'Press the green 'Next' button to continue', the colour is supplemented by non-sensory information.
How to test
If the page contains any instructions around where to find, or how to interact with, content on the website, check that these instructions do not rely on the ability of users to perceive shape, size, visual location or sound.
1.3.4 - Orientation Copy link to criterion 1.3.4
Related guidance: WCAG 1.3.4 Orientation
A page view must not be locked to either horizontal or vertical views only, unless this is essential.
How to implement
Let the user view pages in their preferred orientation.
Use CSS to allow both landscape and portrait.
Do not try to force a specific orientation or aspect ratio.
How to test
View the page on a mobile device and change the orientation.
1.3.5 - Identify input purpose Copy link to criterion 1.3.5
Related guidance: WCAG 1.3.5 Identify Input Purpose
In an input field, the purpose of each input field that collects information about the user can be understood by assistive technologies and browsers by using autocomplete.
How to implement
If a form field relates to the user's personal information, include an explicit autocomplete attribute with the relevant value.
How to test
Right click on each form field requiring information that can be suggested by the browser, select 'Inspect' and check that the autocomplete attribute is included in its source code and that the correct value has been given to this attribute.
Distinguishable
1.4.1 - Use of colour Copy link to criterion 1.4.1
Related guidance: WCAG 1.4.1 Use of Colour
Information conveyed with colour must also be identifiable from context, labelling, or alternative forms.
How to implement
When rendered in monochrome, information does not disappear.
Do not only use colour to indicate important content. Use a visible border and label, underline or other visual effect as well.
How to test
If colour is used to convey information or distinguish between items, check that the same information is provided via an alternative means.
1.4.2 - Audio control Copy link to criterion 1.4.2
Related guidance: WCAG 1.4.2 Audio Control
Audio/video must not play automatically unless the user is pre-warned and can control the audio.
How to implement
Audio or video content that plays automatically, for example an alert sound, lasts for three seconds or less.
Audio or video that plays automatically and lasts for more than three seconds can be paused and/or stopped using on screen controls.
How to test
- listen to the page without any assistive technology running
- ensure that any sounds that play automatically only last for 3 seconds or less
- if a sound lasts for more than 3 seconds, check that audio controls are available
1.4.3 - Contrast Copy link to criterion 1.4.3
Related guidance: WCAG 1.4.3 Contrast
There should be enough difference (contrast) between a background and the foreground content so that user can easily differentiate the two.
How to implement
Text, including text in images, must have a contrast ratio of at least 4.5:1 against its background colour.
Where text crosses different background colours or an image, all the text must meet the contrast requirement.
How to test
Use the Colour Contrast Analyser to check that the contrast ratio between text and background colours is at least 4.5:1 for standard text.
1.4.4 - Resize text Copy link to criterion 1.4.4
Related guidance: WCAG 1.4.4 Resize Text
Users should be able to resize text up to 200% without any problems with the presentation and structure of the page (for example truncated text, overlaps or missing items).
How to implement
Avoid setting specific width and height sizes for containers if you can, so they will adapt to the size of the content they contain.
Use relative text sizing, like percent sizes, em units or named font sizes.
How to test
Use the Zoom functionality of the browser to enlarge the page to 200% and check that you can access all content without having to scroll horizontally.
1.4.5 - Images of text Copy link to criterion 1.4.5
Related guidance: WCAG 1.4.5 Images of Text
Meaningful text must not be presented as part of an image because it cannot be resized, it deteriorates in quality when magnified and is not customisable by the end user.
How to implement
Do not use images for meaningful text that gives users information. Text in some types of images, like SVGs, can resize without deterioration, but cannot be customised.
How to test
Turn images off and check that no text disappears.
Select all the text on the page - any images of text will not be selectable.
1.4.10 - Reflow Copy link to criterion 1.4.10
Related guidance: WCAG 1.4.10 Reflow
Users should be able to magnify the page up to 400% and content should reflow - move into one column - and not add horizontal scroll bars (exemptions apply).
How to implement
Make sure your pages are responsive, so the content will 'reflow' to a single column gracefully.
How to test
Use the Zoom functionality of the browser to enlarge the page to 400% and check that you can access all content without having to scroll horizontally.
1.4.11 - Non-text contrast Copy link to criterion 1.4.11
Related guidance: WCAG 1.4.11 Non-text Contrast
Interactive controls, keyboard focus, icons and content required for understanding, for example, charts and infographics must have enough contrast (at least 3:1) with adjacent colours.
How to implement
Buttons or other inputs and controls must have a contrast ratio of 3:1 or higher in all their states.
Parts of graphical objects, like icons, that convey information must have a minimum contrast ratio of 3:1 with adjacent colours.
How to test
Use the Colour Contrast Analyser to check that the contrast ratio between each informative object within icons and its surrounding colours is at least 3:1.
1.4.12 - Text spacing Copy link to criterion 1.4.12
Related guidance: WCAG 1.4.12 Text Spacing
For regular HTML page content, no loss of content or functionality happens when a user changes line height, letter or word spacing.
How to implement
Make sure your CSS lets users adjust:
- 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 Text Spacing tool to test text spacing on a webpage.
1.4.13 - Content on hover or focus Copy link to criterion 1.4.13
Related guidance: WCAG 1.4.13 Content on Hover or Focus
Ensuring that extra content eg tooltips can be viewed easily, don't cover up key content, and can be dismissed without moving focus or hover.
How to implement
Position the additional content so that it does not obscure any other content, including the trigger.
Provide an easy way to dismiss the additional content, such as by pressing Escape or selecting a close button.
How to test
When new content appears on mouse over or on keyboard focus complete the following checks:
- check that you can dismiss the new content by pressing the Esc key or a close button
- check that you can move the mouse pointer to the new content
- check that the new content does not disappear until you move the mouse pointer or keyboard focus to the next item on the page
Operable
All interactive components and page navigations must be operable via different input modalities.
Users should be able to easily navigate around the site and have enough time to interact with the content without discomfort or physical reactions.
Keyboard accessible
2.1.1 - Keyboard accessible Copy link to criterion 2.1.1
Related guidance: WCAG 2.1.1 Keyboard Accessible
It must be possible for someone using a keyboard to complete all tasks in a service.
How to implement
Ensure all interactive elements can be accessed and operated using only the keyboard.
How to test
Navigate through the page using only the Tab key and test all interactive elements.
2.1.2 - No keyboard trap Copy link to criterion 2.1.2
Related guidance: WCAG 2.1.2 No Keyboard Trap
No item traps the keyboard focus; upon reaching any item on the page, it is possible to move to the item that precedes or follows it using the keyboard.
How to implement
Ensure that keyboard focus can always be moved away from any element using standard keyboard navigation.
How to test
Navigate through all interactive elements and verify that focus can always be moved to the next or previous element.
2.1.4 - Character key shortcuts Copy link to criterion 2.1.4
Related guidance: WCAG 2.1.4 Character Key Shortcuts
If single character key shortcuts have been set up within a page, the user can switch them off or remap them.
How to implement
Provide a mechanism to disable or remap single character shortcuts to avoid conflicts with assistive technologies.
How to test
Check if single character shortcuts exist and verify they can be disabled or remapped.
Enough time
2.2.1 - Timing adjustable Copy link to criterion 2.2.1
Related guidance: WCAG 2.2.1 Timing Adjustable
When a time limit, like a session timeout, is set ensure a user is informed, especially if this may result in a loss of data.
How to implement
Provide warnings before timeouts and allow users to extend time limits when possible.
How to test
Check that users are warned about time limits and can extend them if needed.
2.2.2 - Pause, stop, hide Copy link to criterion 2.2.2
Related guidance: WCAG 2.2.2 Pause, Stop, Hide
Avoid moving or animated content on pages. When content moves automatically for more than 5 seconds, it must be possible for users to pause, stop or hide it.
How to implement
Provide controls to pause, stop, or hide moving content that lasts more than 5 seconds.
How to test
Check that moving content can be paused, stopped, or hidden by users.
Seizures and physical reactions
2.3.1 - Three flashes or below Copy link to criterion 2.3.1
Related guidance: WCAG 2.3.1 Three Flashes or Below
A page must not contain content that flashes more than 3 times a second.
How to implement
Avoid content that flashes more than 3 times per second to prevent seizures.
How to test
Check that no content flashes more than 3 times per second.
Navigable
2.4.1 - Bypass blocks Copy link to criterion 2.4.1
Related guidance: WCAG 2.4.1 Bypass Blocks
When there is repeated content (like a header) at the top of the page, there must be a way for keyboard users to move focus directly to the start of the main content area.
How to implement
Provide a "skip to main content" link or use proper heading structure to allow users to bypass repeated content.
How to test
Check that keyboard users can skip repeated content and go directly to the main content.
2.4.2 - Page titled Copy link to criterion 2.4.2
Related guidance: WCAG 2.4.2 Page Titled
Each page must have a unique title that indicates its topic or purpose.
How to implement
Use descriptive and unique page titles that clearly indicate the page content.
How to test
Check that each page has a unique, descriptive title in the browser tab.
2.4.3 - Focus order Copy link to criterion 2.4.3
Related guidance: WCAG 2.4.3 Focus Order
It must be possible to navigate through content in a way that makes sense.
How to implement
Ensure the tab order follows a logical sequence that matches the visual layout.
How to test
Tab through the page and verify the focus order follows a logical sequence.
2.4.4 - Link purpose (in context) Copy link to criterion 2.4.4
Related guidance: WCAG 2.4.4 Link Purpose (in Context)
Link text should make it clear what the link is (where it goes). Links should make sense out of context.
How to implement
Use descriptive link text that clearly indicates the destination or purpose of the link.
How to test
Read link text out of context and verify it clearly indicates the link's purpose.
2.4.5 - Multiple ways Copy link to criterion 2.4.5
Related guidance: WCAG 2.4.5 Multiple Ways
Unless the service is a series of steps, there must be different ways for people to locate and navigate content.
How to implement
Provide multiple navigation methods such as site maps, search, and navigation menus.
How to test
Verify that users can find content through multiple navigation methods.
2.4.6 - Headings and labels Copy link to criterion 2.4.6
Related guidance: WCAG 2.4.6 Headings and Labels
Headings must indicate the topic or purpose of the content in that section of the page, and labels must indicate the purpose of the field they relate to.
How to implement
Use descriptive headings and labels that clearly indicate the content or purpose.
How to test
Check that headings and labels are descriptive and indicate their purpose.
2.4.7 - Focus visible Copy link to criterion 2.4.7
Related guidance: WCAG 2.4.7 Focus Visible
It must be easy to tell which element has keyboard focus.
How to implement
Ensure that focused elements have a visible focus indicator that meets contrast requirements.
How to test
Tab through the page and verify that focused elements have a visible focus indicator.
2.4.11 - Focus not obscured (minimum) Copy link to criterion 2.4.11
Related guidance: WCAG 2.4.11 Focus Not Obscured (Minimum)
This Success Criterion is about ensuring a component that currently has focus is not entirely obscured by another element.
How to implement
Ensure that focused elements are not completely hidden by other content like modals or overlays.
How to test
Check that focused elements remain visible and accessible when other content appears.
Input modalities
2.5.1 - Pointer gestures Copy link to criterion 2.5.1
Related guidance: WCAG 2.5.1 Pointer Gestures
Any functionality which requires a multipoint or path based gestures has an alternative single pointer, non path-based gesture.
How to implement
Provide single-click alternatives for complex gestures like pinch-to-zoom or swipe.
How to test
Verify that all functionality can be accessed with single pointer actions.
2.5.2 - Pointer cancellation Copy link to criterion 2.5.2
Related guidance: WCAG 2.5.2 Pointer Cancellation
Any script triggering must be done on the 'up' event - not the 'down' event.
How to implement
Trigger actions on pointer up rather than pointer down to allow users to cancel actions.
How to test
Check that actions trigger on pointer up, not pointer down.
2.5.3 - Label in name Copy link to criterion 2.5.3
Related guidance: WCAG 2.5.3 Label in Name
For user interface components with labels that include text or images of text, the accessible name contains the text that is presented visually.
How to implement
Ensure that the accessible name matches the visible label text.
How to test
Check that screen readers announce the same text that is visible on screen.
2.5.4 - Motion actuation Copy link to criterion 2.5.4
Related guidance: WCAG 2.5.4 Motion Actuation
Any functionality that is initiated by tilting or shaking (etc) a device, must be able to be inititated by a button, or other control.
How to implement
Provide button alternatives for motion-based interactions.
How to test
Verify that motion-based functionality can be triggered with buttons or other controls.
2.5.7 - Dragging movements Copy link to criterion 2.5.7
Related guidance: WCAG 2.5.7 Dragging Movements
This Success Criterion is about ensuring users can interact with components that can be dragged using only a pointer device.
How to implement
Provide single-pointer alternatives for drag and drop interactions.
How to test
Verify that drag and drop functionality can be completed with single pointer actions.
2.5.8 - Target size (minimum) Copy link to criterion 2.5.8
Related guidance: WCAG 2.5.8 Target Size (Minimum)
Success Criterion 2.5.8 allows a smaller size of 24 by 24 pixels for interactive components.
How to implement
Ensure interactive elements are at least 24x24 pixels in size.
How to test
Measure interactive elements to ensure they meet the minimum size requirement.
Understandable
Users must be able to understand the content.
Content must be understandable by different types of users, must appear and behave in predictable ways and users should be helped to correct mistakes.
Readable
3.1.x - Language of page and parts Copy link to criterion 3.1.x
Related guidance: WCAG 3.1.x Language of Page and Parts
The written language of the page must be identified in the code of the web page.
How to implement
Use the lang attribute on the html element and specify language for content in different languages.
How to test
Check that the lang attribute is present and correctly identifies the page language.
Predictable
3.2.1 - On focus Copy link to criterion 3.2.1
Related guidance: WCAG 3.2.1 On Focus
When a keyboard user focuses on a control it must not cause a change of context, such as loading a new page/tab.
How to implement
Avoid automatic context changes when elements receive focus.
How to test
Tab through form controls and verify that focus doesn't trigger unwanted actions.
3.2.2 - On input Copy link to criterion 3.2.2
Related guidance: WCAG 3.2.2 On Input
Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behaviour before using the component.
How to implement
Only change context when users explicitly submit forms or activate controls.
How to test
Test form interactions to ensure context changes only occur on explicit user actions.
3.2.3 - Consistent navigation Copy link to criterion 3.2.3
Related guidance: WCAG 3.2.3 Consistent Navigation
When ways to navigate content are repeated on multiple pages, they must be presented in a consistent manner.
How to implement
Maintain consistent navigation patterns across all pages of the website.
How to test
Check that navigation elements appear in the same order and location across pages.
3.2.4 - Consistent identification Copy link to criterion 3.2.4
Related guidance: WCAG 3.2.4 Consistent Identification
When features with the same functionality are used in multiple places, they must be identified in a consistent way.
How to implement
Use consistent labels and icons for similar functionality across the website.
How to test
Verify that similar functionality uses consistent identification across pages.
Input assistance
3.3.1 - Error identification Copy link to criterion 3.3.1
Related guidance: WCAG 3.3.1 Error Identification
When an error occurs the user is informed what caused the error, and the error is described in text in an accessible way.
How to implement
Error messages should be clear, specific and helpful. They should explain what went wrong and how to fix it.
How to test
Submit forms with invalid data and check that error messages are clear and explain what needs to be corrected.
3.3.2 - Labels or instructions Copy link to criterion 3.3.2
Related guidance: WCAG 3.3.2 Labels or Instructions
When data must be entered in a specific format or in a particular way, clear instructions must be associated with the form field.
How to implement
Provide clear labels and instructions for form fields, especially when specific formats are required.
How to test
Check that all form fields have clear labels and instructions where needed.
3.3.3 - Error suggestions Copy link to criterion 3.3.3
Related guidance: WCAG 3.3.3 Error Suggestions
When an error is detected, suggestions for correcting the issue must be provided unless the suggestion compromises security.
How to implement
Provide helpful suggestions for fixing errors, such as format examples or common corrections.
How to test
Test form submissions with errors and verify that helpful suggestions are provided.
3.3.4 - Error prevention Copy link to criterion 3.3.4
Related guidance: WCAG 3.3.4 Error Prevention
All transactions should be reversible, or confirmation must be required before submission.
How to implement
Provide confirmation steps for important actions or allow users to undo their actions.
How to test
Test that important actions have confirmation steps or can be undone.
Robust
Content must be robust and compatible with current and future tools, browsers and technologies.
Compatible
4.1.2 - Name, Role, Value Copy link to criterion 4.1.2
Related guidance: WCAG 4.1.2 Name, Role, Value
All interactive components must have an accessible name and role, and the state of the component must be communicated to assistive technologies.
How to implement
Ensure all interactive elements have proper ARIA attributes and semantic HTML markup.
How to test
Use browser developer tools to check that interactive elements have proper names, roles, and values.
4.1.3 - Status messages Copy link to criterion 4.1.3
Related guidance: WCAG 4.1.3 Status Messages
There are different situations where a page needs to dynamically display a status message. These messages need to be conveyed to assistive technology users.
How to implement
Use ARIA live regions to announce status messages to screen readers.
How to test
Test with screen readers to ensure status messages are announced appropriately.