Components

Details - Accessibility tests

Baseline accessibility test results for the va-details component across browsers and assistive technologies.

Test summary

The Design System team tested this component in isolation across a mix of browsers and assistive technologies using the . Our results may not capture accessibility issues that arise from surrounding context like page structure, content, or how multiple components interact.

To ensure accessibility, you must also test the Details component within your own product. See the conditional tests section for a list of tests that require additional testing in your context.

56.4.0 20 0 4

General tests

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.
- WEB-134
- WCAG 1.3.4 - Orientation (Level AA)
Environment Result Last tested Android Chrome April 29, 2026
Version: 56.4.0 iOS Safari April 29, 2026
Version: 56.4.0
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.
- WEB-1412
- WCAG 1.4.12 - Text Spacing (Level AA)
Environment Result Last tested macOS Chrome April 29, 2026
Version: 56.4.0 macOS Safari April 29, 2026
Version: 56.4.0 Windows Chrome April 29, 2026
Version: 56.4.0 Windows Edge April 29, 2026
Version: 56.4.0
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.
- WEB-252
- WCAG 2.5.2 - Pointer Cancellation (Level A)
Environment Result Last tested macOS Chrome April 29, 2026
Version: 56.4.0 macOS Safari April 29, 2026
Version: 56.4.0 Windows Chrome April 29, 2026
Version: 56.4.0 Windows Edge April 29, 2026
Version: 56.4.0
Notes: This should always pass with native implementation. But if someone tries to change how the component works, this test may fail.
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.
- WEB-258
- WCAG 2.5.8 - Target Size (Minimum) (Level AA)
Environment Result Last tested Android Chrome April 29, 2026
Version: 56.4.0 iOS Safari April 29, 2026
Version: 56.4.0
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
- WCAG 4.1.2 - Name, Role, Value (Level A)
Environment Result Last tested macOS Safari/VoiceOver April 29, 2026
Version: 56.4.0 Windows Chrome/JAWS April 29, 2026
Version: 56.4.0 Windows Edge/NVDA April 29, 2026
Version: 56.4.0 iOS Safari/VoiceOver April 29, 2026
Version: 56.4.0
Notes: Accessible name is derived from the label prop and is announced correctly across all environments including iOS VoiceOver.

Keyboard tests

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)
Environment Result Last tested macOS Chrome April 29, 2026
Version: 56.4.0 macOS Safari April 29, 2026
Version: 56.4.0 Windows Chrome April 29, 2026
Version: 56.4.0 Windows Edge April 29, 2026
Version: 56.4.0
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).
- WEB-212
- WCAG 2.1.2 - No Keyboard Trap (Level A)
Environment Result Last tested macOS Chrome April 29, 2026
Version: 56.4.0 macOS Safari April 29, 2026
Version: 56.4.0 Windows Chrome April 29, 2026
Version: 56.4.0 Windows Edge April 29, 2026
Version: 56.4.0
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.
- WEB-243
- WCAG 2.4.3 - Focus Order (Level A)
Environment Result Last tested macOS Chrome April 29, 2026
Version: 56.4.0 macOS Safari April 29, 2026
Version: 56.4.0 Windows Chrome April 29, 2026
Version: 56.4.0 Windows Edge April 29, 2026
Version: 56.4.0
Notes: This has to do with keyboard focus, different than WEB-132 which is about content structure
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.
- WEB-247
- WCAG 2.4.7 - Focus Visible (Level AA)
Environment Result Last tested macOS Chrome April 29, 2026
Version: 56.4.0 macOS Safari April 29, 2026
Version: 56.4.0 Windows Chrome April 29, 2026
Version: 56.4.0 Windows Edge April 29, 2026
Version: 56.4.0
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)
Environment Result Last tested macOS Chrome April 29, 2026
Version: 56.4.0 macOS Safari April 29, 2026
Version: 56.4.0 Windows Chrome April 29, 2026
Version: 56.4.0 Windows Edge April 29, 2026
Version: 56.4.0

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
- WCAG 1.1.1 - Non-text content (Level A)
Environment Result Last tested macOS Safari/VoiceOver April 29, 2026
Version: 56.4.0 Windows Chrome/JAWS April 29, 2026
Version: 56.4.0 Windows Edge/NVDA April 29, 2026
Version: 56.4.0 iOS Safari/VoiceOver April 29, 2026
Version: 56.4.0 Android Chrome/Talkback April 29, 2026
Version: 56.4.0
Notes: Chrome announces "disclosure triangle" as the role description for the native summary element — this is browser-native behavior, not an announcement of the decorative chevron icon. The icon itself is not announced.
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.1 - Info and Relationships (Level A)
Environment Result Last tested macOS Safari/VoiceOver April 29, 2026
Version: 56.4.0 Windows Chrome/JAWS April 29, 2026
Version: 56.4.0 Windows Edge/NVDA April 29, 2026
Version: 56.4.0 iOS Safari/VoiceOver April 29, 2026
Version: 56.4.0 Android Chrome/Talkback April 29, 2026
Version: 56.4.0
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
- WCAG 2.5.3 - Label in Name (Level A)
Environment Result Last tested macOS Safari/VoiceOver April 29, 2026
Version: 56.4.0 Windows Chrome/JAWS April 29, 2026
Version: 56.4.0 Windows Edge/NVDA April 29, 2026
Version: 56.4.0
Screen readers announce state.

