---
url: /components/search/accessibility.md
description: >-
  Search lets people enter a keyword or phrase to get relevant information.
  Search bars can display suggested keywords or phrases as the user types.
---

# Search

Search lets people enter a keyword or phrase to get relevant information. Search bars can display suggested keywords or phrases as the user types.

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

## Use cases

People should be able to use assistive technology to:

* Navigate to and focus on a search bar
* View the hinted search text or persistent label
* Input text and complete a search
* Interact with a list of search suggestions and results
* Clear the input text

## Interaction & style

### Autosuggest

When search suggestions and results appear, the screen reader must announce the change. This lets people know list items are available for selection.

![Hinted search text and autocomplete results on a mobile screen.](/assets/bffc2c66-mlgrjdxa-01.dI9r6vf-.webp)

Autocomplete results should be announced by the screen reader

## Initial focus

Initial [focus](../../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.") lands on the first interactive element. This is often a leading [icon button](../icon-buttons/overview.md "Icon buttons help people take minor actions with one tap.") or [text field](../text-fields/overview.md "Text fields let users enter text into a UI."). A leading icon button usually activates search directly or opens a navigation component.

![Search bar with a focused leading icon.](/assets/09ad24a1-mlgrkpb6-02.DBHeaHr9.webp)

Initial focus can land on a leading icon

![Search bar with no leading icon. The text field is focused.](/assets/a26dcfa0-mlgrl9ca-03.DJJZPNEb.webp)

If there’s no leading icon, focus lands on the text field

## Keyboard navigation

| **Keys**                       | **Actions**                              |
| ------------------------------ | ---------------------------------------- |
| **Tab** or **Shift** + **Tab** | Navigate between interactive elements    |
| **Space** or **Enter**         | Activate the search text field for input |
| **Arrows**                     | Navigate between search result items     |

## Labeling elements

The hinted search text should be used as the accessibility label describing the search bar.

<br><br>The role for the input field should be:

* Android: **Text field**
* iOS: **Search field**

![Search bar with “Label: Search messages” and “Role: Text field”.](/assets/7a8d7440-mlgrql4p-04.DiZzFTzJ.webp)

The accessibility label should match the hinted search text

Leading and trailing icon buttons should be labeled according to their [accessibility guidance](../icon-buttons/accessibility.md).

![A search bar with accessibility labels for its leading icon button and trailing avatar.](/assets/676e596c-mlgrt6xt-05.0Ec8ZAY0.webp)

Use icon labels for icon buttons

Search suggestions and results use the list component. Screen readers automatically announce the results as a list.<br><br>For accessibility labels, follow the [list accessibility guidelines](../lists/accessibility.md).

![A search bar on mobile, showing search results in a list.](/assets/2a492c39-mlgrwf25-06.C0OP0NjJ.webp)

Search suggestions and results are created using lists