Accessibility

Dropdown buttons toggle the visualisation of contextual menus. We've defined a set of good accessibility practices for dropdown buttons, which will help users with assistive technologies.


Description

  • When a button has focus, pressing the spacebar and enter keys should open the dropdown menu.
  • Users should be able to navigate the different menu items by using the up / down arrows.
  • The dropdown menu should close by using the escape key. On closing, the focus is automatically repositioned onto the button that opened the menu.
  • It should have an aria-expanded attribute with a true/false value, to indicates the current state of the dropdown popup.
  • It should have an aria-haspopup attribute set to true to indicate the availability and type of interactive dropdown popup.
  • If the button does not have any accessible label or text for eg. icon-only dropdown buttons, use the aria-label attribute. To learn more about buttons, follow the button accessibility rule.

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.