There are different ways to make buttons accessible to screen reader users. EOS has defined the good practices to make accessible buttons in different scenarios for eg. only-icon buttons, buttons with a label, and an icon or group buttons.
- When a button has focus, pressing the
enterkeys should activate it.
- Buttons should have an accessible name. It can be a text inside the button or label that describes the action of the button.
- If the button does not have any accessible label or text for eg. icon-only buttons, use the
- Add the
type="button"attribute to buttons within forms which purpose is not to submit the form in matter.
- If a button has an accessible label and an icon, the icon could become irrelevant to screen reader users.
It is best practice to hide it from screen readers using the
- Use the
role='group'attribute when defining a series of buttons in a group. In addition, groups should be given an explicit label by using
EOS Accessibility checklist
We have developed an extensive checklist based on the Web Content Accessibility Guidelines (WCAG). Please have a look at the EOS Accessibility checklist.