Design SystemComponents
Button
Let users take action, make choices, and move forward.
Accessibility
Users should be able to:
- Use a button to perform an action
- Navigate to and activate a button with assistive tech
Keyboard navigation
| Keys | Action |
|---|---|
Tab | Focus lands on (non-disabled) button. |
Space / Enter | Activates the (non-disabled) button. |
Labeling elements
The accessibility label for a button ideally comes from the visible label text on the button such as Done, Send, or Reply. Consider aligning the accessibility label (used for assistive technology devices like screen readers) with the visible label text.
If the button doesn't have visible label text, which is the case for icon buttons, have the accessibility label describe the action that the button is executing, such as Favorite, Bookmark, or Send message.