Accessibility
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.
General
- When a button has focus, pressing the
spacebar
andenter
keys 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
aria-label
attribute. - 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
aria-hidden='true'
attribute. - Use the
role='group'
attribute when defining a series of buttons in a group. In addition, groups should be given an explicit label by usingaria-label
attribute.
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.