---
url: /components/side-sheets/accessibility.md
description: >-
  Side sheets are surfaces containing supplementary content or actions to
  support tasks as part of a flow.
---

# Side sheets

Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.

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

## Use cases

People should be able to dismiss the side sheet using assistive technology.

## Interaction & style

Material requires that a close affordance, such as a close [icon button](../icon-buttons/overview.md "Icon buttons help people take minor actions with one tap."), is always present within a side sheet.

::: tip Do
![Side sheet correctly designed with close icon in upper right corner.](/assets/554e9b88-mgamgh0c-01-do.DRc7Z-t4.webp)

A close icon button makes the side sheet easy to dismiss
:::

::: danger Don't
![Side sheet incorrectly designed with no close icon button.](/assets/7e7b0c68-mgamhoet-02-don-t.CJODE7Y3.webp)

Without a close icon button, people can’t predict the opening and closing flow of side sheets, or know if the sheet is transient or permanent
:::

## Initial focus

Actions within a side sheet can be [focused](../../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.") by tab order using a keyboard or switch control.

![Side sheet diagram showing the focus order of headline, close, save, cancel.](/assets/0759ad9c-mgamkh0k-03.CtRxkXGf.webp)

Visible focus shown on the available actions within a side sheet:

1. Headline
2. Close
3. Cancel
4. Save

<br>

## Keyboard navigation

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

## Labeling

The accessibility role for a side sheet is **Dialog**.

![Side sheet showing the accessibility role as dialog.](/assets/2dd4ba03-mgamoe2t-04.BUwdZb1w.webp)

The role for side sheets is **Dialog**