Check keyboard accessibility

For: Development

Keyboard (2.1.1 level A)

https://www.w3.org/WAI/WCAG21/Understanding/keyboard

Avoid relying exclusively on pointer-driven events, such as ‘onmouseover,’ to provide functionality when scripting. Such functionality will usually, also require scripting for keyboard operability.

Do not implement access keys.

To test keyboard accessibility, you should be able to:

  • tab to progress through links and controls
  • shift-tab to reverse
  • enter to follow links
  • space to select form controls (such as checkboxes)
  • arrows for radio buttons or tabs

Check that:

  • you can tab to all links, buttons, and form controls
  • you cannot tab to non-functional elements (such as headings and paragraphs)
  • you can easily see where the focus is
  • the focus does not move to hidden elements
  • the focus does not get trapped in an element
  • scripted events (for keyboard, mouse, and touch) only fire when expected
  • the visual order for tabbing progress is left-to-right and top-to-bottom.

No Keyboard Trap (2.1.2 level A)

https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap

Ensure keyboard focus is never trapped on an element without an obvious way to move focus out of the element. Make sure the user can move focus to and from all focusable elements using a keyboard only.

Character Key Shortcuts (2.1.4 level A)

https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts

  • Do not add keyboard shortcuts.

If you use 3rd party content with these types of shortcuts, you must have one of these:

  • a mechanism that allows users to turn off character key shortcuts
  • a functionality to remap the shortcuts to use more than one character (for example, ALT + j).

Focus Order (2.4.3 level A)

https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

Create a logical tab order through links, form controls, and other interactive objects.

Align the focus order with the reading order as much as possible to maintain a logical and intuitive navigation of the content.

When triggering dialogs and menus, make sure those elements follow their trigger in the focus order in an intuitive way. When content is dismissed or removed, place focus back on the trigger. For example, when a modal opens:

  • The focus is set on the modal (first element).
  • The focus is next trapped within the modal (cycles between the elements inside the modal).
  • The focus is then returned to the element that triggered the modal.

Avoid using tab index values greater than 0.

To test focus order, use the keyboard to navigate.