Responsibility for each success criteria

Percieveable

1.1 Text Alternatives
Success criteria Content Design Code
1.1.1 Non-text Content (A) Yes No Yes
1.2 Time-based Media
Success criteria Content Design Code
1.2.1 Audio-only and Video-only (Prerecorded) (A) Yes No No
1.2.2 Captions (Prerecorded) (A) Yes No No
1.2.3 Audio Description or Media Alternative (Prerecorded) (AA) Yes No No
1.2.4 Captions (Live) (AA) Yes No No
1.2.5 Audio Description (Prerecorded) (AA) Yes No No
1.3 Adaptable
Success criteria Content Design Code
1.3.1 Info and Relationships (A) Yes No Yes
1.3.2 Meaningful Sequence (A) Yes No Yes
1.3.3 Sensory Characteristics (A) Yes No No
1.4 Distinguishable
Success criteria Content Design Code
1.4.1 Use of Color (A) No Yes No
1.4.2 Audio Control (A) No Yes No
1.4.3 Contrast (Minimum) (AA) No Yes No
1.4.4 Resize text (AA) No Yes Yes
1.4.5 Images of Text (AA) No Yes Yes

Operable

2.1 Keyboard Accessible
Success criteria Content Design Code
2.1.1 Keyboard (A) No No Yes
2.1.2 No Keyboard Trap (A) No No Yes
2.2 Enough Time
Success criteria Content Design Code
2.2.1 Timing Adjustable (A) No Yes Yes
2.2.2 Pause, Stop, Hide (A) No Yes Yes
2.3 Seizures
Success criteria Content Design Code
2.3.1 Three Flashes or Below Threshold (A) No Yes No
2.4 Navigable
Success criteria Content Design Code
2.4.1 Bypass Blocks (A) No Yes Yes
2.4.2 Page Titled (A) Yes No Yes
2.4.3 Focus Order (A) No Yes Yes
2.4.4 Link Purpose (In Context) (AA) Yes Yes Yes
2.4.5 Multiple Ways (AA) No Yes No
2.4.6 Headings and Labels (AA) Yes No No
2.4.7 Focus Visible (AA) No Yes Yes

Understandable

3.1 Readable
Success criteria Content Design Code
3.1.1 Language of Page (A) Yes No Yes
3.1.2 Language of Parts (AA) Yes No Yes
3.2 Predictable
Success criteria Content Design Code
3.2.1 On Focus (A) No Yes Yes
3.2.2 On Input (A) No Yes Yes
3.2.3 Consistent Navigation (AA) No Yes No
3.2.4 Consistent Identification (AA) Yes Yes No
3.3 Input Assistance
Success criteria Content Design Code
3.3.1 Error Identification (A) Yes Yes Yes
3.3.2 Labels or Instructions (A) Yes Yes No
3.3.3 Error Suggestion (AA) Yes Yes Yes
3.3.4 Error Prevention (Legal, Financial, Data) (AA) Yes Yes Yes

Robust

4.1 Compatible
Success criteria Content Design Code
4.1.1 Parsing (A) No No Yes
4.1.2 Name, Role, Value (A) No No Yes

Percieveable

1.1 Text Alternatives

1.1.1 Non-text content (A)

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.

Requirements
  • Images (like logos and icons) that communicate information have short text descriptions;
  • Editorial images that support the text around them have short descriptions;
  • Images (like infographics, charts and diagrams) that communicate complex information also have longer text descriptions within the same page;
  • Decorative images have empty text descriptions.
Common issues
  • The image communicates information but does not have a text description;
  • The text description does not communicate the same information as the image;
  • The image has a text description but, like a placeholder or file name, it does not communicate the information in the image;
  • The image has a text description that is an exact duplication of content elsewhere on the page.
Useful resources

1.2 Time-based Media

1.2.1 Audio-only and video-only (A)

All content that is audio-only like a podcast, or video-only like a silent movie, must have a text description or an audio description. This ensures that information communicated for sight and sound is available to people who cannot see or hear.

