Button

Success Criteria:

Description Purpose is clear
Role Identifies itself as a button
Relationships Uses aria-haspopup for modal, listbox, or menus
State Express its state (pressed, expanded, disabled)
Focus Visibly focusable with tab key / swipe
Action Enter, spacebar / double tap

Keyboard & Screenreader Support

Tab / swipe Focuses the button
Enter / double tap Activates the button
Space / double tap Activates the button

Native Element

You should use a native <button> element rather than some <custom-element> from because it will be read with the correct role, disabled state, and keyboard support is built in for free.

Description

  • Inner text should describe the purpose of the button.
  • aria-label can also be used (as a last resort)

Role

  • Is natively a button

Relationships

  • aria-haspopup="true/false" for menu, listbox or modal
  • aria-controls="popup-id" (not well supported)

State

  • disabled
  • aria-pressed="true/false" for toggles
  • aria-expanded="true/false" for menus or expanders

Focus

  • Focus must be visible

Actions

  • tab
  • enter
  • spacebar
  • swipe
  • double tap

Custom Element

Avoid making button a <custom-element> because by default, it will not be read as a button, has no default states (like disabled), isn't focusable, and has no keyboard support.

Description

  • Inner text should describe the purpose of the button.
  • aria-label can also be used (as a last resort)

Role Requires extra work

  • role="button" is now required

Relationships

  • aria-haspopup="true/false" for menus or modals
  • aria-controls="popup-id"

State Requires extra work

  • aria-disabled="true-false" in place of disabled
  • aria-pressed="true/false" for toggles
  • aria-expanded="true/false" for menus or expanders

Focus Requires extra work

  • tabindex="0" is necessary so tab key can focus
  • Focus must be visible

Actions Requires extra work

  • tab
  • enter
  • spacebar