- Buttons do not open a new page, use links instead
- Buttons can open dialogs and menus, but should use the proper ARIA attributes
- Always use the
<button>element. This solves most of the accessibly concerns for free.
- Use clear and descriptive labels. By default this is the text inside the
- Ambiguous labels like "click here", "run", "save" are ok for sighted users but can lack context for users using assistive technology. Use the
aria-labelattribute to provide an accessible label for all
<Button>components with potentially ambiguous labels.
- Icon only buttons must provide a descriptive label using the
- Buttons with
:focusshould have an outline and/or a visible change to show it has focus.
- Buttons with focus should be activated when user hits the
- If button has focus,
SHIFT+TABshould move focus to next focusable element.
Related Aria Attributes
Use this to provide more context and an accessible label for
<Button> components. Must be used for buttons with ambiguous labels and icon only buttons.
<Button aria-label="Save Dashboard">Save</Button> would be announced as "Save Dashboard Button" by a screen reader instead of just "Save Button".
Use this to indicate that when the buttons is pressed a popup is triggered. A popup can be a dialog or menu.
For example say you have an icon-only button that reveals a set of options in a context menu when clicked, you would do the following:
This would be announced as "Look Settings popup button" by a screen reader.