Operation with the keyboard

What we check

We open the home page in a browser at desktop size and press the Tab key up to 40 times, the way people do who do not use a mouse. At each step we check:

• Reachability: can a link or button be reached with the keyboard at all?
• Visible focus: does the element that receives focus change visibly, for example through a frame, an underline or a different colour?
• Invisible targets: does the focus land on elements that you cannot see, such as in a closed menu?
• Keyboard trap: does the Tab key go round in circles without reaching the rest of the page?
• Skip link: on pages with many Tab steps at the start, is there a "Skip to content" link?

We close the cookie notice before the run, as a visitor has to first: we reject it or hide it, we never give consent. Another dialog may hold the focus until it is closed. We then rate the steps up to that point. The automatic check does not replace a test with real users.

Why it matters

For many people the Tab key is the mouse. They use it to jump from link to link and trigger with Enter. For this to work, three things are needed:

1. Everything important must be reachable. A menu that opens only on mouse movement, or a "button" that is really a clickable image, stays closed to them.
2. You must be able to see where you are. Without visible focus it is like operating blindfolded. The most common cause is a single line of CSS, outline: none, with which designers remove the "disturbing" frame.
3. You must not get stuck. If the focus goes round in circles, for example in a slider or a chat widget, you cannot get any further.

Invisible targets add to the confusion: you press Tab and apparently nothing happens because the focus is just travelling through a hidden submenu.

Operability with the keyboard is a basic requirement of the WCAG accessibility guidelines.

How to fix it

Make the focus visible

Remove outline: none from the CSS or replace it with a clear custom marking:

:focus-visible {
  outline: 3px solid #0a5bd3;
  outline-offset: 2px;
}

The frame then appears only with keyboard operation.

Take invisible elements out of the tab order

Closed menus, hidden slider slides and hidden pop-ups should not be focusable. Hide them with hidden or display: none or set the attribute inert while they are closed.

Use real links and buttons

What opens a page is an <a href>, what triggers an action is a <button>. Both can be operated with the keyboard out of the box. Clickable <div> or <span> elements cannot.

"Skip to content" link

A link right at the start of the page that appears when it receives focus and jumps to the main content saves the way through the whole navigation. Many WordPress themes have it built in already.

WordPress and builders

Choose themes and plugins marked "Accessibility Ready". In page builders such as Elementor check the settings for focus styles. Wix has a built-in "Accessibility Wizard".

How to check it yourself

Click into the address bar and then press the Tab key repeatedly. Can you see where you are at every step? Do you reach the menu, contact form and phone number? Do you get through to the footer?

Frequently asked questions

Who actually operates websites with the keyboard?

People with motor impairments, blind people with screen reading software, people with voice control or switches, but also many heavy users who are faster with the keyboard. And everyone whose mouse or trackpad happens to be on strike.

The focus outline looks ugly. May it not be adjusted?

It certainly may. It can match the design, for example in the brand colour. With :focus-visible it appears only with keyboard operation, not when clicking with the mouse.