Components

Radio buttons accessibility tests

Any USWDS radio button should pass these manual accessibility tests.

Passed WCAG 2.1 AA

Radio buttons accessibility status

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

Overview of recent accessibility test results:

Total tests	Passed	Passed with exceptions	Conditional	Failed
10	10	0	0	0

Overview of recent accessibility test results:

• Passed: 10
• Passed with exceptions: 0
• Conditional: 0
• Failed: 0

Test the radio buttons in your project

USWDS tests components in isolation. You need to test the radio buttons 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.

Radio buttons accessibility checklist

• General tests
• Keyboard navigation tests
• Screen reader tests

General tests

Select passing tests

Radio button labels are descriptive, brief and clear. When you view radio buttons, all labels have short descriptions that are easy to understand and act on.

• WCAG AA
• 2.4.6 Headings and labels
• USWDS test status: Passed
• Last test: v3.8.0

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

Touch target size for all clickable elements meets height and width requirements. The size and spacing of the touch target are at least 24px wide and 24px tall.

• WCAG AA
• 2.5.8 Target Size (WCAG 2.2)
• USWDS test status: Passed
• Last test: v3.8.0

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

Visible instructions explain radio button requirements. Each radio button group has a visible label above it to indicate its purpose. For example, “Select your state.”

• WCAG A
• 3.3.2 Labels or instructions
• USWDS test status: Passed
• Last test: v3.8.0

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

Keyboard navigation tests

USWDS performed these tests to check radio buttons 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 radio buttons component is used.
2. Using only your keyboard, press tab to navigate forward or shift + tab to navigate backwards until focus is on the radio buttons.
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

Radio button focus can be moved and selection can be selected or deselected. When you use the spacebar and arrow keys on a keyboard, you can toggle between selections and clearly see when the choice is selected or not.

• WCAG A
• 3.2.1 On Focus
• USWDS test status: Passed
• Last test: v3.8.0

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

Radio button focus follows logical content order. When you tab through the radio button group with a keyboard, the focus stays in order of the content as intended.

• WCAG A
• 2.4.3 Focus order
• USWDS test status: Passed
• Last test: v3.8.0

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

Radio buttons are still fully functional using only keystrokes. When you use a keyboard to navigate to the radio button option, you are able to move focus, check and uncheck buttons, and move focus into and out of the radio group. If none of the radio buttons are checked, focus is set on the first radio button in the group.

• WCAG A
• 2.1.1 Keyboard
• USWDS test status: Passed
• Last test: v3.8.0

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

Focus indicator on radio button is clearly visible. When you use a keyboard to focus on a radio button group, you will see a visible outline or other clear indication of focus.

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

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

Screen reader tests

USWDS performed these tests to check radio buttons 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 radio buttons 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 question before any radio button and then related elements. When listening to the radio button using a screen reader, you hear the question related to the radio button read first. Then you will hear the radio button and label and its checked state.

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

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

Screen reader values for radio buttons match screen display. When using a screen reader, you can hear the same value for the radio button that is shown on the screen.

• WCAG A
• 2.5.3 Label in name
• USWDS test status: Passed
• Last test: v3.8.0

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

Screen reader announces number and focus position inside radio button group. When you use a screen reader and navigate to a radio button group, you hear focus position, and how many other button options there are within that group.

• WCAG A
• 1.3.1 Info and relationships
• USWDS test status: Passed
• Last test: v3.8.0

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

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-09-18	N/A	Guidance	No	Added accessibility tests page. More information: uswds-site#2821