Keyboard accessibility is one of the most important fundamentals of digital accessibility and determines whether websites can be used fully without a mouse. In this article, you’ll learn which three requirements must be met for accessible keyboard operability and what typical mistakes occur in practice. We’ll also show why visible focus, a logical tab order and functions that can be operated entirely via the keyboard are essential for WCAG compliance and a good user experience.
For whom is usability without a mouse particularly important?
According to the German Federal Government, around 13 million people in Germany who are affected by disability or age benefit from accessibility. .
For a significant proportion of the 13 million users affected by these barriers, keyboard accessibility is a fundamental prerequisite for being able to use websites, forms, navigation, cookie banners, dialogue boxes and purchase processes at all. Those affected include, amongst others:
- Users with tremors, muscle weakness or impaired fine motor skills
- Blind and visually impaired people who use screen readers
- People using voice control, eye tracking or specialised keyboards
- People with temporary limitations, such as following a hand injury
- Users who deliberately work without a mouse or trackpad
This means that keyboard accessibility is a fundamental requirement for digital accessibility. A website may have good contrast, alt text and clear headings. If navigation, forms, buttons or dialogue boxes do not work via the keyboard, key content and functions will still remain inaccessible.
Faulty keyboard accessibility is one of the 10 most common errors in accessible web development. It can be tested semi-automatically, but not completely. A tool can identify many technical risk indicators. Whether a website can actually be operated entirely without a mouse must also be tested practically and manually.
Would you like to know how to navigate websites using a keyboard? In the blog post How to check whether websites can be navigated using a keyboard, we explain it step by step.
The three fundamentals of good keyboard navigability
For keyboard accessibility to be implemented correctly, three areas must work together: focus, order and functionality.
1. Visible focus: Users need to know where they are
The focus indicator shows which element is currently active. Without visible focus, keyboard users cannot tell where they are on the website or which element they will trigger next.
All interactive elements must therefore be focusable and have a clearly visible focus indicator. These include links, buttons, form fields, navigation elements, menu items, tabs, accordions, dialogue elements and consent banners.
At the same time, non-interactive elements such as headings, paragraphs or purely decorative elements should not be focusable unnecessarily. They extend the tab order and make navigation more difficult.
Common focus errors:
- Focus indicator has been removed using
outline: none - Focus is too faint or barely visible
- Focus is obscured by sticky headers, chat widgets or overlays
- Focus jumps to an illogical order
- Invisible elements remain in the tab order
- Users can no longer exit an element
The focus should:
- Be clearly visible
- Fit in with the design system
- Work on all interactive elements
- Not be communicated solely through colour
- Remain recognisable even when zoomed in and at responsive breakpoints
Focus indicates where users are. It must not trigger any significant actions without deliberate confirmation. Actions should generally be triggered by the Enter key, the space bar or an explicit button.
A good focus indicator is not a design flaw. It is a visible sign that professional user guidance has been taken into account during the development of a website.
2. Logical tab order: The path through the page must be understandable
The tab order must follow the visual and content structure of the page. Users expect to be able to navigate through relevant elements from top to bottom and from left to right.
Problems arise when the HTML structure does not match the visible layout. In such cases, the focus jumps seemingly at random between the header, sidebar, form fields, hidden menus and footer links.
Agency rule for clean HTML structure
The most important rule is: The DOM order must correspond to the logical reading order.
Positive tabindexvalues alter a website’s natural focus order. This can cause the keyboard focus to jump in a different way to what the visible page structure would suggest. For keyboard users, this quickly makes navigation illogical and difficult to follow.
In larger projects, this also creates a maintenance issue. As soon as new elements, modules or page sections are added, the artificially set order must be constantly adjusted. Therefore, positive tabindexvalues should be avoided. It is better to structure the HTML in such a way that the natural focus order is already logical and usable.
3. Full functionality: Every action requires a keyboard alternative
Keyboard navigation must be predictable. Users must not be taken by surprise by a change in focus. If only simple links are accessible via the keyboard, this does not constitute accessibility.
Complex components must also function without a mouse:
- Drop-down menus
- Mega menus
- Accordions
- Tabs
- Sliders and carousels
- Filter functions
- Calendar pickers
- Multi-step forms
- Checkout flows
- Cookie and consent banners
- Pop-ups and modal dialogues
- Drag-and-drop functions
- Embedded third-party tools
WCAG 2.2 contains new requirements relating, amongst other things, to keyboard focus, drag gestures, target sizes, consistent help, data entry and accessible authentication.
Conclusion: Keyboard accessibility determines whether a website is truly usable
Keyboard accessibility is not a technical detail on the fringes of accessibility. It determines whether people can even access and use a website’s core functions. If navigation, forms, cookie banners, dialogues or checkout processes do not work without a mouse, important content and actions remain inaccessible.
The three cornerstones of good keyboard accessibility are a visible focus, a logical tab order and full functionality without a mouse. Only when all three elements work together does a website emerge that is not only technically sound but also functions effectively in real-world usage scenarios.
For web agencies and those responsible for websites, this means that keyboard usability should not be tested only at the end of a project. It belongs within design systems, component development, quality assurance and regular website audits. Automated tests help to identify technical risks at an early stage. However, the decisive proof comes from manual keyboard tests following real user journeys.
Implementing keyboard accessibility properly does more than just improve accessibility. Websites become technically more robust, easier to understand and more user-friendly — for people with disabilities, older users, those with temporary limitations and anyone who works efficiently without a mouse., die effizient ohne Maus arbeiten.
