Dropdown menu
A dropdown menu displays a list of actions when a trigger is pressed.
import { ... } from '@ag.ds-next/react/dropdown-menu';Learn more about how to meet WCAG success criteria when implementing dropdown menus. This makes them accessible and inclusive for users of all abilities and situations.
The dropdown component passed accessibility testing 2024.
Clear and descriptive labels
Requirements
- Dropdowns and their menu items have clear, concise labels that describe the action. We recommend using verb and noun pairs – for example: ‘Remove access’, ‘Approve application’, ‘Delete record’.
- The purpose of the dropdown menu and its actions are understood and conveyed by assistive technology.
Benefits
- Improves understanding of available actions.
- Reduces the cognitive load for all users.
- Supports users with cognitive disabilities through clear labelling.
- Helps users predict outcomes of interactions.
- Clear labelling supports users with English as a second language.
- Assistive technology users have equal access to information about the purpose of the component.
WCAG references
Consistent identification
Requirements
Components with the same functionality have consistent identification – for example to remove an item from a table, the actions dropdown menus should always use ‘Delete’ or always use ‘Remove’. Mixing terms can lead to confusion about what happens when the menu item is activated.
Benefits
- Improves learnability.
- Reduces the cognitive load for all users.
- Increases accessibility for users with cognitive disabilities.
WCAG references
Label in accessible name
Requirements
Visible dropdown labels must match the beginning of the accessible name. If you want to avoid horizontal scroll in a table, you may not have space to include a noun/verb pair. For example, the visible label might read ‘Actions’, but the accessible name is ’Actions - Record 2’.
Benefits
- Screen reader users hear the action that will occur when the menu item is used.
- People who use speech recognition can activate the menu item by saying the text they see on the dropdown option.
WCAG references
Name, role, value
Requirements
- All dropdown actions have appropriate names, roles and values that are understood and conveyed by assistive technology.
- Clear label identifying the dropdown and its actions.
- ARIA roles and states where needed – for example,
aria-expanded,role="menuitemradio".
Benefits
- Assistive technology users have equal access to information on the state of the component.
- Improves usability for voice control software users.
- Helps users with cognitive challenges understand component functionality.
- Makes automation and testing more reliable.
WCAG references
Semantic markup
Requirements
- Code is marked up in the most semantic way possible.
DropdownMenuItemcomponents use themenuitemrole.DropdownMenuItemRadiocomponent uses themenuitemradiorole.
Benefits
- Ensures proper functionality across different assistive devices.
- Ensures built-in keyboard accessibility without additional code.
- Simplifies development by leveraging built-in browser behaviours.
- Makes maintenance easier by using standard patterns.
- Improves compatibility across different assistive technologies.
WCAG references
- Understanding success criterion 1.3.1 Info and relationships
- Understanding success criterion 4.1.2 Name, role, value
Status messages
Dropdown menu actions can have important consequences. Learn about using status messages to communicate important changes in content, especially destructive ones. Visit AgDS Accessibility – States and status – requirements.