Home › Knowledge base › WCAG criterion

Keyboard operation per WCAG 2.1.1

Every function must be reachable and triggerable with the keyboard. This applies especially to self-made controls (div/span with a click handler instead of button/a).

Common mistakes

Clickable <div>/<span> without tabindex and keyboard handler, dropdown menus only on :hover, modals without focus management, carousels without control buttons.

How to do it right

Use built-in elements (button, a, input). Where that is not possible: role, tabindex="0" and a keydown handler for Enter/Space. No keyboard traps — you must be able to get out again too.

The limit of the automated test

Keyboard operation can only be checked with real interaction — the free a11yglass scan does not cover it. Go through the page once from top to bottom using only Tab, Shift+Tab, Enter, Space and the arrow keys.

How a11yglass helps

The free scan checks the delivered HTML and CSS for automatically recognisable WCAG breaches, and names per finding the success criterion and a concrete step. It finds roughly 20–35% of issues and does not replace a full assessment.

Read on

• Visible focus per WCAG 2.4.7
• Form labelling per WCAG
• Motion per WCAG 2.2.2 / 2.3.3

General information to the best of our knowledge, not legal advice. For an individual case, contact a law firm specialising in IT law.