---
url: /components/icon-buttons/accessibility.md
description: Icon buttons help people take supplementary actions with a single tap.
---

# Icon buttons

Icon buttons help people take supplementary actions with a single tap.

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

## Use cases

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

* Understand meaning of the icon
* Navigate to and activate an icon button
* When applicable, a tooltip should be available to help describe the icon button's purpose

## Interaction & style

Ensure the icon has contrast of at least 3:1 with the surface or background.

::: tip Do
![Icon button with correct contrast ratio.](/assets/77540438-mal4w7e9-1_do.DwmyuQdw.webp)

Icon buttons should have a 3:1 contrast ratio with the surface or background
:::

::: danger Don't
![Icon button with insufficient contrast ratio.](/assets/155364dc-mal4w3mg-2_don-t.Ct_0Q5_5.webp)

Avoid using colors with contrast below 3:1
:::

## Keyboard navigation

| **Keys**       | **Actions**                               |
| -------------- | ----------------------------------------- |
| Tab            | Focus lands on (non-disabled) icon button |
| Space or Enter | Activates the (non-disabled) icon button  |

## Labeling elements

The accessibility label for icon buttons describes the action the button is executing, such as **Add to favorites**, **Bookmark**, or **Send message**.

![Icon button label and role.](/assets/eb3eed81-mal4xuoj-3.BllljeNs.webp)

The icon button label describes the action, such as Add to favorites for the heart icon

## Layout & density

Groups of similar components can be nested together inside a component, or they can stand alone.<br><br>The target size of each icon button should be at least 48dp, even when nested.

![Icon buttons with 48dp target sizes.](/assets/dc4c9042-m0c1h7ba-4.DyybRbHA.webp)

Icon buttons can be used within other components, such as an app bar

### Avoid applying density by default

Don't apply density to icon buttons by default. This lowers their targets below the required 48x48 CSS pixels minimum size. 

Provide density options that allow people to choose a higher density, such as selecting a denser layout or changing the theme. Controls for adjusting density must maintain a target size of at least 48x48 CSS pixels.

## Hover

On web, icon buttons should display a tooltip with an accessibility label.

![“Heart” icon with "Add to favorites" tooltip on hover.](/assets/7ab35e83-m0c1j2b9-5.eBVO0pT5.webp)

The tooltip label text should be clear and concise