Requirements
  • Audio only content that communicates information (like a podcast) has a text transcript;
  • Video-only content that communicates information (like a silent movie) has a text transcript that describes the video or a audio description.
Common issues
  • Audio-only content that communicates information does not have a text transcript;
  • Video-only content that communicates information does not have a text transcript or an audio description;
  • The text transcript for audio-only content does not include all spoken dialogue and sound effects;
  • The text transcript for video-only content does not include descriptions of all important visual information;
  • The text transcript for audio-only or video-only content is not clearly labelled as such.
  • The audio description for video-only content does not include descriptions of all important visual information;
Useful resources

1.2.2 Captions (A)

Video content like instructional videos, promotions and interviews, must have captions that are synchronised with the audio content of the video. This ensures that the information communicated by the audio part of the video is available to people who cannot hear it.

Requirements
  • All video content has captions that are synchronised with the audio content of the video;
  • Captions include all the spoken dialogue and important sound effects from the audio part of the video.
Common issues
  • The video does not have synchronised captions;
  • The video has captions but they do not include all the spoken dialogue and important sound effects from the audio content of the video;
  • The video has captions but they are not synchronised with the audio content of the video.
Useful resources

1.2.3 Audio description or media alternative (A)

Video content like instructional videos must have audio description, unless it already has a text alternative. This ensures that information communicated visually in the video is available to people who cannot see it.

Requirements
  • Video content is audio described, or has a text alternative that describes the visual content of the video.
Common issues
  • The video does not have audio description or a text alternative;
  • The audio description does not describe important information communicated visually in the video;
  • The text alternative does not describe important information communicated visually in the video;
  • The audio description is not synchronised to complement the audio content of the video.
Useful resources

1.2.4 Captions (live) (AA)

Live broadcast video must have captions that are synchronised with the audio content of the video. This ensures that the information communicated by the audio part of the video is available to people who cannot hear it.

Requirements
  • All live video content has captions that are synchronised with the audio content of the video.
Common issues
  • The live video does not have synchronised captions;
  • The live video has captions but they are not synchronised with the audio content of the video.
Useful resources

1.2.5 Audio description (pre-recorded) (AA)

Video content like instructional videos must have audio description. This ensures that information communicated visually in the video is available to people who cannot see it.

Requirements
  • Video that includes important visual information has audio description;
Common issues
  • A video includes important visual information but does not have audio description;
  • The audio description does not describe important information communicated visually in the video;
  • The audio description is not synchronised to complement the audio content of the video.
Useful resources

1.3 Adaptable

1.3.1 Info and relationships (A)

When content structures like tables, lists and headings are communicated visually, they must also be communicated in ways that assistive technologies can understand. This ensures that content structures are available to screen reader, screen magnifier and speech recognition tool users.

Requirements
  • Tabular data is presented using proper HTML markup (<table>, <tr>, <th>, and <td> elements);
  • Lists of items are presented using proper HTML markup (<ul>, <ol>, and <li> elements);
  • Headings are presented using proper HTML markup (<h1> through <h6> elements);
  • Form fields have properly associated <label> elements;
  • Sets of radio buttons or checkboxes have a <fieldset> element to group them together, and a <legend> element to provide a label for the group;
  • Form fields with format requirements or other additional information have properly associated hints.
Common issues
  • Tabular data is displayed using CSS to present the appearance of a table, but the proper HTML markup has not been used;
  • A list of items is presented using line breaks to separate each item, and the proper HTML markup has not been used;
  • Headings are text styled with CSS, and the proper HTML markup has not been used;
  • Headings use the proper HTML markup, but do not accurately represent the hierarchy of content on the page (starting with <h1>, then <h2> for each section, <h3> for each sub-section and so on);
  • Form fields do not have labels;
  • Form fields have labels but they are not properly associated with their corresponding fields;
  • Sets of radio buttons or checkboxes are not grouped inside a <fieldset> element, and do not have a <legend> element to provide a label for the group;
  • Form fields have format requirements or additional information, but it is not properly associated with the corresponding field.
Useful resources

1.3.2 Meaningful sequence (A)

