---
title: "Focus Visible"
url: "https://barrierefreihochzwei.de/en/wcag/2-4-7-focus-visible"
language: "en"
description: "WCAG 2.4.7 requires keyboard focus to be visible. Learn why you should never use outline: none without a replacement and what good focus styles look like."
published: "2025-01-01T08:00:00+01:00"
updated: "2026-10-15T09:42:00+02:00"
---

# Focus Visible

When focus goes wandering.

- **Erfolgskriterium:** 2.4.7
- **Prinzip:** Operable
- **Konformitätsstufe:** Level AA
- **Erklärung beim W3C:** [www.w3.org/WAI/WCAG22/Understanding/focu...](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html)

Success criterion 2.4.7

# 2.4.7 Focus Visible

Level AAOperable

When focus goes wandering.

## 1. What is the goal of this criterion?

Have you ever tried to use a website with just the keyboard? You press Tab, Tab, Tab – and suddenly you have no idea where you are. Focus has jumped somewhere, but you can’t see where.

People who rely on the keyboard – for example because of a motor impairment or a visual impairment – are literally left in the dark without a visible focus indicator. And anyone who simply prefers working with the keyboard loses track too.

The goal of Success Criterion 2.4.7 is therefore simple: every element that can receive keyboard focus must visibly show that it has focus. In short: you should always be able to see where you are.

## 2. What exactly does it require?

Every keyboard-operable user interface must have at least one mode in which the focus indicator is visible.

**What does that mean in practice?**

- When an element receives keyboard focus, a visible indicator must appear.
- The indicator must remain visible for as long as the element has focus – it must not disappear after a short time.
- This applies to all focusable elements: links, buttons, form fields and custom controls.

**Important details:**

- Browsers come with their own focus indicators (usually an outline).
- These must not be removed without an equivalent replacement.
- Browsers often only show the indicator when using the keyboard, not when clicking with a mouse – that’s allowed.
- Different kinds of indicator are possible: outline, underline, background colour or a combination.
- 2.4.7 doesn’t specify a minimum size or contrast. To make sure the indicator is really noticeable, though, follow [Non-text Contrast](https://barrierefreihochzwei.de/en/wcag/1-4-11-non-text-contrast) (at least 3:1) and [Focus Appearance](https://barrierefreihochzwei.de/en/wcag/2-4-13-focus-appearance) (AAA).

So the criterion is met if either the browser’s default indicator is kept or a custom focus style is at least as visible. In addition, [Focus Not Obscured (Minimum)](https://barrierefreihochzwei.de/en/wcag/2-4-11-focus-not-obscured-minimum) requires that the focused element isn’t hidden by other content.

## 3. Why does it matter for accessibility?

Imagine filling out an online form but not being able to see which field is active. Or tabbing through a menu without knowing which item is currently selected.

Visible focus indicators improve accessibility because they:

- help people with low vision keep track of their position on the page,
- support people with motor impairments who work with a keyboard, switches or voice control,
- help people with attention or memory impairments stay oriented,
- give all keyboard users control over their navigation,
- help in situations where a mouse isn’t available or practical.

And not least: a clear focus indicator improves the experience for everyone – including people without disabilities who happen to be using the keyboard.

## 4. How to meet the criterion

The good news: browsers already provide focus indicators. The bad news: many people remove them because they’re considered “ugly”. Here are some proven ways to get it right:

**Ground rules for good focus indicators:**

- Use the browser defaults as a baseline – or replace them with something at least as visible.
- Make sure custom styles have enough contrast against the background.
- Make the indicator clear – too subtle helps no one.
- Be consistent: all focusable elements should be marked in a similar way.
- Don’t rely on a colour change alone; combine it with an outline or underline.

**Technical implementation:**

```
/* Bad: removing focus without a replacement */
button:focus {
  outline: none;
}

/* Better: define your own focus style for keyboard use */
button:focus-visible {
  outline: 2px solid #005a9e;
  outline-offset: 2px;
}

/* With an extra cue – the outline stays */
button:focus-visible {
  outline: 2px solid #005a9e;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #ffffff;
}
```

**Practical tips:**

- Regularly test your website using only the keyboard.
- Use `:focus-visible` to show the indicator for keyboard use without distracting mouse users.
- Don’t rely on `box-shadow` alone: in Windows contrast themes (forced colours), shadows aren’t displayed. An `outline` – transparent if necessary – stays visible there.
- Check the indicator on every background – it must be visible on both light and dark areas.

**Tools and resources:**

- The Tab key – the simplest and most important test
- Contrast checkers for your focus colours
- Browser extensions for accessibility checks

## 5. Why this criterion matters for businesses

A visible focus indicator isn’t just mandatory – it shows that you take all your users seriously.

**1. A wider audience:** According to the WHO, around 1.3 billion people worldwide live with a significant disability. Add people with temporary impairments (such as a broken arm) and everyone who simply prefers the keyboard. With visible focus, your website works for all of them.

**2. A basic building block of accessibility:** A missing focus indicator is one of the issues that stand out quickly in audits – and it can be avoided with a few lines of CSS.

**3. Better usability:** Clear focus indicators improve navigation for everyone who uses the keyboard – from power users who love shortcuts to people who struggle with a mouse.

And finally: 2.4.7 is a Level AA criterion and therefore part of WCAG 2.1 AA, which the harmonised standard EN 301 549 references. Under the European Accessibility Act (EAA), many consumer services such as online shops must meet these requirements; in Germany, the EAA is implemented by the Barrierefreiheitsstärkungsgesetz (BFSG), which has applied since 28 June 2025. This is general information, not legal advice.

## 6. The success criterion in the W3C’s words

> **Success Criterion 2.4.7 Focus Visible (Level AA)**
> 
> Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

In short: in any keyboard-operable interface, it must be visible which element currently has keyboard focus.

**Official explanation from the W3C**

The W3C explains every success criterion in depth – with intent, examples and techniques.

[Understanding 2.4.7](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html)

## More criteria from “Operable”

 [  2.1.1 Level A ### Keyboard

When every click can also be a keystroke.

 ](https://barrierefreihochzwei.de/en/wcag/2-1-1-keyboard) [  2.1.2 Level A ### No Keyboard Trap

When there’s no way out.

 ](https://barrierefreihochzwei.de/en/wcag/2-1-2-no-keyboard-trap) [  2.1.3 Level AAA ### Keyboard (No Exception)

When everything really has to work by keyboard.

 ](https://barrierefreihochzwei.de/en/wcag/2-1-3-keyboard-no-exception)