---
url: /components/toolbars/accessibility.md
description: Toolbars display frequently used actions relevant to the current page.
---

# Toolbars

Toolbars display frequently used actions relevant to the current page.

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

## Use cases

People should be able to the following with assistive technology:<br>

* Navigate and activate any actions in the toolbar
* Select a destination from a menu
* Activate a back button
* Maintain access to toolbar controls when the content is scrolled or collapsed

## Interaction & style

The toolbar has no interactions by default. All interactions are with the elements placed inside.

**Touch**

* When tapping on an icon button in the toolbar, a touch ripple appears, indicating interaction feedback.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fma798ukw-GM3_Toolbar_Accessibility_1_IA_v02.mp4?alt=media" aria-label="An animation of the user tapping on an action item and the ripple effect being shown."></video>

Touch: Tap

**Cursor**

* When hovered, the hover state provides a visual cue to the user that the element is interactive. 
* When clicked (in both active and inactive states), a ripple appears, showing the user feedback.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fma7996zt-GM3_Toolbar_Accessibility_2_IA_v02.mp4?alt=media" aria-label="A mouse hovering over a button in the top app bar, then clicking."></video>

Cursor: Hover, Click

### Initial focus

Focus lands on the first interactive element. 

Use **Tab** to navigate through all other actions.

![Navigating the top app bar using arrow or tab on a keyboard.](/assets/c2c3e262-m0anu1gy-3.DIKc29zy.webp)

Use **Tab** to navigate through interactive elements

![Activating actions in the top app bar using space or enter on a keyboard.](/assets/f6c855e2-m0anv4t7-4.BAO4gUAi.webp)

Use **Space** or **Enter** to activate actions

## Keyboard navigation

| Keys           | Actions                               |
| -------------- | ------------------------------------- |
| Tab or Arrows  | Navigate between interactive elements |
| Space or Enter | Activate the focused element          |

### Labeling elements

On web, the toolbar container should have the **toolbar** role. 

On mobile, it can be a generic container. 

All actions inside the toolbar should follow their respective accessibility guidelines.

![A toolbar on web, with a “toolbar” role label.](/assets/fdd6c23e-m0anynmv-5.jh6EGiy8.webp)

On web, use the **toolbar** role