---
url: /components/bottom-sheets/accessibility.md
description: >-
  Bottom sheets are surfaces containing supplementary content, anchored to the
  bottom of the screen.
---

# Bottom sheets

Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.

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

## Use cases

Users should be able to:

* Resize bottom sheets without having to rely on touch gestures

## Interaction & style

### Touch target area

The top 48dp portion of the bottom sheet is interactive when user-initiated resizing is available and the drag handle is present.

![Touch target area of a bottom sheet.](/assets/a25c998c-lvp8g5p9-1.ClYkrp8v.webp)

To ensure touch target accessibility, the top portion of a bottom sheet can be reserved for resize interactions

### Initial focus

The optional drag handle 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.") in the tab order and interacted with using non-touch inputs, such as keyboard or [switch](../switch/overview.md "Switches toggle the state of an item on or off.") controls.

![Focus on the drag handle of a bottom sheet.](/assets/f4c91f72-lvp8gmd5-bottom-sheet-focus.Bs6qNqm3.webp)

Visible focus shown on the drag handle affordance

### Dragging

Include a single-pointer alternative for any action that can be completed by dragging.

Drag handles should cycle the bottom sheet through available heights when selected. If a drag handle can’t be used, add a button to do this action.

![Bottom sheet with focused drag handle at lower preset height.](/assets/830c9035-m33eulyj-20.Df0wRCBe.webp)

Interacting with the drag handle can quickly move a bottom sheet through preset heights

![Bottom sheet with drag handle at higher preset height.](/assets/1de2bb51-m33euvu0-21.eHpNy6XK.webp)

A bottom sheet can automatically resize to another height after interacting with the drag handle

## Keyboard navigation

| Keys          | Actions                           |
| ------------- | --------------------------------- |
| Tab           | Focus lands on drag handle        |
| Space / Enter | Toggles between available heights |

## Labeling

Label only the drag handle. The [accessibility](../../foundations/overview/principles.md "Accessible design makes products usable for people with all kinds of abilities.") role for the drag handle is “button.”

![Labeled drag handle with role of button.](/assets/c68edaf8-m4bunmcg-2.DjqUHtTb.webp)

Label the drag handle