---
url: /components/buttons/accessibility.md
description: >-
  Buttons help people take action, such as sending an email, sharing a document,
  or liking a comment. Common buttons prompt most actions in a UI.
---

# Buttons

Buttons help people take action, such as sending an email, sharing a document, or liking a comment. Common buttons prompt most actions in a UI.

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

## Use cases

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

* Use a button to perform an action
* Navigate to and activate a button

## Interaction & style

### Color contrast

Enabled buttons need a 3:1 contrast ratio with the background to meet accessibility best practices. 

This is measured from the container for elevated, filled, and tonal button styles, and the label text for outlined and text button styles.

![Diagram of color contrast ratios for buttons.](/assets/f35bcfe0-mmm13hkn-01.BVmPsNZK.webp)

Higher contrast helps differentiate elements

### 200% text size

Avoid excessive text wrapping or truncation by choosing concise strings. 

On Android, button labels should be kept concise enough to fit within two lines after the text size is increased to 200%. If a button label exceeds this limit and gets truncated, provide an alternative way to access the full content in a single tap.

::: warning Caution
![200% text size on a mobile screen. The overly long button text wraps to a second line: “Download playlist for offline access”.](/assets/625a265b-mmm14hok-02-caution.CATManUV.webp)

Avoid excessive text wrapping or truncation by choosing concise strings
:::

### Rapid clicks

On the web, you can use a modified motion curve to avoid resonant effects from overlapping animations. This provides a smoother experience for interactions where you anticipate multiple clicks or taps in succession.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmmm15x7t-GM3_Buttons_Accesibility%2004%20-%20v02.mp4?alt=media" aria-label="A media player where the “next track” button is clicked rapidly, and is transformed with a smooth motion effect."></video>

Use the modified motion curve if rapid click or pointer interactions are expected

## Keyboard navigation

| Keys           | Actions              |
| -------------- | -------------------- |
| Tab            | Navigate to a button |
| Space or Enter | Activate a button    |

## Labeling elements

The accessibility label for a button should match the visible label text on the button such as **Done**, **Send**, or **Reply**. 

It can contain extra contextual information if necessary.

![Accessibility tags for a text-only button.](/assets/8f2f53c1-mmm17kt7-03.BZnCrqRS.webp)