When the order of content is important, the content order must be preserved no matter how it is presented to the user. This ensures that the order of content is meaningful whether someone is looking at it, listening to it with a screen reader, or has stripped out visual styling using a browser plugin.

Requirements
  • The visual order of content matches the underlying code order;
  • Tabular data is presented using proper HTML markup (<table>, <tr>, <th>, and <td> elements).
Common issues
  • The DOM order does not match the visual order because CSS properties like flexbox and grid-layout have been used to alter the visual presentation;
  • When CSS styles are disabled, the content order is meaningless;
  • Tabular data is displayed using CSS to present the appearance of a table, but the proper HTML markup has not been used;
  • The tabindex attribute has been used to force a tab order through the content.
Useful resources

1.3.3 Sensory characteristics (A)

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.

Requirements
  • Do not use shape, size, colour, or location to communicate instructions.
Common issues
  • An instruction tells users to “activate the green button”;
  • An instruction tells users to “use the menu on the left of the page”;
  • An instruction tells users they can “find more information in the square box”;
  • An instruction tells users to “follow the biggest link in the tag cloud”.
Useful resources
  • TBC

1.4 Distinguishable

1.4.1 Use of Colour (A)

Colour must not be the only thing that identifies or differentiates a piece of informative content. This ensures that people who are unable to see colours, and people who have difficulty distinguishing different colours, can still tell different pieces of content apart.

Requirements
  • When rendered in monochrome, information does not disappear.
  • Text identified by colour as having special meaning has another indicator - a visible border and label, underline or other visual effect.
  • Information graphics and charts that use colour as a key also provide distinctive non-colour differences - hatching patterns or directly applied labels.
    Common issues
  • Graphics and charts use colours without redundant patterns or size differences.
  • Colour-coding text or backgrounds to indicate essential content, pass/fail categorisation, etc.
  • Links are only distinguished from plain text by colour
    Useful resources
  • TBC

1.4.2 Audio control (A)

When audio or video plays automatically on a page, it should last for less than three seconds or there must be a way to pause/stop it. This ensures that people who listen to content with a screen reader can do so without it being drowned out by the audio/video.

Requirements
  • Audio or video content that plays automatically 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.
Common issues
  • Audio or video plays automatically for more than three seconds, but cannot be paused or stopped by the user.
Useful resources
  • TBC

1.4.3 Contrast minimum (AA)

Text must have a contrast ratio of at least 4.5:1 against its background colour. This makes content easier for everyone to read, but especially partially sighted people.

Requirements
  • Text (whether plain text or in an image) has a contrast ratio of at least 4.5:1 against its background colour.
Common issues
  • Text does not have a contrast ratio of at least 4.5:1 against its background colour.
Useful resources
  • TBC

1.4.4 Resize text (AA)

It must be possible for people to increase the size of text by up to 200%. This ensures that partially sighted people can comfortably read content.

Requirements
  • We need to decide whether we want to use text resize or zoom as the preferred mechanism.

1.4.5 Images of text (AA)

Text must not be presented as part of an image because it cannot be resized, and it deteriorates in quality when magnified. This means that everyone is able to read and access information presented in text.

Requirements
  • Text is not presented as part of an image;
  • Text is presented using plain text and styled with CSS.
Common issues
  • Images contain text.
Useful resources
  • TBC.

Operable

2.1 Keyboard Accessible

2.1.1 Keyboard (A)

It must be possible for someone using a keyboard or touch device to complete all tasks in a service. This ensures that people with mobility impairments who do not use a mouse can successfully complete their goals.

Requirements
  • All interaction and functionality is usable with a keyboard;
  • All interaction and functionality is usable on a touch-screen device.
Common issues
  • A custom widget has been created, but the necessary keyboard support has not been provided;
  • An <a> element has been used as the basis for a button, but the additional keyboard interaction (activation with the space key) has not been provided;
  • A dialogue opens but cannot be dismissed by touch, because it does not have a close button;
  • The tabindex attribute has been used with a value of “-1” to mistakenly remove it from the tab order.
Useful resources

2.1.2 No keyboard trap (A)