When you use a screen reader, you hear announcements for dynamic states like expanded, checked, or disabled.
- WEB-412-002
- WCAG 4.1.2 - Name, Role, Value (Level A)
Environment Result Last tested macOS Safari/VoiceOver April 29, 2026
Version: 56.4.0 Windows Chrome/JAWS April 29, 2026
Version: 56.4.0 Windows Edge/NVDA April 29, 2026
Version: 56.4.0 Android Chrome/Talkback April 29, 2026
Version: 56.4.0 iOS Safari/VoiceOver April 29, 2026
Version: 56.4.0
Notes: iOS VoiceOver prevents native details interaction in the shadow DOM. We are overriding the default details event handling with manual open attribute management to enable functionality in iOS VoiceOver. Additionally, we added a short timeout to prevent the VoiceOver announcement from getting cut off.

Voice control tests

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.3 - Label in Name (Level A)
Environment Result Last tested macOS Voice Control April 29, 2026
Version: 56.4.0 Windows Voice Recognition April 29, 2026
Version: 56.4.0
Notes: Users have to rely on the grid when using Voice Access on Windows.

Zoom tests

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)
Environment Result Last tested macOS Chrome April 29, 2026
Version: 56.4.0 macOS Safari April 29, 2026
Version: 56.4.0 Windows Chrome April 29, 2026
Version: 56.4.0 Windows Edge April 29, 2026
Version: 56.4.0

Visual tests

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.
- WEB-141
- WCAG 1.4.1 - Use of Color (Level A)
Environment Result Last tested macOS Chrome April 29, 2026
Version: 56.4.0 macOS Safari April 29, 2026
Version: 56.4.0 Windows Chrome April 29, 2026
Version: 56.4.0 Windows Edge April 29, 2026
Version: 56.4.0
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.
- WEB-143
- WCAG 1.4.3 - Contrast (Minimum) (Level AA)
Environment Result Last tested macOS Chrome April 29, 2026
Version: 56.4.0 macOS Safari April 29, 2026
Version: 56.4.0 Windows Chrome April 29, 2026
Version: 56.4.0 Windows Edge April 29, 2026
Version: 56.4.0
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.
- WEB-144
- WCAG 1.4.4 - Resize Text (Level AA)
Environment Result Last tested macOS Chrome April 29, 2026
Version: 56.4.0 macOS Safari April 29, 2026
Version: 56.4.0 Windows Chrome April 29, 2026
Version: 56.4.0 Windows Edge April 29, 2026
Version: 56.4.0
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
- WCAG 1.4.11 - Non-text Contrast (Level AA)
Environment Result Last tested macOS Chrome April 29, 2026
Version: 56.4.0 macOS Safari April 29, 2026
Version: 56.4.0 Windows Chrome April 29, 2026
Version: 56.4.0 Windows Edge April 29, 2026
Version: 56.4.0
Notes: Even though the chevron is decorative for screen reader users, it is still visually meaningful for sighted users. Therefore it must have sufficient contrast.

Conditional tests

Teams are responsible for verifying these tests in their own context.

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.
- WEB-132
- WCAG 1.3.2 - Meaningful Sequence (Level A)
Headings and labels clearly describe their purpose.

When you view headings and labels, you find they are descriptive of their content and purpose.
- WEB-246
- WCAG 2.4.6 - Headings and Labels (Level AA)
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.
- WEB-2411
- WCAG 2.4.11 - Focus Not Obscured (Minimum) (Level AA)
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.2 - Name, Role, Value (Level A)

Edit this page in GitHub (Permissions required)

Last updated: May 05, 2026