---
url: /components/fab-menu/accessibility.md
description: >-
  The floating action button (FAB) menu opens from a FAB to display multiple
  related actions
---

# FAB menu

The floating action button (FAB) menu opens from a FAB to display multiple related actions

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

## Use cases

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

* Navigate and interact with the FAB menu
* Ensure focus is correct when navigating through the menu

## Interaction & style

FAB menu elements meet the minimum target size of 48dp.

![FAB menu measurement annotations. All elements are larger than the minimum target size.](/assets/48f3b18e-m0am5xpn-01.BoTLJksv.webp)

FAB menus have 48x48dp minimum width and sufficient spacing by default

When the FAB menu can scroll, make sure the items scroll behind the close button. 

The close button should always be easy to access and unobstructed.

::: tip Do
![FAB menu items are scrolling behind the close button.](/assets/7bdd0f69-m0am8l9a-02.hCwh_dti.webp)

Allow the menu items to scroll behind the close button
:::

::: danger Don't
![FAB menu items are scrolling in front of the close button.](/assets/cd3fac78-m0am8ym2-03.eXcl7pWK.webp)

Don’t obstruct the close button in short screens like horizontal orientation
:::

## Initial focus

When the FAB is selected, the FAB menu opens, and initial focus remains on the close button, which takes the place of the original FAB.

Then the focus moves from the top menu item to the bottom.

![4 FAB menus with the focus order labelled. Focus moves from the close button at the bottom to the topmost menu item next.](/assets/524d491c-maejeaf9-04.BKB5eF7u.webp)

Focus lands on the close button. People can then navigate through all the items.

1. Close button
2. First menu item
3. Second menu item
4. Third menu item

## Keyboard navigation

| **Keys**               | **Actions**                              |
| ---------------------- | ---------------------------------------- |
| **Tab**                | Navigate to the next interactive element |
| **Space** or **Enter** | Activate the focused button or item      |

## Labeling elements

### Android

On Android, a FAB menu’s close button should include a state to tell screen readers what action will occur when it's toggled. The close button should be labeled: 

* Label: Toggle menu
* Role: Button
* State: Expanded or collapsed

![Accessibility labels for the close button on an Android device.](/assets/211aa7cf-mmmksaup-05.CMOs3KHs.webp)

On Android, the **close button** accessibility labels should include a toggle menu label, button role, and an expanded or collapsed state

FAB menu items should be labeled:

* Label: Match the item’s UI text, such as **Reply all **
* Role: Button

![Accessibility labels for a FAB menu item on an Android device.](/assets/80bca4e8-mmmksh30-06.CxYVGU1W.webp)

Label FAB menu items to match their UI text, like **Reply all**, and use the button role

### Web

On web, a FAB menu is a combination of a [FAB](../floating-action-button/overview.md "Floating action buttons (FABs) help people take primary actions.") and a [menu](../menus/overview.md "Menus display a list of choices on a temporary surface.") component. The FAB opens the menu. Follow the [accessibility guidelines for FABs](../floating-action-button/accessibility.md) and [menus](../menus/accessibility.md).

The FAB's accessibility label should describe the menu that the FAB will open.