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 and enter 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 using aria-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.