Components

Button accessibility tests

Any USWDS button should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Button accessibility status

The USWDS team did 9 tests based on WCAG 2.1 AA success criteria.

Overview of recent accessibility test results:

Total tests	Passed	Passed with exceptions	Conditional	Failed
9	6	1	2	0

Overview of recent accessibility test results:

• Passed: 6
• Passed with exceptions: 1
• Conditional: 2
• Failed: 0

Test the button in your project

USWDS tests components in isolation. You need to test the button component in the context of your own site to ensure compliance with Section 508 accessibility standards.

Use the checklist below.

Follow the "how to test" instructions for each type of assistive technology.

Anyone can test for accessibility.

These quick manual tests don't require special equipment.

Button accessibility checklist

• General tests
• Zoom magnification tests
• Keyboard navigation tests
• Screen reader tests

General tests

Select passing tests

Button text conveys its meaning. When you view the button on a page and determine the button’s purpose, the text (not color alone) conveys the button’s meaning.

This can only be tested in your implementation of the component. Be sure to test this in your project.

• WCAG A
• 1.4.1 Use of color
• USWDS test status: Conditional
• Last test: v3.7.1

• USWDS test status:
  Conditional
• Last test: v3.7.1

Buttons meet color contrast requirements. When you view the button on a page and use ANDI or color contrast analyzer to look at the hex colors, contrast between the button background and text is at least 4.5:1.

• WCAG AA
• 1.4.3 Contrast (Minimum)
• USWDS test status: Passed
• Last test: v3.7.1

• USWDS test status:
  Passed
• Last test: v3.7.1

Buttons are at least 44 pixels wide. When you right click on the button and select “inspect element” to review the button’s computed value, the width of the button is at least 44 px.

• WCAG AAA
• 2.5.5 Target size
• USWDS test status: Passed
• Last test: v3.7.1

• USWDS test status:
  Passed
• Last test: v3.7.1

Zoom magnification tests

USWDS performed these tests to check button accessibility and usability for zoom magnification. For help performing your own zoom magnification tests, check out the resources in the expandable section below.

1. Navigate to a page on your website where the button component is used.
2. Enlarge the view of your screen to 200%.
3. Once zoomed, use a mouse to complete the tests in the checklist.

---

Use one of the following methods to control screen magnification in your browser:

1. Windows OS: Click ctrl while using the scroll wheel on your mouse until you see "200%" appear in the top right of your screen. Or, click ctrl + + until you see "200%" appear in the top right of your screen. (To reset the zoom to the original value, click ctrl + 0.)
2. Mac OS: Click command + + until you see "200%" appear in the top right of your screen. (To reset the zoom to the original value, click command + 0.)
3. Browser settings: Customize your browser settings to display pages at 200%.

Select passing tests

Buttons are visible and functional when screen is magnified. When you zoom the screen to 200%, you can scroll through buttons with no loss of information.

The button component may not pass all elements of this test.

The button is visible and functional, but the focus indicator overlaps with nearby buttons.

• WCAG AA
• 1.4.10 Reflow
• USWDS test status: Passed with exceptions
• Last test: v3.7.1

• USWDS test status:
  Passed with exceptions
• Last test: v3.7.1

Keyboard navigation tests

USWDS performed these tests to check button accessibility and usability for keyboard navigation. For help performing your own keyboard navigation tests, check out the resources in the expandable section below.

1. Navigate to a page on your website where the button component is used.
2. Using only your keyboard, press tab to navigate forward or shift + tab to navigate backwards until focus is on the button.
3. Use the testing checklist to make sure all functionality works with keyboard navigation.

---

For instruction for using keyboard navigation, use this resource from WebAIM.

Select passing tests

Buttons do not trap focus. When you use a keyboard to tab into a button and click tab again, you don’t get stuck in the button.

• WCAG A
• 2.1.2 No keyboard trap
• USWDS test status: Passed
• Last test: v3.7.1

• USWDS test status:
  Passed
• Last test: v3.7.1

Focus indicators are clearly visible. When you use a keyboard to tab into a button, the button has a visible outline or other clear indication of focus.

• WCAG AA
• 2.4.7 Focus visible
• USWDS test status: Passed
• Last test: v3.7.1

• USWDS test status:
  Passed
• Last test: v3.7.1

Focus indicators have proper size, perimeter, and contrast. When you use a keyboard to tab into a button, the focus indicator has proper size, perimeter and contrast.

• WCAG AAA
• 2.4.13 Focus appearance (WCAG 2.2)
• USWDS test status: Passed
• Last test: v3.7.1

• USWDS test status:
  Passed
• Last test: v3.7.1

Screen reader tests

USWDS performed these tests to check button accessibility and usability for screen readers. For help performing your own screen reader tests, check out the resources in the expandable section below.

1. Navigate to a page on your website where the button component is used.
2. Open a dedicated screen reading app or your operating system screen reader.
3. Test with both a keyboard and a mouse to complete the tests in the checklist.

---

Instructions for setting up the screen reader on your operating system:

1. VoiceOver for Mac: Getting started guide
2. Narrator for Windows: Complete guide to Narrator

Select passing tests

Screen reader announces buttons in the same order that they appear on the page. When you use a screen reader and navigate from button to button on a page (using the B shortcut key or tab key), you hear the buttons announced in the same order that they appear on the page.

This can only be tested in the context of your page. Be sure to test this in your project.

• WCAG A
• 1.3.2 Meaningful sequence
• USWDS test status: Conditional
• Last test: v3.7.1

• USWDS test status:
  Conditional
• Last test: v3.7.1

Screen reader announces the button role. When you use a screen reader and navigate from button to button on a page (using the B shortcut key or tab key), you hear the role “button”.

• WCAG A
• 4.1.2 Name, role, value
• USWDS test status: Passed
• Last test: v3.7.1

• USWDS test status:
  Passed
• Last test: v3.7.1

Share your feedback

• Propose a new test
• Report an error

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date	USWDS version	Affects	Breaking	Description
2024-01-17	N/A	Guidance	No	Added accessibility tests page. More information: uswds-site#2138