# Accessibility acceptance criteria > Template version 1.0, 2026-10-07, from https://auricartisan.com/templates/acceptance-criteria/ > Licence: CC0 1.0 (https://creativecommons.org/publicdomain/zero/1.0/). Copy it, change it and use it for anything; no credit needed. > The same criteria are in acceptance-criteria.csv, one row each, for importing into a tracker. > Copy what applies into your stories, change the examples to fit your product, then delete this note. Each criterion names the WCAG 2.2 success criterion it checks, and that criterion's level. The criteria cover common components, not every success criterion, so passing them all does not mean a page conforms to WCAG 2.2. ## Definition of done A story is done, for accessibility, when: - [ ] The acceptance criteria for each component the story adds or changes pass, tested as each one says. - [ ] Everything works with the keyboard alone, and focus is always visible. - [ ] The page works with text zoomed to 200%, and at 320 CSS pixels wide. - [ ] It has been used with at least one screen reader, such as NVDA with Firefox or VoiceOver with Safari. - [ ] An automated checker reports no new failures, and a person confirmed each result. - [ ] Text alternatives, labels, link text and error messages are final copy, not placeholders. - [ ] Anything that still fails is logged as an issue with its WCAG criterion and severity, and the team agreed to release with it. ## Acceptance criteria by component For each component a story adds or changes, copy its criteria into the story. ### Page and title #### PAGE-01: 2.4.2 Page Titled (Level A) - **Given** any page of the site - **When** it opens in a browser tab - **Then** its title describes the page's topic or purpose, such as "Your basket - Example Shop" - **How to test:** Read the title in the browser tab or the window list. Without looking at the page, it tells you what the page is for. #### PAGE-02: 3.1.1 Language of Page (Level A) - **Given** any page - **When** a browser or a screen reader reads it - **Then** the html element's lang attribute gives the page's main language, such as en or hi - **How to test:** Inspect the html element: lang is present and is a valid code for the language most of the page is in. #### PAGE-03: 2.4.1 Bypass Blocks (Level A) - **Given** a page that starts with a header and navigation repeated on other pages - **When** a keyboard user arrives on it - **Then** a skip link, or landmarks, let them go straight to the main content - **How to test:** Press Tab once after the page loads: a skip link appears and moves focus to the main content. Or list the landmarks with a screen reader and jump to main. #### PAGE-04: 1.3.1 Info and Relationships (Level A) - **Given** a page with sections - **When** assistive technology reads its structure - **Then** text that looks like a heading is coded as one (h1 to h6), and the header, navigation, main content and footer are marked as landmarks - **How to test:** List the headings and landmarks with a screen reader or a browser extension, and compare the list with what the page shows. #### PAGE-05: 1.4.4 Resize Text (Level AA) - **Given** a page - **When** the browser is zoomed to 200% - **Then** no text or control is cut off, overlaps or disappears - **How to test:** Zoom the browser to 200% and go through the whole page, including menus, dialogs and forms. #### PAGE-06: 1.4.10 Reflow (Level AA) - **Given** a page - **When** it is shown 320 CSS pixels wide, such as a 1280 pixel window at 400% zoom - **Then** everything can be read and used by scrolling in one direction only, except parts that need two dimensions, such as data tables and maps - **How to test:** Set the window to 1280 pixels wide and zoom to 400%, then scroll down the page: nothing is cut off, and only those parts scroll sideways. ### Links and buttons #### LINK-01: 2.1.1 Keyboard (Level A) - **Given** a link or a button - **When** a keyboard user reaches it with Tab and presses Enter - **Then** it does what a click does; a button also works with Space - **How to test:** Leave the mouse alone and use every link and button with Tab, Shift+Tab, Enter and Space. #### LINK-02: 2.4.7 Focus Visible (Level AA) - **Given** a link or a button - **When** it has keyboard focus - **Then** a visible focus indicator shows that it has focus - **How to test:** Tab through the page and check you can always see which element has focus, on every background. #### LINK-03: 2.4.4 Link Purpose (In Context) (Level A) - **Given** a link - **When** it is read with its sentence, paragraph, list item or table cell - **Then** its text, or its text with that context, says where it goes - **How to test:** List the links with a screen reader, then read each with the text around it: you can tell where each one goes. #### LINK-04: 4.1.2 Name, Role, Value (Level A) - **Given** a button that shows only an icon - **When** a screen reader reaches it - **Then** it is announced as a button with a name that says what it does, such as Search - **How to test:** Inspect the button in the browser's accessibility tree, or listen with a screen reader: its role is button and its name says what it does. #### LINK-05: 2.5.3 Label in Name (Level A) - **Given** a link or button with visible text - **When** a voice control user says that text - **Then** it is activated, because its accessible name contains the visible words - **How to test:** Compare the accessible name in the accessibility tree with the visible text: the name contains the visible words in the same order, best at the start. #### LINK-06: 2.5.8 Target Size (Minimum) (Level AA) - **Given** a link or button that is not inside a sentence - **When** its size is measured - **Then** it is at least 24 by 24 CSS pixels, or is spaced so that a 24 pixel circle centered on it does not overlap another target or another small target's circle - **How to test:** Measure each target with the browser's inspector. For any that is smaller, check the spacing with a 24 pixel circle. ### Form fields and labels #### FORM-01: 3.3.2 Labels or Instructions (Level A) - **Given** a form field - **When** it is shown - **Then** a visible label or instruction says what to enter, including any required format, such as DD/MM/YYYY - **How to test:** Look at each field and check that a visible label or instruction says what to enter and in what format. #### FORM-02: 4.1.2 Name, Role, Value (Level A) - **Given** a form field - **When** a screen reader focuses it - **Then** it announces the field's visible label, its type, and its value or state, such as checked - **How to test:** Tab to each field with a screen reader on, or inspect it in the accessibility tree: its name matches its label, and its role and state are right. #### FORM-03: 1.3.1 Info and Relationships (Level A) - **Given** a group of radio buttons or check boxes - **When** a screen reader moves into the group - **Then** it announces the group's question as well as each option, such as with fieldset and legend - **How to test:** Tab into the group with a screen reader on and check that the question is read with the first option. #### FORM-04: 1.3.5 Identify Input Purpose (Level AA) - **Given** a field that asks for the user's own details, such as name, email, phone or address - **When** a browser or assistive technology needs to know what it asks for - **Then** its autocomplete attribute names the purpose, such as autocomplete="email" - **How to test:** Inspect each such field for an autocomplete value from the list of input purposes in WCAG 2.2, and check that browser autofill fills it correctly. #### FORM-05: 3.3.7 Redundant Entry (Level A) - **Given** a later step of a process that needs information the user already gave, such as a billing address - **When** the step is shown - **Then** the information is filled in already, or the user can select it, such as with a Same as delivery address option - **How to test:** Go through the whole process and note each time you are asked for something you gave before: it is filled in or can be selected, unless entering it again is essential or for security. #### FORM-06: 3.3.8 Accessible Authentication (Minimum) (Level AA) - **Given** a sign-in or sign-up form - **When** the user enters a password or a code - **Then** pasting and password managers work, and no step relies on remembering, transcribing or solving a puzzle unless there is another way - **How to test:** Paste a password into each field and fill the form with a password manager. If there is a CAPTCHA, check it has another way through or asks only to recognize objects. ### Error messages #### ERROR-01: 3.3.1 Error Identification (Level A) - **Given** a form - **When** it is submitted with a field missing or wrong - **Then** each field in error is identified, and the error is described in text - **How to test:** Submit the form empty, then with wrong values: each error names its field and says what is wrong, in text a screen reader reads. #### ERROR-02: 3.3.3 Error Suggestion (Level AA) - **Given** an error the site knows how to correct - **When** the message is shown - **Then** it says how to fix it, such as "Enter the expiry date as MM/YY" - **How to test:** Trigger each error and check the message suggests a correction, unless that would weaken security. #### ERROR-03: 4.1.3 Status Messages (Level AA) - **Given** a message that appears without focus moving to it, such as "3 errors" or "Saved" - **When** it appears - **Then** screen readers announce it, because it is in a live region such as role="status" or role="alert" - **How to test:** With a screen reader on, trigger the message and listen; then check the code for the live region. #### ERROR-04: 3.3.4 Error Prevention (Legal, Financial, Data) (Level AA) - **Given** a form that makes a purchase or a legal commitment, or deletes the user's data - **When** the user submits it - **Then** it can be undone afterwards, or the details are checked with a chance to correct them, or the user reviews and confirms them before it is final - **How to test:** Go through the purchase, agreement or deletion and check there is a way to undo it, an error check, or a review step before it is final. ### Images #### IMAGE-01: 1.1.1 Non-text Content (Level A) - **Given** an image that carries information, or an image that is a link - **When** a screen reader reaches it - **Then** its text alternative gives the same information in words, or for a link, where the link goes - **How to test:** Turn images off, or read the page with a screen reader: nothing the images showed or did is lost. #### IMAGE-02: 1.1.1 Non-text Content (Level A) - **Given** an image that is only decoration - **When** a screen reader reads the page - **Then** it is skipped, because it has empty alt text (alt="") or is a CSS background - **How to test:** Inspect each decorative image for alt="", or listen with a screen reader: it says nothing for the image. #### IMAGE-03: 1.1.1 Non-text Content (Level A) - **Given** a chart, diagram or map - **When** someone cannot see it - **Then** a short text alternative names it, and its data or conclusion is also given in text, such as a table or a paragraph beside it - **How to test:** Read the text alternative and the text near the chart: together they give what the chart shows. #### IMAGE-04: 1.4.5 Images of Text (Level AA) - **Given** text in an image, such as a banner - **When** the same look could be made with styled text - **Then** real text is used instead, except in logos and where that look is essential - **How to test:** Zoom in or try to select the words: text in an image blurs and cannot be selected. Check that any left is a logo or essential. ### Modal dialog #### DIALOG-01: 2.4.3 Focus Order (Level A) - **Given** a modal dialog - **When** it opens - **Then** focus moves into it, and Tab and Shift+Tab stay within it while it is open - **How to test:** Open the dialog with the keyboard: focus lands inside it, and tabbing never reaches the page behind. #### DIALOG-02: 4.1.2 Name, Role, Value (Level A) - **Given** a modal dialog - **When** a screen reader reaches it - **Then** it is announced as a dialog with its title as its name, such as the dialog element or role="dialog" with aria-labelledby - **How to test:** Open it with a screen reader on: you hear that it is a dialog, and its title. #### DIALOG-03: 2.1.2 No Keyboard Trap (Level A) - **Given** an open modal dialog - **When** a keyboard user wants to leave it - **Then** the close button can be reached with Tab and Escape closes the dialog, so focus is never trapped - **How to test:** Open the dialog with the keyboard, then leave it with Escape, and again with its close button. #### DIALOG-04: 2.4.3 Focus Order (Level A) - **Given** a modal dialog - **When** it closes - **Then** focus returns to the control that opened it, or to the next logical place if that control is gone - **How to test:** Close the dialog with its button, with Escape and by finishing its task: each time, check where focus lands. ### Navigation menu #### NAV-01: 3.2.3 Consistent Navigation (Level AA) - **Given** the main navigation - **When** it appears on several pages - **Then** its links come in the same order on every page, unless the user changes it - **How to test:** Compare the navigation on several pages, at desktop and phone widths. #### NAV-02: 4.1.2 Name, Role, Value (Level A) - **Given** a menu or submenu that opens and closes - **When** a screen reader focuses its button - **Then** the button says whether the menu is expanded or collapsed, such as with aria-expanded - **How to test:** Open and close the menu with a screen reader on, or watch aria-expanded change in the inspector. #### NAV-03: 2.1.1 Keyboard (Level A) - **Given** the navigation and its submenus - **When** a keyboard user goes through them - **Then** every link can be reached, and every submenu opened and closed, with the keyboard - **How to test:** Use the whole menu with Tab, Enter, Space, the arrow keys and Escape, without a mouse. #### NAV-04: 1.4.13 Content on Hover or Focus (Level AA) - **Given** a submenu or tooltip that appears on hover or focus - **When** it appears - **Then** it can be dismissed without moving the pointer or focus, such as with Escape; the pointer can move onto it without it closing; and it stays until the user moves away, dismisses it, or it is no longer valid - **How to test:** Hover over the trigger and move onto the submenu, then press Escape. Tab to the trigger and press Escape too. #### NAV-05: 2.4.11 Focus Not Obscured (Minimum) (Level AA) - **Given** a sticky header, footer or banner - **When** keyboard focus moves to an element underneath it - **Then** the focused element is not entirely hidden - **How to test:** Tab through the whole page, including after scrolling, and check the sticky parts never cover the focused element completely. ### Data table #### TABLE-01: 1.3.1 Info and Relationships (Level A) - **Given** a data table - **When** a screen reader moves from cell to cell - **Then** it announces each cell's row and column headers, coded with th and scope, or with headers and id - **How to test:** Move through the table with the screen reader's table commands and listen for the headers. #### TABLE-02: 4.1.2 Name, Role, Value (Level A) - **Given** a table whose columns can be sorted - **When** a column is sorted - **Then** its header says the sort order, such as with aria-sort, and the control that sorts it is a button - **How to test:** Sort with the keyboard and a screen reader on, then check the column header reports the new order. #### TABLE-03: 1.4.10 Reflow (Level AA) - **Given** a data table wider than a phone screen - **When** the page is shown 320 CSS pixels wide - **Then** only the table scrolls sideways, inside its own region, and the rest of the page fits the width - **How to test:** Set a 320 pixel wide viewport and scroll down the page: only the table scrolls sideways. ### Video and audio #### MEDIA-01: 1.2.2 Captions (Prerecorded) (Level A) - **Given** a prerecorded video with sound - **When** it plays - **Then** captions are available for all speech and for sounds that matter, such as laughter or an alarm - **How to test:** Turn the captions on and the sound off: you can follow everything said and every sound that matters. #### MEDIA-02: 1.2.5 Audio Description (Prerecorded) (Level AA) - **Given** a prerecorded video - **When** it shows something important that the soundtrack does not say - **Then** an audio description is available that says it - **How to test:** Listen to the video without watching it, with audio description on: you get all the important visual information. #### MEDIA-03: 1.2.1 Audio-only and Video-only (Prerecorded) (Level A) - **Given** a prerecorded audio clip, such as a podcast - **When** it is published - **Then** a transcript of all speech and important sounds is available with it - **How to test:** Read the transcript while you listen and check nothing is missing. #### MEDIA-04: 1.4.2 Audio Control (Level A) - **Given** a page - **When** it loads - **Then** no audio plays on its own for more than 3 seconds, unless the user can pause or stop it, or change its volume separately from the system volume - **How to test:** Load the page. If sound plays for more than 3 seconds, find the control that pauses, stops or turns it down. #### MEDIA-05: 2.1.1 Keyboard (Level A) - **Given** a video or audio player - **When** a keyboard user uses it - **Then** every control, including play, pause, volume and captions, works with the keyboard - **How to test:** Use the player with Tab, Enter, Space and the arrow keys only. ### Animation and motion #### MOTION-01: 2.2.2 Pause, Stop, Hide (Level A) - **Given** content that moves, scrolls or blinks on its own, such as a carousel - **When** it lasts more than 5 seconds and is shown alongside other content - **Then** a control lets the user pause, stop or hide it - **How to test:** Wait on each page; for anything still moving after 5 seconds, find and use its pause or stop control. #### MOTION-02: 2.3.1 Three Flashes or Below Threshold (Level A) - **Given** an animation or a video - **When** it plays - **Then** nothing flashes more than three times in any one second, unless the flashes are below the general and red flash thresholds - **How to test:** Watch for flashing. If anything flashes quickly, measure it with a flash analysis tool. #### MOTION-03: 2.3.3 Animation from Interactions (Level AAA) - **Given** an animation started by an interaction, such as parallax scrolling or a zooming page transition - **When** the user has set their system to reduce motion - **Then** the animation is turned off or replaced by one without motion, unless it is essential - **How to test:** Turn on reduce motion in the operating system, reload the page and use it: the moving effects are gone. #### MOTION-04: 2.5.4 Motion Actuation (Level A) - **Given** a feature that works by shaking or tilting the device - **When** the user cannot or does not want to move the device - **Then** a button or other control does the same thing, and responding to motion can be turned off - **How to test:** Find each motion feature and do the same with an on-screen control. Then turn motion off and check that shaking does nothing. ### Color and contrast #### COLOR-01: 1.4.3 Contrast (Minimum) (Level AA) - **Given** text, and images of text - **When** they are measured against their background - **Then** contrast is at least 4.5:1, or 3:1 for large text (at least 24px, or 18.66px bold) - **How to test:** Measure each text color on each background it sits on, including hover states, with a contrast checker. Logos and inactive controls are exempt. #### COLOR-02: 1.4.11 Non-text Contrast (Level AA) - **Given** the parts needed to see a control or its state, such as a field's border, a focus indicator or a check mark, and the parts of icons and charts needed to understand them - **When** they are measured against the colors next to them - **Then** contrast is at least 3:1 - **How to test:** Measure borders, focus indicators, icons and chart lines against the colors next to them with a contrast checker. #### COLOR-03: 1.4.1 Use of Color (Level A) - **Given** information shown by color, such as a required field, an error, a link in text or a line in a chart - **When** someone cannot tell the colors apart - **Then** the same information is also shown another way, such as text, an icon, an underline or a pattern - **How to test:** View the page in grayscale or with a color vision simulator, and check nothing is lost.