---
url: /components/radio-button/accessibility.md
description: Radio buttons allow users to select one option from a set.
---

# Radio button

Radio buttons allow users to select one option from a set.

[Overview](overview.md) · [Specs](specs.md) · [Guidelines](guidelines.md) · **Accessibility**

## Use cases

People should be able to do the following with assistive technology:

* Navigate to a radio button
* Select a radio button
* Get appropriate feedback based on input type

## Interaction & style

A radio button can be either selected or unselected. Selecting one radio button deselects any others. A radio group can start with one radio button selected, or none selected.

Once a radio button is selected, the group can’t be deselected. To let people opt out of their selection, either provide a **Not applicable** or **No option** radio button, or provide a separate way to deselect all radio buttons, like **Clear selection**.

People should be able to select either the text label or the radio button to select an option.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmcelaxg0-GM3_Radio-button_Accessibility_01_IA_v01.mp4?alt=media" aria-label="Selecting between radio buttons for a home and office address."></video>

Only one radio button is selected at a time

### Avoid applying density by default

Don't apply density to radio buttons by default. This lowers their targets below Material's recommendation of 48x48 CSS pixels. Instead, give people a way to choose a higher density, like selecting a denser layout or changing the theme.

To ensure this density setting can be easily reverted when it's active, keep all targets to change it at a minimum of 48x48 CSS pixels each.

## Initial focus

When outside the radio group, **Tab** moves focus directly to the selected radio button, or the first one if none are selected. 

**Shift+Tab** instead focuses on the last radio if none are selected. 

Use the **arrows** to navigate between options.

![The Tab key focuses on the first of 2 stacked radio buttons.](/assets/ef208f46-mc94qafr-02.BvN2fZQm.webp)

Tab brings the focus to the initially selected item or the initial radio option

![The up and down arrow keys move through a list of stacked radio buttons.](/assets/e3ef74d3-mg0z51u6-03.BlCvQnhZ.webp)

Arrows move to next element in a list

## Keyboard navigation

| Keys                | Actions                                                                                                                        |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| **Tab**             | Moves focus into the group to the selected radio button, or the first if none are selected                                     |
| **Shift** + **Tab** | Moves focus into the group to the selected radio button, or the last if none are selected                                      |
| **Arrows**          | Moves focus and selects the previous or next radio button. Wraps focus and selection between the first and last radio buttons. |
| **Space**           | Selects a focused radio button. If already selected, does nothing.                                                             |

## Labeling elements

If the UI text is correctly linked to the radio button, assistive tech such as a screenreader will read the UI text, followed by the component’s role.

The [accessibility](../../foundations/overview/principles.md "Accessible design makes products usable for people with all kinds of abilities.") label for a group of radio buttons is typically the same as its title. The role is **Radio group**.

![Accessibility tags for a radio button group.](/assets/b2e8f17c-md3jpo7w-04.BkqnmAvr.webp)

Label the radio group based on the category title

The [accessibility](../../foundations/overview/principles.md "Accessible design makes products usable for people with all kinds of abilities.") label for an individual radio button is typically the same as its adjacent text label.

![Accessibility tags for a radio button.](/assets/93d36891-mg0z56zm-05.1bmMv62d.webp)

Label the radio button based on its label text