--- url: /components/menus/accessibility.md description: >- Menus display a list of choices on a temporary surface. Menus can open from a variety of components, including icon buttons and text fields. --- # Menus Menus display a list of choices on a temporary surface. Menus can open from a variety of components, including icon buttons and text fields. [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, open, and close a menu * Navigate between and select menu items ## Interaction & style Menu items need certain cues to clearly show when they're selected:  * By default, menu items change shape and color when selected * The default color contrast is 3:1 between selected and unselected menu items * It's recommended to include another visual cue, like a checkmark


![A state dropdown menu with the selected item Alaska highlighted in a vibrant color, with a checkmark icon.](/assets/b5ba5c92-mi5oa1gs-01.BF3Bywch.webp) Use multiple visual cues like color, shape, and icons to show that an item is selected ## Flexibility & slots Use caution when adding slots to menus: * Make sure the menu remains accessible * Elements must follow the rules and interaction patterns of the menu component * Keep the same menu item padding * Targets should be 48x48dp or larger Don't add buttons, switches, or other direct actions into the menu item. Nested elements should only perform one action. Adding multiple actions can break keyboard navigation and screen reader functionality. [More on slots in menus](guidelines.md#8a1684bb-99a5-4a73-91a0-068d0b406127) ::: warning Caution ![1 diagram and 1 menu showing icons in each item’s leading slot.](/assets/6e40b9aa-mhllqs3p-12-alt.CVXuas9k.webp) Reserve the use of slots for use cases that maintain the menu’s accessibility and functionality ::: ## Focus **Initial focus** When a menu opens, focus should be placed on the first menu item. This allows people using a keyboard or other assistive technologies to begin navigating the menu immediately. **Exiting a menu** People expect to exit a menu by: * Selecting an option * Tapping **Escape** or outside of the menu  * Using the system back [button](../buttons/overview.md "Buttons let people take action and make choices with one tap.") Where focus is placed after closing the menu depends on the app. ![4 common keyboard navigation methods for menus on Android and web.](/assets/59f37c00-mhkewf5t-03.DDapVQ2F.webp) Keyboard navigation on Android and web: 1. **Tab** to select a menu item 2. **Space** or **Enter** to open a menu 3. **Space** or **Enter** to select a menu item 4. **Escape** to close a menu ## Keyboard navigation | **Keys** | **Actions** | | ------------------------------------------ | ------------------------------------------------------------------------------ | | **Tab** | Focus lands on menu | | **Space **or** Enter** | For closed menus: Opens menu or submenu
For open menus: Selects a menu item | | **Up** and **Down** arrows | For closed menus: Opens menu
For open menus: Moves focus to the next item | | **Left** and **Right** arrows | Opens or closes a submenu | | **Letters** | Focus moves to the next menu item starting with letter | | **Escape** | Closes menu | ## Interactability [Disabled](../../foundations/interaction/states/applying-states.md#4aff9c51-d20f-4580-a510-862d2e25e931 "A disabled state communicates a non-interactive component or element.") menu items can receive focus but aren't selectable. Dividers and gaps can't receive focus. ::: tip Do ![A disabled menu item “Share” is in focus.](/assets/23db83cf-mhkkp9r3-05-do.CmtnsiKE.webp) Disabled menu items can receive focus ::: ::: danger Don't ![A divider with focus.](/assets/5ae976d4-mhkkqmt3-05-don-t.CzpEAIqM.webp) A divider or gap can’t receive focus ::: ## Labeling elements [Accessibility](../../foundations/overview/principles.md "Accessible design makes products usable for people with all kinds of abilities.") labels are used with assistive technology devices like screen readers.  The accessibility label should be the same as the menu item text. The role is [dependent on platform](#9c562e2c-da3a-4212-a2e3-ac91ba450b65).
![A “Preview” menu item has an accessibility label of ”preview”.](/assets/6bb8640d-mhkl2sea-07.kOlsNvmF.webp) The menu item’s accessibility label aligns with the UI text | **Element** | **A11y label** | **Role (Web)** | **Role (Android Views)
** | **Role (Jetpack Compose)** | | -------------- | -------------- | -------------- | ---------------------------- | :------------------------: | | Menu item text | Preview | Menu item | Generic actionable element | Generic actionable element | For menu items with text and an icon, the icon’s accessibility label should be marked as **decorative** to avoid redundant verbalizations. ![A menu item icon of an eye next to the word “preview” has a note of “Decorative.”](/assets/39693bb2-mhkkynea-08.CcQm6Mh5.webp) For menu items with text and an icon, the icon’s accessibility label is **decorative**