Accessibility
Accessibility test library
About this library
This test library is in beta and may change. As this library matures, we welcome your feedback on the tests, structure, and results. Share feedback in the #platform-design-system Slack channel or on GitHub.
This library provides the specific tests we use to evaluate design system components for accessibility. Each test maps to WCAG 2.2 success criteria and builds on the VA Platform team’s accessibility testing manual.
We’re actively auditing components using these tests. On each component page, the “Accessibility tests” section shows the status of each test across each environment. Not all components have test results yet.
For details on our overall testing approach, principles, and methodology, see Accessibility testing for design system components.
How to read the test library
Understanding test IDs
Test IDs show the test source and which POUR principle and WCAG criterion they test.
Format: WEB/VADS-CRITERION-SUBTEST
- WEB/VADS: Test source
- WEB: General VA Platform tests aligned with WCAG that apply across many contexts
- VADS: VA Design System–specific tests that define more specific expectations for components, including standardized pattern choices
- CRITERION: WCAG criterion number (1XX = Perceivable, 2XX = Operable, 3XX = Understandable, 4XX = Robust)
- SUBTEST: Subtest number when a WCAG criterion requires multiple tests
Example: WEB-141 is a general VA Platform test for WCAG 1.4.1. VADS-141-001 is a VADS-specific test for WCAG 1.4.1 that defines how links must provide a consistent non-color indicator in VA Design System components.
How to read test results
Component pages show test results in the “Accessibility tests” section.
Test status
Component test results use three statuses:
- Passed: The component meets the test requirement.
- Failed: The component does not meet the test requirement.
- Conditional: The test can only be evaluated within a specific product or workflow. Teams using the component are responsible for verifying these tests in their own context.
Environments tested
Each test result shows the environments and component versions tested. We track results for each environment because accessibility behavior can vary across browsers and assistive technologies. For the complete list of environments we test in, see How we audit components.
Test library
WCAG 1.1.1 - Non-text content
-
Non-text content such as images, audio, and video include equivalent text alternatives.
When you view or interact with non-text content on the page, you hear a text summary that helps you understand its purpose.
-
Screen readers announce descriptions for meaningful images.
When you navigate to an informative image with a screen reader, you hear a description of the image that conveys the content and function of the image.
- WEB-111-001
-
Screen readers announce both brief and detailed descriptions for graphs, maps, and charts.
When you view a complex visual element, such as a chart, graph, or diagram, you hear both a concise alt text description and a longer description that together provide all relevant information conveyed by the visual element.
- WEB-111-002
-
Screen readers don't announce decorative images.
When you navigate to a decorative image with a screen reader, you don't hear any information about the image.
- WEB-111-003
-
Background images don't convey important information.
When you view a background image on a page, the image is purely decorative and doesn't convey important information or functionality.
- WEB-111-004
-
Screen readers announce brief descriptions of videos and audio files.
When you navigate to video or audio content, you hear a short description that conveys the purpose of the content.
- WEB-111-005
-
WCAG 1.2.1 - Audio-only and Video-only (Prerecorded)
-
Audio and video-only content include a text transcript.
When you interact with audio-only or video-only media, you can find a transcript that provides the same information as presented in the original media content.
WCAG 1.2.2 - Captions (Prerecorded)
-
Prerecorded videos provide captions.
When you view prerecorded videos, you find synchronized captions for dialogue, sound effects, and relevant audio.
WCAG 1.2.3 - Audio Description or Media Alternative (Prerecorded)
-
Videos with audio include transcripts or audio descriptions.
When you interact with video content, you have access to a full descriptive transcript or an audio description.
WCAG 1.2.4 - Captions (Live)
-
Live videos include real-time captions.
When you interact with live video content, you find synchronized captions generated in real-time.
WCAG 1.2.5 - Audio Description (Prerecorded)
-
Videos with important visual information include audio descriptions.
When you watch a video that includes important visual information, you can turn on an audio description that conveys that visual information.
WCAG 1.3.1 - Info and Relationships
-
Information, structure, and relationships are conveyed through code, not just presentation.
When you interact with the page, you find that information, structure, and relationships are conveyed through code, not just visual presentation.
-
Headings are used to convey structure.
When you use a screen reader to navigate the page by heading, you find that all elements that act as content headings are included in the heading structure.
- WEB-131-001
-
Headings follow a logical order.
When you navigate the page by headings, you find that heading levels follow a logical order and don't skip levels.
- WEB-131-002
-
Page includes one H1.
When you inspect the page, you find a single H1 exists for the page or screen.
- WEB-131-003
-
Screen readers announce list items.
When you use a screen reader to navigate a list, you hear an announcement that indicates the number of items in the list and the position of each item within the list.
- WEB-131-004
-
Screen readers announce related form elements as a group.
When you use a screen reader to interact with a group of related form elements, such as a set of radio buttons, checkboxes or grouped text inputs, you hear an announcement that includes the group label, the item label, and indicates the elements are related.
- WEB-131-005
-
Screen readers announce input labels and instructions.
When you interact with the form input with a screen reader, you hear an announcement that includes the label, hint text, required state, and error message when applicable.
- WEB-131-006
-
Screen readers announce required fields.
When you interact with required fields using a screen reader, you hear an announcement indicating that the field is required.
- WEB-131-007
-
Screen reader users can navigate by landmarks.
When you use a screen reader to navigate the page by landmarks, you find that you can easily identify and navigate to key sections of the page, such as the main content, navigation, and complementary content.
- WEB-131-008
-
Screen readers announce relationship between table headers and data cells.
When you use a screen reader to interact with a table, you hear announcements that include table headers and associations between headers and data cells, allowing you to understand the structure and content of the table.
- WEB-131-009
-
Screen readers announce relationships between parent and child elements.
When you use a screen reader to navigate elements with parent-child relationships, you hear announcements that correctly identify the relationship structure and required elements.
- WEB-131-010
-
Screen readers identify navigation menus and announce their purpose.
When you use a screen reader to navigate a menu (such as breadcrumbs, a site menu, or page navigation), you hear an announcement that tells you it's a navigation region and describes what kind of navigation it provides.
- VADS-131-001
-
Screen readers announce tab and tab panel relationships.
When you use a screen reader to navigate tabs, you hear announcements that identify the tab list, individual tabs, their selected state, and the associated tab panel content.
- VADS-131-002
-
Screen readers announce relationships in expandable and collapsible content.
When you use a screen reader to navigate expandable or collapsible content, you hear announcements that clearly indicate which element controls which content and the current expanded or collapsed state.
- VADS-131-003
-
WCAG 1.3.2 - Meaningful Sequence
-
Content is presented in a logical order.
When you view and interact with the page or component, you find that content is presented in a meaningful sequence that supports comprehension and navigation.
WCAG 1.3.3 - Sensory Characteristics
-
Instructions don't rely only on visual cues to convey meaning.
When you read instructions, you find that they don't rely only on shape, color, or location to convey meaning. For example, instructions that say "click the red button" or "select the top option" wouldn't meet this criterion.
WCAG 1.3.4 - Orientation
-
Content is available in both portrait and landscape orientations.
When you rotate your device, you see that content remains visible and functional in both portrait and landscape orientations.
WCAG 1.3.5 - Identify Input Purpose
-
Form fields support autofill for common information.
When you begin typing in a form field that asks for common information like your name or address, your browser offers to autofill the field.
WCAG 1.4.1 - Use of Color
-
Color is not the only method used to convey information.
When you view the page or component, you find that anything shown by color is also communicated through another visual cue like shape or text.
-
Links use more than just color to indicate purpose.
When you view a link, you see that the link has a text underline and uses the expected VA colors for default, hover, focus, and visited states.
- VADS-141-001
-
Required fields use more than just color to indicate they are required.
When you interact with required form fields, you see that required status is indicated by more than just color, with a visible asterisk and the word "Required".
- VADS-141-002
-
Charts and graphs use both color and labels to convey meaning.
When you view data visualizations such as charts or graphs, you see that different data series or categories are distinguished by both colors and labels.
- VADS-141-003
-
WCAG 1.4.2 - Audio Control
-
Users can pause auto-playing audio or control its volume.
When you encounter audio that plays automatically for more than 3 seconds, you find you can pause it or it has an independent volume control.
WCAG 1.4.3 - Contrast (Minimum)
-
Text has sufficient contrast against its background.
When you use a contrast checker tool to compare the color of text against its background, you find that it has a contrast ratio of at least 4.5:1.
WCAG 1.4.4 - Resize Text
-
Text resizes to 200% without loss of content or functionality.
When you increase text size up to 200%, all content remains visible and functional without needing to scroll both horizontally and vertically.
WCAG 1.4.5 - Images of Text
-
Text isn't presented as images.
When you view the component or page, you find that text is rendered as real text, not as an image of text.
WCAG 1.4.10 - Reflow
-
Content adapts to small screens and zoom.
When you zoom in 400% on a viewport that is 1280 pixels wide, you can see and interact with all content without needing to scroll both horizontally and vertically.
- WEB-1410
- WCAG 1.4.10 - Reflow (Level AA)
WCAG 1.4.11 - Non-text Contrast
-
Meaningful graphic elements have sufficient contrast against their background.
When you view an interactive or graphic element on the page, you find that meaningful visual information has a contrast ratio of at least 3:1 against its background.
-
Interactive elements have sufficient contrast against their surroundings.
When you use a color contrast checker tool to compare the color of an interactive element against its surroundings, you find it has a contrast ratio of at least 3:1.
- WEB-1411-001
-
Meaningful icons and graphic elements have sufficient contrast.
When you use a color contrast checker tool to compare the color of a meaningful icon and graphic element against its background, you find it has a contrast ratio of at least 3:1.
- WEB-1411-002
-
Icons have sufficient contrast against their background.
When you use a color contrast checker tool to compare the color of an icon against its background, you find it has a contrast ratio of at least 3:1.
- VADS-1411-001
-
Form inputs have sufficient contrast against their surroundings.
When you use a color contrast checker tool to compare the color of a form input border against its surroundings, you find it has a contrast ratio of at least 3:1.
- VADS-1411-002
-
Buttons have sufficient contrast against their background.
When you use a color contrast checker tool to compare the background color of a button against its surroundings, you find it has a contrast ratio of at least 3:1.
- VADS-1411-003
-
WCAG 1.4.12 - Text Spacing
-
Text remains readable when spacing is adjusted.
When you adjust text spacing (line spacing to 1.5x font size, letter spacing to 0.12x, word spacing to 0.16x), you find that no content or functionality is lost.
WCAG 1.4.13 - Content on Hover or Focus
-
Users can dismiss content that appears on hover or focus.
When you encounter content that appears when you hover over or focus on an element, you are able to dismiss it without moving the pointer or focus.
-
Hover content remains visible when you move the pointer into it.
When content appears on hover and you move your pointer from the trigger into the new content, the content stays visible.
- VADS-1413-001
-
Hover content can be dismissed with Escape.
When content appears on hover or focus, you can dismiss it by pressing the Escape key without moving focus.
- VADS-1413-002
-
WCAG 2.1.1 - Keyboard
-
Interactive elements are fully operable using only a keyboard.
When you access an interactive element using only a keyboard, you can navigate to the element, activate it, and navigate away from it.
- WEB-211
- WCAG 2.1.1 - Keyboard (Level A)
-
Links are fully operable using only a keyboard.
When you interact with a link using only a keyboard, you can navigate to the link, activate it, and navigate away from it.
- VADS-211-001
-
Form inputs are fully operable using only a keyboard.
When you interact with a form input using only a keyboard, you can navigate to the input, update the value, and navigate away from it.
- VADS-211-002
WCAG 2.1.2 - No Keyboard Trap
-
Keyboard focus doesn't get trapped.
When you move focus to an interactive element with a keyboard, you can move focus away from that element using only standard keyboard keys (Tab, Shift+Tab, arrow keys, or Escape).
-
Links don't trap keyboard focus.
When you navigate to the link using a keyboard, you can move focus away from the link using only standard keyboard keys (Tab, Shift+Tab, arrow keys, or Escape).
- VADS-212-001
-
Form inputs don't trap keyboard focus.
When you navigate to a form input using a keyboard, you can move focus away from the input using only standard keyboard keys (Tab, Shift+Tab, arrow keys, or Escape).
- VADS-212-002
-
WCAG 2.1.4 - Character Key Shortcuts
-
Users can turn off or customize single-key shortcuts.
When you encounter single-character keyboard shortcuts, you find they can be turned off, remapped to include modifiers, or are active only when the component has focus.
WCAG 2.2.1 - Timing Adjustable
-
Content allows users to turn off or extend time limits.
When you encounter a time limit, you find it can be disabled, extended (with a 20-second warning and the ability to extend at least ten times), or significantly adjusted unless timing is essential.
WCAG 2.2.2 - Pause, Stop, Hide
-
Movement can be paused or stopped.
When you view moving, blinking, scrolling, or auto-updating content that starts automatically and lasts over 5 seconds, you find mechanisms to pause, stop, hide, or control its frequency.
WCAG 2.3.1 - Three Flashes or Below Threshold
-
Nothing flashes more than three times per second.
When you view the page, you find no content flashes more than three times per any one-second period.
WCAG 2.4.1 - Bypass Blocks
-
Users can skip repeated content like headers and navigation.
When you navigate the page, you find a mechanism to bypass repeated blocks of content such as a skip link or HTML5 landmarks.
-
Each page includes a skip link that allows users to skip to main content.
When you navigate the page with a keyboard, you find a skip link at the beginning of the page that allows you to bypass repeated content and jump directly to the main content.
- VADS-241-001
-
WCAG 2.4.2 - Page Titled
-
Each page includes a unique, descriptive title.
When you open a new page, you find it has a unique and descriptive title reflecting the page's purpose.
WCAG 2.4.3 - Focus Order
-
Tab order follows a logical sequence.
When you navigate the page or component with a keyboard, you find focus moves through interactive elements in a meaningful order.
-
Focus is trapped inside a modal when it's open.
When you open a modal and press Tab or Shift+Tab, you find that focus stays inside the modal and doesn't move to content behind it.
- VADS-243-001
-
Focus returns to the trigger when a modal closes.
When you close a modal, you find that focus returns to the element that opened it.
- VADS-243-002
-
WCAG 2.4.4 - Link Purpose (In Context)
-
Link text is clear and descriptive.
When you read the link text, it is easy to understand both the link's purpose and destination.
WCAG 2.4.5 - Multiple Ways
-
There is more than one way to access a page.
When you navigate the site, you find more than one way to access important pages, such as through a link in the main navigation and a link within the page content.
WCAG 2.4.6 - Headings and Labels
-
Headings and labels clearly describe their purpose.
When you view headings and labels, you find they are descriptive of their content and purpose.
-
Headings are descriptive.
When you read heading text, you find that it accurately describes the topic or purpose of the content that follows.
- WEB-246-001
-
Input labels are descriptive.
When you read an input label, you find that it accurately describes the purpose of the input field and the expected value.
- WEB-246-002
-
WCAG 2.4.7 - Focus Visible
-
Interactive elements display a clear focus indicator.
When you navigate to an interactive element with a keyboard, you see a clear visual indicator around the element showing that it has focus.
WCAG 2.4.10 - Section Headings
-
Content uses headings to organize sections.
When you read content that is organized in sections, you find that each section has a descriptive heading that helps you understand the section and what it's about.
WCAG 2.4.11 - Focus Not Obscured (Minimum)
-
Focused elements are fully visible.
When you focus on an element with a keyboard, you see that the element that has focus remains visible on screen and is not obscured by sticky headers, footers, modals, tooltips, or other overlaying content.
WCAG 2.5.1 - Pointer Gestures
-
Functionality that uses complex gestures also works with simple pointer actions.
When you interact with a feature that uses custom gesture interactions, such as multi-point or path-based gestures (such as pinching, swiping, or dragging), you find that the same functionality is also available using a single pointer action like a tap or click.
WCAG 2.5.2 - Pointer Cancellation
-
Pointer actions are reversible and don't execute on touch down.
When you press and hold on an interactive element, you can cancel the action by moving your pointer away before releasing.
WCAG 2.5.3 - Label in Name
-
Accessible name matches visible text.
When you use voice control or a screen reader to activate an element that has visible text, the spoken or accessible name matches what you see.
-
Screen reader announcements match visible text.
When you focus on an interactive element with a screen reader, you hear an announcement that matches the element's visible text.
- VADS-253-001
-
Voice control users can activate an element by speaking its visible text.
When you use voice control to say the visible text of an interactive element, the element activates as expected.
- VADS-253-002
-
WCAG 2.5.4 - Motion Actuation
-
Features don't require shaking or tilting the device.
When you encounter a feature that responds to device motion like shaking or tilting, you find an alternative way to perform the same action and a way to turn off motion activation.
WCAG 2.5.7 - Dragging Movements
-
Drag-and-drop actions have click-based alternatives.
When you interact with a component that offers drag functionality, you find that functionality is also available through click, keyboard, or other non-dragging methods.
WCAG 2.5.8 - Target Size (Minimum)
-
Interactive element size is at least 24 pixels.
When you check the size of interactive elements on the page, you find that each element either has both width and height of at least 24 pixels, or has at least 24 pixels of clear space between it and the next interactive element.
-
Link size is at least 24 pixels, except for links in sentences.
When you check the size of links on the page, you find that each link either has both width and height of at least 24 pixels, or has at least 24 pixels of clear space between it and the next link. Links in sentences or paragraphs are typically exempt from the size requirement.
- VADS-258-001
-
Button size is at least 24 pixels.
When you check the size of buttons on the page, you find that each button either has both width and height of at least 24 pixels, or has at least 24 pixels of clear space between it and the next button.
- VADS-258-002
-
Form control size is at least 24 pixels.
When you check the size of form controls (text inputs, checkboxes, radio buttons, selects, toggles) on the page, you find that each control either has both width and height of at least 24 pixels, or has at least 24 pixels of clear space between it and the next control.
- VADS-258-003
-
WCAG 3.1.1 - Language of Page
-
Page declares its language.
When you use a screen reader to read the page, it pronounces content in the correct language.
WCAG 3.1.2 - Language of Parts
-
Content declares language changes.
When you encounter text in a different language from the rest of the page, a screen reader pronounces it in the correct language.
-
Screen readers announce language changes.
When you encounter text in a different language while using a screen reader, you hear an announcement indicating the language change.
- VADS-312-001
-
WCAG 3.2.1 - On Focus
-
Focusing on an element doesn't trigger unexpected changes.
When you focus on an element, it doesn't trigger a change of context such as opening a new page, displaying a modal, or causing content to appear or disappear.
- WEB-321
- WCAG 3.2.1 - On Focus (Level A)
WCAG 3.2.2 - On Input
-
Changing the input value doesn't trigger unexpected changes.
When you change a form input value, it doesn't trigger a change of context such as opening a new page, displaying a modal, or causing content to appear or disappear.
- WEB-322
- WCAG 3.2.2 - On Input (Level A)
WCAG 3.2.3 - Consistent Navigation
-
Navigation structure is the same across pages.
When you navigate between pages, you find navigation menus maintain consistent order and structure.
WCAG 3.2.4 - Consistent Identification
-
Similar features have the same labels across pages.
When you use components with similar functionality on multiple pages, you find they have identical labels and function identically.
WCAG 3.2.6 - Consistent Help
-
Help options appear in the same location across pages.
When you look for help mechanisms such as contact details, messaging, chat, or self-help options, you find they are in the same relative order across pages.
WCAG 3.3.1 - Error Identification
-
Users receive error messages.
When you enter an invalid value, you receive a descriptive error message that identifies the problem.
-
Errors are identified on blur.
When you enter an invalid value in a form input and move focus away from the input, you receive an error message that identifies the problem.
- VADS-331-001
-
Error messages describe the reason for the error.
When you enter an invalid value in a form input or a required field is left empty, you receive a descriptive error message that identifies the problem.
- VADS-331-002
-
Invalid inputs display visible error styles.
When you trigger an error state on a form input, you see a distinct visual style indicating that the input is in error.
- VADS-331-003
-
Screen readers announce errors when they occur.
When you use a screen reader and receive an error message, you hear the error message announced without needing to move focus to the message.
- VADS-331-004
-
Error messages are visually associated with the invalid element.
When you receive an error message, you find it appears in a location that visually associates it with the relevant input, or the message clearly indicates which input is in error.
- VADS-331-005
-
WCAG 3.3.2 - Labels or Instructions
-
Form inputs have a persistent label.
When you interact with a form input, you receive clear, persistent labels or instructions for that input.
-
Form inputs display persistent visible labels.
When you view form inputs, you find persistent, visible labels or instructions that are available for all inputs and input groupings.
- WEB-332-001
-
Form inputs that require specific formats include instructions.
When you interact with form inputs that require specific formats, you find they provide instructions or examples for the expected format.
- WEB-332-002
-
Form inputs visibly identify required fields.
When you interact with a form input, you find labels or instructions that identify which fields are required and which are optional.
- WEB-332-003
-
WCAG 3.3.3 - Error Suggestion
-
Error messages explain how to fix the error.
When you receive an error message, you find the message provides clear suggestions for correcting the error.
WCAG 3.3.4 - Error Prevention (Legal, Financial, Data)
-
Users can review or undo important submissions.
When you make legal or financial transactions, you find you can review before submission or the action can be reversed.
WCAG 3.3.6 - Error Prevention (All)
-
Users can review and correct incorrect information.
When you submit data, you find you can review before submission or the action can be reversed or corrected.
WCAG 3.3.7 - Redundant Entry
-
Users don't have to re-enter the same information.
When you enter information on the site, you find you are not required to refill the same information unless doing so is essential or the original information is no longer valid.
WCAG 3.3.8 - Accessible Authentication (Minimum)
-
Login doesn't rely solely on remembering information.
When you log in, you find the process doesn't solely rely on cognitive tests and all steps support methods that don't rely on memory or knowledge.
WCAG 4.1.2 - Name, Role, Value
-
Every interactive element has a clear name and purpose.
When you interact with interactive elements such as links and buttons, you can easily understand what they are and what they do based on their accessible names and roles.
-
Every interactive element has a clear name and purpose.
When you interact with an interactive element such as a link, button, or form input, you can easily understand what it is and what it does based on its accessible name and role.
- WEB-412-001
-
Screen readers announce state.
When you use a screen reader, you hear announcements for dynamic states like expanded, checked, or disabled.
- WEB-412-002
-
Links navigate to pages; buttons perform actions.
When you activate a link, it takes you to a new page or section. When you activate a button, it performs an action on the current page.
- WEB-412-003
-
Links navigate to a new page or section.
When you activate a link, you are taken to a different page or a section on the current page.
- VADS-412-001
-
Buttons perform actions on the current page.
When you activate a button, you find that it performs an action on the current page.
- VADS-412-002
-
Labels on repeated interactive elements describe their specific purpose.
When you view a page that has multiple interactive elements with similar functions, you find that each element's label describes its specific purpose and what it applies to.
- VADS-412-003
-
WCAG 4.1.3 - Status Messages
-
Screen readers announce important updates.
When you're using a screen reader and a status message appears on the page, you hear it announced without needing to move focus to the message.
-
Screen readers announce loading status.
When you trigger an action that displays a loading indicator, you hear a screen reader announcement that content is loading.
- VADS-413-001
-
Screen readers announce alerts.
When an alert appears on the page, you hear a screen reader announcement with the alert message without needing to move focus to it.
- VADS-413-002
-
Total tests in library: 116 (57 parent tests, 59 subtests)