When someone using a keyboard to navigate content moves to an element, they must be able to move away from it again. This ensures that people who use a keyboard do not get stuck on any part of the page.

Requirements
  • Keyboard focus can move to an element and away again.
Common issues
  • A dialogue opens but cannot be closed with the keyboard, preventing the user from accessing the original content underneath;
  • Content is presented in an infinite scroll, so a keyboard user is forced to tab through everything before they can exit the scroll area.
Useful resources
  • TBC

2.2 Enough Time

2.2.1 Timing adjustable (A)

When a time limit like a session timeout is set, it must be possible for the user to turn it off, delay it, or extend the length of time. This ensures that people who need longer to complete tasks because of cognitive or mobility impairments, are able to do so comfortably.

Requirements
  • A mechanism is available to let users turn off, delay or extend time limits.
Common issues
  • A time limit is set, but a user is unable to turn it off, delay it, or extend it;
  • A time limit warning is displayed, but a user’s attention is not drawn to it in an appropriate way.
Useful resources

2.2.2 Pause, stop, hide (A)

When content moves (is animated, blinks or scrolls) automatically for more than five seconds, or when content automatically updates on the page, it must be possible for users to Pause, stop or hide it. This ensures that people with cognitive disabilities that affect focus and concentration, are not distracted by movement.

Requirements
  • A mechanism is available that lets users pause, stop or hide the moving or updating content;
  • Content does not move (animate, blink or scroll) for more than five seconds;
  • Content does not update automatically.
Common issues
  • Content moves for more than five seconds but there is no mechanism for a user to pause, stop or hide it.
Useful resources
  • TBC

2.3 Seizures

2.3.1 Three flashes or below (A)

A page must not contain content that flashes more than three times a second. This ensures that people with conditions like photosensitive Epilepsy are protected from harmful seizures.

Requirements
  • Content does not flash more than three times a second.
Common issues
  • Content flashes at more than three times a second.
Useful resources
  • TBC

2.4 Navigable

2.4.1 Bypass blocks (A)

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 of the page. This ensures that people who do not use a mouse can quickly and easily reach the primary content of the page.

Requirements
  • A “Skip to main content” link is provided, and the link is located close to the start of the page;
  • The <main> element is used to represent the main content area of the page.
Common issues
  • The <main> element has been used, but there is no skip link that points to it;
  • A skip link has been provided, but it does not work in all supported browsers;
  • A skip link is provided, but it is only available to screen reader users.
Useful resources
  • TBC

2.4.2 Page title (A)

Each page must have a unique title that indicates its topic or purpose. This ensures that people with cognitive disabilities can quickly orientate themselves within the service and identify the purpose of the page without interpreting its entire contents.

Requirements
  • Each page has a title that is unique within the service;
  • Each page has a title that indicates its topic or purpose.
Common issues
  • The page title is not unique within the service;
  • The page title does not indicate its topic or purpose;
  • The title does not indicate the page is part of a service on Gov.UK;
  • The page title does not change because the service is a Single Page Application (SPA).
Useful resources

2.4.3 Focus order (A)

It must be possible to navigate through content in a way that makes sense. This ensures that content can be navigated in a logical way by screen reader users, keyboard users, and people who choose to use their own CSS style sheets.

Requirements
  • The visible focus order matches the DOM focus order.
Common issues
  • The DOM order does not match the visual order because CSS properties like flexbox and grid-layout have been used to alter the visual presentation;
  • When CSS styles are disabled, the focus order is meaningless;
  • When a user interaction causes content to be displayed, it does so before the trigger control in the DOM order.
Useful resources
  • TBC

The purpose of every link must be clear from its link text, or its link text plus associated content if assistive technologies recognise the association. This ensures that screen reader users can understand the purpose of links without reading nearby content, and that speech recognition users can target links accurately using voice commands.

Requirements
  • Link text clearly indicates the purpose of the link;
  • Multiple links that point to the same destination have the same link text;
  • Links have accessible names.
Common issues
  • A link has text that does not indicate its purpose;
  • A link points to the same destination as another link, but uses different link text;
  • A link points to a unique destination, but uses the same text as other links;
  • A link has text that depends on nearby content to be understood, but that content is not automatically identified by assistive technologies;
  • A link uses a CSS background image, and has no visible accessible name.
