---
url: /components/tabs/accessibility.md
description: >-
  Tabs organize content across different screens, data sets, and other
  interactions.
---

# Tabs

Tabs organize content across different screens, data sets, and other interactions.

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

## Use cases

Users should be able to:

* Undertake actions or invoke navigation to a new destination with assistive tech
* Select an action or destination from an off screen tab with assistive tech
* Maintain access of primary actions when the content is in a scrolled [state](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element.")

## Interaction & style

**Touch**

* When a user taps on an [icon button](../icon-buttons/overview.md "Icon buttons help people take minor actions with one tap."), a touch ripple appears, indicating interaction feedback
* The selected indicator becomes active and shifts into position once the touch has been engaged

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fm3%2Fimages%2Fm60bkpen-GM3-Components-Tabs-Accessibility-1-v01.mp4?alt=media" aria-label="The ripple effect resulting from tapping on an action item."></video>

Touch: Tap

**Scrollable**

* When a set of tabs cannot fit on screen, scrollable tabs are used. They are best used for browsing on touch interfaces.
* To navigate between scrollable tabs, users swipe the set left or right. Users can also use arrow/tab to navigate through.
* It's **not recommended** to loop a tab set where it scrolls infinitely. This can trap users who are navigating linearly with a screen reader.
* To select an individual tab, users tap or press space/enter.
* Horizontal scrolling tabs meet accessibility requirements because they need to increase in width to respond to label text without affecting the layout, and horizontal scrolling is necessary to view those labels.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fm3%2Fimages%2Fm60bllqp-GM3-Components-Tabs-Accessibility-2-v01.mp4?alt=media" aria-label="Swiping right and left scrolls through tabs when scrolling is enabled."></video>

Scrollable: Scrollable Tabs

**Cursor**

* When hovered, the [hover state](../../foundations/interaction/states/applying-states.md#71c347c2-dd75-485b-892e-04d2900bd844 "A hover state communicates when a user has placed a cursor above an interactive element.") appears, providing a visual cue that the [icon button](../icon-buttons/overview.md "Icon buttons help people take minor actions with one tap.") is interactive. When clicked (in both active and inactive states), a ripple appears and the indicator shifts into position, showing the user feedback.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fm3%2Fimages%2Fm60bmbt7-GM3-Components-Tabs-Accessibility-3-v01.mp4?alt=media" aria-label="Hover state appears when hovering over tabs, clicking on them changes the state to active."></video>

Cursor: Hover, Click

**Keyboard/Switch&#xA0;**

* When tabbed, a focus indicator appears, providing a visual cue to the user that the destination is now selected
* When the user engages with the selected tab via Space/Enter in active [states](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element."), the user is taken to a new destination
* Within the tab menu, the user is able to arrow/tab through the menu items, Space/Enter to select an item, or tab to exit the active state

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fm3%2Fimages%2Fm60bmwk8-GM3-Components-Tabs-Accessibility-4-v01.mp4?alt=media" aria-label="Tabbing through navigation items. The focus indicator appears when an item is selected."></video>

Keyboard/Switch: Tab, Space/Enter, Arrow

### Avoid applying density by default

Don't apply density to tabs by default — this lowers their targets below our best practice 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 that this density setting can be easily reverted when it's active, keep all the targets to change it at minimum 48x48 CSS pixels each.

## Initial focus

On arrow/tab in a tab [menu](../menus/overview.md "Menus display a list of choices on a temporary surface."), the active indicator appears on the first interactive element, providing feedback to the user that it is selected. The user is then able to tab to additional interactive elements until all available items are complete within the tab menu.

::: tip Do
<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fm3%2Fimages%2Fm60bo0sa-GM3-Components-Tabs-Accessibility-5.1-v01.mp4?alt=media" aria-label="Arrow or Tab being used to navigate through a tab menu."></video>

Use Arrow/Tab to navigate through items
:::

::: danger Don't
<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fm3%2Fimages%2Fm60bot9i-GM3-Components-Tabs-Accessibility-5.2-v01.mp4?alt=media" aria-label="Space or Enter being used to navigate through a tab menu."></video>

Don't use Space/Enter for navigating tabs. Space/Enter is only used for completing actions.
:::

## Keyboard navigation

| Keys          | Actions                                                                                                                                                                                                                                                                |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Arrow         | Focus lands on the next available navigation destination                                                                                                                                                                                                               |
| Space / Enter | Activates the [focused](../../foundations/interaction/states/applying-states.md#bc6d6853-48ef-490e-8076-448e89e69f0f "A focused state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.") navigation destination |
| Arrow         | Allows navigation through [menu](../menus/overview.md "Menus display a list of choices on a temporary surface.") items                                                                                                                                                 |

## Labeling elements

When the visible UI text is ambiguous, or there is no visible UI text, [accessibility](../../foundations/overview/principles.md "Accessible design makes products usable for people with all kinds of abilities.") labels need to be more descriptive. For example, an [icon button](../icon-buttons/overview.md "Icon buttons help people take minor actions with one tap.") that visually represents a “video camera” requires additional information in its accessibility label to clarify the icon’s intent.

![Small device screen with the tab highlighted and the label and role illustrated.](/assets/79d27270-m2k3h2mn-7.h8GnNBxp.webp)

While the icon visually represents a “Video camera,” the accessibility label for this tab clarifies its function: “Video format media content”