Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Latest release: Component Library: v56.6.1 released on Jun 9, 2026 | Guidance: Sprint 1 released on Jun 16, 2026 | Figma: Changelog

Components

Button - Accessibility tests

Baseline accessibility test results for the va-button 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 Button component within your own product. See the conditional tests section for a list of tests that require additional testing in your context.

Version tested Passed Failed Conditional 56.4.0 15 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.

    Environment Result Last tested iOS Safari April 27, 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.

    Environment Result Last tested macOS Chrome April 27, 2026
    Version: 56.4.0

  • 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.

    Environment Result Last tested macOS Chrome April 27, 2026
    Version: 56.4.0

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.

    Environment Result Last tested macOS Chrome April 27, 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).

    Environment Result Last tested macOS Chrome April 27, 2026
    Version: 56.4.0

  • 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.

    Environment Result Last tested macOS Chrome April 27, 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.

    Environment Result Last tested macOS Chrome April 27, 2026
    Version: 56.4.0

Screen reader tests

  • 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.

    Environment Result Last tested macOS Safari/VoiceOver April 27, 2026
    Version: 56.4.0     Windows Chrome/JAWS April 27, 2026
    Version: 56.4.0     Windows Edge/NVDA April 27, 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.

    Environment Result Last tested macOS Safari/VoiceOver April 27, 2026
    Version: 56.4.0     Windows Chrome/JAWS April 27, 2026
    Version: 56.4.0     Windows Edge/NVDA April 27, 2026
    Version: 56.4.0

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.

    Environment Result Last tested macOS Voice Control April 27, 2026
    Version: 56.4.0

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.

    Environment Result Last tested macOS Chrome April 27, 2026
    Version: 56.4.0

Visual tests

  • 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.

    Environment Result Last tested macOS Chrome April 27, 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.

    Environment Result Last tested macOS Chrome April 27, 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.

    Environment Result Last tested macOS Chrome April 27, 2026
    Version: 56.4.0

  • 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.

    Environment Result Last tested macOS Chrome April 27, 2026
    Version: 56.4.0

Conditional tests

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

  • 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.

  • 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.

  • Buttons perform actions on the current page.

    When you activate a button, you find that it performs an action on the current page.

  • 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.

Edit this page in GitHub (Permissions required)
Last updated: May 01, 2026