Useful resources

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. Different people will have different preferences, for example someone with a cognitive disability may prefer to browse a sitemap to locate content, whereas someone using magnification may prefer to use search instead of scroll through a lengthy navigation block.

Requirements
  • Hmm. Difficult to phrase this in a way that’s relevant for GDS.

2.4.6 Headings and labels (AA)

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. This ensures people with reading difficulties can understand the purpose of content, and that screen reader users can easily navigate to relevant sections of content on the page.

Requirements
  • Headings describe the purpose or topic of the content that follows;
  • Labels indicate the purpose of the fields they relate to.
Common issues
  • A heading does not indicate the purpose or topic of the content that follows;
  • A label does not indicate the purpose of the field it relates to.
Useful resources
  • TBC

2.4.7 Focus visible (AA)

It must be easy to tell which element has keyboard focus. This helps sighted keyboard users orient themselves within the page, and confidently interact with it.

Requirements
  • Interactive elements like links, buttons, and form fields, have a visible focus indicator.
Common issues
  • The browser default focus indicator has not been replaced with something that is easier to see;
  • An indicator has been provided for mouse hover, but not duplicated for keyboard focus.
Useful resources
  • TBC.

Understandable

3.1 Readable

3.1.1 Language of page (A)

The written language of the page must be identified in the code of the web page. This makes sure that screen readers automatically use the correct speech libraries for accent and pronunciation.

Requirements
  • The language is identified using the lang attribute of the <html element.
Common issues
  • No lang attribute is present on the <html> element.
  • The lang attribute is present on the <html> element, but it incorrectly identifies the language of the page.
Useful resources

3.1.2 Language of parts (A)

When content is displayed in a language that is different from the primary language of the page, it must be indicated in a way that assistive technologies understand. This ensures that screen readers switch to the appropriate accent and pronunciation for that language.

Requirements
  • Content that is written in a different language from the primary language of the page, is identified using HTML (the lang attribute).
Common issues
  • Content uses a different language, but the change in language is not identified in the HTML;
  • Content uses a different language, and the wrong language is identified in the HTML.
Useful resources

3.2 Predictable

3.2.1 On Focus (A)

When a keyboard user focuses on a control it must not cause a change of context, such as loading a new page/tab. This stops unexpected things happening without screen reader and screen magnifer users being aware of it.

Requirements
  • focus events do not cause navigation, nor form submission
  • components that respond to focus do not initiate a “focus trap”, where it is impossible or unclear how to navigate out of the component using the keyboard.
Common issues
  • Dropdown menus trigger navigation as the user tabs between options
  • Javascript triggers navigation when a user is merely leaving a form control
  • focus is moved by script in ways that surprise the user
Useful resources
  • TBC

3.2.2 On Input (A)

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.

Requirements
  • Users can predict what a control such as a button or drop-down menu will do
  • User interface components built with javascript have adequate and accurate ARIA labelling.
Common issues
  • Controls built with javascript lack appropriate ARIA information
  • Form controls are used to trigger navigation without an explicit submit step, and without warning
Useful resources

3.2.3 Consistent navigation (AA)

When ways to navigate content are repeated on multiple pages, they must be presented in a consistent manner. This makes it easier for people to learn how to navigate the service, and it enables people to develop strategies (like using screen reader shortcuts) for more efficient navigation.

Requirements
  • Navigation mechanisms are presented consistently wherever they are used.
Common issues
  • A main navigation block is used on multiple pages, but is located in a different place on each page;
  • A breadcrumb navigation is used on multiple pages, but is presented in a different format on each page.
Useful resources
  • TBC.

3.2.4 Consistent identification (AA)

When features with the same functionality are used in multiple places, they must be identified in a consistent way. This helps screen reader users correctly identify the type and purpose of the functionality.

Requirements
  • An icon has the same alternative text wherever it is used;
  • Buttons for “Next”, “Previous”, and “Continue”, are labelled consistently wherever they are used;
  • Form fields with the same purpose are consistently labelled wherever they are used.
