This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Accessibility
Why must a website be operable without a mouse?
A website must be operable without a mouse, because many people use only the keyboard: blind people with a screen reader, people with tremors or paralysis, and users of special keyboards. If the Tab key can't reach a menu item or a button, that function simply doesn't exist for all these people — as if you'd never built it. WCAG criterion 2.1.1 therefore requires full keyboard operability.
Keyboard operation in practice: Tab, Enter, and arrow keys
Operating a page without a mouse follows a fixed pattern. The Tab key moves a visible marker from element to element: from the logo to the menu, from the menu to the search field, on to links and buttons. The Enter key opens the marked element, arrow keys control menus and dropdown lists. An example: someone filling in your contact form jumps from field to field with Tab and submits at the end with Enter. This pattern only works if every control is technically built as a link, button, or form field. A clickable text paragraph that a script turns into a button looks the same with a mouse — for the keyboard, it doesn't exist.
How the audit service checks keyboard operation
The audit service actually presses the Tab key on your page, stop by stop, right to the end of the document. It also searches the source code for controls that only respond to mouse clicks: elements with a click handler that are unreachable by keyboard. If it finds such elements, the criterion counts as violated, and the report names the first affected element along with an evidence screenshot. If the Tab key reaches not a single stop despite controls being present, that's also a violation. If the measurement stays inconclusive, the report openly marks it as a manual check point — with us, an empty check counts as a failure, never as a free pass.
Examples
Click Handler on a div
<div class="knopf" onclick="warenkorb()">In den Warenkorb</div><button type="button" onclick="warenkorb()">In den Warenkorb</button>A div does not reach the tab key and does not respond to Enter or space key. A button can do both on its own.
Menu opens only when crossed
.menue li:hover > ul { display: block; }.menue li:hover > ul,
.menue li:focus-within > ul { display: block; }focus-within also opens the submenu if the focus is on an entry by keyboard.
- Put the mouse aside and operate your homepage for five minutes using only the Tab key, Enter, and arrow keys.
- Check menus, the search field, and the shopping cart especially closely — that's where most mouse-only spots hide.
- Ask your agency to use real controls for every clickable element: a link, button, or form field instead of clickable text.
- Repeat the keyboard test after every major redesign — a new menu script can remove keyboard operability without anyone noticing.
