---
url: /components/app-bars/accessibility.md
description: >-
  Top app bars display navigation, actions, and text at the top of a screen.
  They contain a title and actions related to the current screen.
---

# App bars

Top app bars display navigation, actions, and text at the top of a screen. They contain a title and actions related to the current screen.

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

## Use cases

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

* Understand what page they’re currently visiting
* Take actions or navigate to a new page destination
* Maintain access to app bar actions when the content is scrolled

## Interaction & style

### Touch

When tapping on an icon button, a touch ripple appears, indicating interaction feedback.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmlosdik1-GM3%20-%20App-bar%20-%20Accessibility%2001%20-%20IA%20-%20v01.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 to indicate feedback.

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

Cursor: Hover, Click

### Keyboard or switch

When navigating to an interactive element, a focus indicator appears to show that action can be taken.

When the element is selected, an action is then performed.

<br>

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmlosad0z-GM3%20-%20App-bar%20-%20Accessibility%20-%2003%20-%20IA%20-%20v01.mp4?alt=media" aria-label="An example of how to navigate the app bar using a keyboard."></video>

Interactive elements should have focus rings

### Initial focus

Focus should initially land on the leading button, since it’s the first interactive element of the app bar.

![The tab button is used to navigate from the first button to the second button in the app bar.](/assets/34848860-mlos7r6g-04.BO437O-j.webp)

Use **Tabs** to navigate through interactive items

![The space or enter button activates the second action.](/assets/43a71f1c-mlos8gq8-05.Dtu5qTwz.webp)

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

## Color

On search app bars, use the default color roles when possible.

* Search container: **surface container**
* Search label: **on surface variant**

On darker backgrounds, search bar containers can use the **surface bright** role to maintain strong visual contrast. 

If mapping to other color roles, make sure the text and container have 3:1 contrast to ensure readability.

::: tip Do
![A search app bar with default dark text on a light container background.](/assets/45211f52-mlos5etv-06-do.j26nzLKP.webp)

Make sure search bars and their labels have at least 3:1 contrast. Use the default colors when possible.
:::

::: danger Don't
![A search app bar with custom light text on a light container background.](/assets/9643e085-mlos65h6-07-dont.CytFJaar.webp)

Avoid using custom color roles for the search bar container and search label text. If custom roles are necessary, make sure they have contrast of at least 3:1.
:::

## Keyboard navigation

| Keys           | Actions                                    |
| -------------- | ------------------------------------------ |
| Tab            | Move focus to the next interactive element |
| Space or Enter | Activate the focused element               |

## Labeling elements

The accessibility label for a title should be the same as the content within the title. If needed, add additional context to the accessibility label to ensure users understand what page they’re on or what content is being shown.

Screen readers will read the UI text followed by the component’s role.

![The headline has accessibility role “Title”.](/assets/c800d2be-mlos1na5-08.arZbc8V6.webp)

An app bar’s accessibility label can incorporate its UI text as well as additional context

Label icon buttons according to their [accessibility guidelines](../icon-buttons/accessibility.md).

![The app bar icon button has the accessibility role “Button”.](/assets/e4828462-mlos0avb-09.TGayL9gY.webp)

An icon button should be clearly labeled on the action it takes, like **View on map**