Common issues
  • An icon is used to denote a file download, but has a different alternate text whenever it is used;
  • A search facility is provided on every page, but the text field and button have different labels on each page.
Useful resources
  • TBC.

3.3 Input Assistance

3.3.1 Error identification (A)

When an error occurs the user is informed what caused the error, and the error is described in text. This ensures that the error is available to people who cannot see, distinguish colours, or understand icons and other visual cues.

Requirements
  • Each error is described in text;
  • Each error is associated with the field it relates to;
  • Multiple errors are summarised at the top of the form.
Common issues
  • An error is only indicated by a red border around the field;
  • An error is only indicated by an icon near to the field;
  • An error is described in text, but it is not associated with the field it relates to;
  • Multiple errors occur, but no summary is provided.
  • An error summary is provided, but keyboard focus is not taken to it.
Useful resources
  • TBC

3.3.2 Labels or instructions (A)

When data must be entered in a specific format or in a particular way, clear instructions must be associated with the form field. This ensures that everyone understands any requirements for entering data, and does so in a way that ensures that people unable to see the information are made aware of it by their screen readers.

Requirements
  • Instructions are provided for fields that require data to be entered in a specific format;
  • Instructions are properly associated with the relevant form field.
Common issues
  • Data is expected in a specific format, but no iinstructions have been provided;
  • Instructions have been provided, but they are not associated with the relevant field.
Useful resources

3.3.3 Error suggestion (A)

When an error is detected, suggestions for correcting the issue must be provided unless the suggestion comprimises security. This helps everyone resolve issues more easily, but especially people with cognitive disabilities who find processing information difficult.

Requirements
  • When an error is detected, a suggestion is provided to help the user correct the issue.
Common issues
  • An error is detected and the user is notified, but no suggestion is given to help them resolve it; A login error is detected and a suggestion is provided, but it comprimises security by revelaing that a particular username exists.
Useful resources
  • TBC.

When completion of a form causes a legal commitment, triggers a financial transaction, or gives consent for personal data to be updated or changed, the user must be able to review, correct, and confirm that the information they have entered is correct, or they must be able to reverse the decision. This provides safeguards to help people with all disabilities, but especially those who are vulnerable to making mistakes.

Requirements
  • When data is submitted leading to a legal commitment, financial transaction, or to update or change personal data, an interim page is presented that allows the user to review, correct, and confirm the information they have entered.
Common issues
  • TBC.
Useful resources
  • TBC.

Robust

4.1 Compatible

4.1.1 Parsing (A)

The code of the page must not cause browser or assistive technology conflicts. This ensures that content and functionality is presented in a way that works reliably across all supported browsers and assistive technologies.

Requirements
  • HTML code must conform to the standard identified in the doctype statement;
  • ARIA code must conform to the rules for use with the host language (HTML).
Common issues
  • HTML elements are not well formed (opened and closed properly);
  • HTML elements include invalid attributes;
  • HTML id attributes use duplicate values within the same page;
  • ARIA attributes are invalid.
Useful resources

4.1.2 Name, role, value (A)

All interactive components must have an accessible name and role, and the state of the component must be communicated to assistive technologies. This ensures that screen reader users understand the purpose (role) of every component, how to identify it (name), and what state it is in.

Requirements
  • All interactive elements and components have an accessible name;
  • All interactive elements and components have a role (either implicit or explicit);
  • All interactive elements and components communicate information about their state.
Common issues
  • An <a> or <button> element contains no text content, and so has no accessible name;
  • A form field has no associated <label> element, and so has no accessible name;
  • A set of tabs is created using <ul>, <li>, and <a> elements, but ARIA has not been used to provide the tablist, tab, and tabpanel roles;
  • An <a> element has been used as the basis for a button, but the ARIA button role has not been applied;
  • A button is used as the trigger to disclose content, but the aria-expanded attribute has not been used to communicate the disclosure component’s current state;
  • A <div> or <span> has been used as the basis for an interactive component, but ARIA has not been used to identify the purpose of the component (or its constituent parts).
Useful resources