---
url: /components/extended-fab/accessibility.md
description: >-
  Extended floating action buttons (extended FABs) help people take primary
  actions, just like FABs. They’re wider than FABs and include a text label,
  providing more detail and a larger target surface.
---

# Extended FABs

Extended floating action buttons (extended FABs) help people take primary actions, just like FABs. They’re wider than FABs and include a text label, providing more detail and a larger target surface.

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

## Use cases

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

* Navigate to and activate the extended FAB

## Interaction & style

To make it easier for users of screen readers to reach a primary action such as an extended FAB, consider placing the action in the upper left region of large web screens, like in an [expanded navigation rail](../navigation-rail/overview.md "Expanded navigation rails show text labels and an extended FAB, and can be default or modal.").

In smaller windows, the best place for the extended FAB is the lower right corner of a screen.

![On a large screen, the Compose FAB is placed on the upper left region in an email app with the expanded window on the right.](/assets/2ab98475-m0e5baky-01.CzLMH6OV.webp)

Extended FABs can be placed in the expanded navigation rail

::: tip Do
![In a compact window, the Compose FAB is placed on the lower right region in an email app.](/assets/eb921858-m0dmgu83-02.T-WH34Dh.webp)

Place extended FABs in an easy-to-reach place that doesn’t obstruct other actions
:::

::: danger Don't
![In a compact window, the Compose FAB is overlapping other buttons in an email app.](/assets/eca4cbd3-m0dmhng1-03.DBVppRlU.webp)

Don’t place extended FABs over another actionable element
:::

## Initial focus

Ensure the extended FAB is prioritized in the overall focus order to create an efficient experience for people who navigate UIs with assistive tech. 

On mobile, the focus order may start with the [app bar](../app-bars/overview.md "App bars contain page navigation and information at the top of a screen"), move to the [navigation bar](../navigation-bar/overview.md "Navigation bars let people switch between UI views on smaller devices."), and then skip past any other content on the page to land on the extended FAB.

When using an extended FAB, both the visible label and icon should be treated as one focusable element. The extended FAB doesn’t need a tooltip because it already has a visible label.

::: tip Do
![A focused extended FAB in the lower right region of a mobile screen.](/assets/b554a144-m0dmis8z-04.D7d27o3F.webp)

Ensure extended FABs get focus when navigating with assistive technology
:::

::: danger Don't
![A focused extended FAB with a tooltip matching the text label.](/assets/ab5caacb-m0dmjod6-05.vZY8Kop5.webp)

Tooltips aren’t required since the extended FAB has label text
:::

## Keyboard navigation

| Keys                             | Actions                         |
| -------------------------------- | :------------------------------ |
| **Tab**                          | Moves focus to the extended FAB |
| **Space **or **Enter** | Activates the extended FAB      |

## Labeling elements

To ensure the action is clear, use consistent icons and text labels, such as a **Compos**__e __icon with a **Compose** text label. 

The icon and text label combination should have one distinct purpose.

The accessibility label must include the same first word as the visible label. For example, if the visible button is **Create**, then the accessibility label might say **Create a new invite**.

![Accessibility labels of an extended FAB.](/assets/f19ad9da-m0dmmjzu-06.BxoXuMBE.webp)

The accessibility label reads **Compose **to match the extended FAB's displayed label