# Focus Visible: WCAG 2.4.7 and Visible Focus Styles

Source: https://allyway.ai/glossary/focus-visible

Focus visible means that a website shows a visible indicator – usually an outline – on the link, button or field that currently has keyboard focus. WCAG 2.4.7 requires it at Level AA.

Focus visible means that people who use a keyboard can always see where they are on a page. When they press Tab, the active link, button or form field gets a clear focus indicator – typically an outline or ring around it. Without it, keyboard users are navigating blind: they press keys but cannot tell which element will react.

## What it means

[WCAG 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html) is a Level AA criterion of [WCAG 2.2](https://allyway.ai/regulations/wcag-2-2). It says: "Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible." The W3C adds that the indicator must not disappear after a few seconds. Through [EN 301 549](https://allyway.ai/regulations/en-301-549) (clause 9.2.4.7) it is part of what the [European Accessibility Act](https://allyway.ai/regulations/eaa) expects.

The criterion matters for everyone who relies on [keyboard navigation](https://allyway.ai/glossary/keyboard-navigation), and for people with attention, short-term memory or executive-function limitations who need to find their place again quickly.

2.4.7 does not prescribe how the focus indicator looks. Other criteria fill that gap:

| Criterion | Level | What it adds |
|---|---|---|
| **2.4.7 Focus Visible** | AA | A visible focus indicator must exist |
| **1.4.11 Non-text Contrast** | AA | The indicator needs at least 3:1 contrast against adjacent colors |
| **2.4.11 Focus Not Obscured (Minimum)** | AA | The focused element must not be entirely hidden, e.g. by a sticky header |
| **2.4.13 Focus Appearance** | AAA | Detailed rules for size and contrast of the indicator |

> **Warning:** > **outline: none is the classic failure**
> Many themes remove the browser's default focus ring because it "looks ugly". The W3C lists this as failure F78. If you change the outline, always replace it with a visible style.

The browser's default focus indicator can be enough – the W3C accepts it as technique G165 – as long as it stays visible on your colors.

## Examples

A good focus style uses a color with enough [color contrast](https://allyway.ai/glossary/color-contrast) and some space around the element. The CSS pseudo-class `:focus-visible` shows the outline for keyboard users without showing it on every mouse click.

```html title="Example"
<style>
  /* Fails 2.4.7: focus indicator removed */
  a:focus, button:focus { outline: none; }

  /* Passes: clear outline for keyboard focus, 5.98:1 on white */
  a:focus-visible, button:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
</style>
```

A light gray outline like `#cccccc` on white reaches only 1.61:1. It is technically there, but most people will not see it, and it fails 1.4.11.

**Do:** Do

Style `:focus-visible` with a solid outline of 2–3px in a strong brand color, add `outline-offset`, and check the indicator on dark sections, images and buttons too.

**Don't:** Don't

Use `outline: none` without a replacement, show focus only through a subtle color shift, or let a sticky header cover the focused element.

## How to check focus visible



## Questions

Q: What does focus visible mean in WCAG?
A: WCAG 2.4.7 Focus Visible (Level AA) requires that keyboard users can always see which element has focus. Usually an outline or ring around the active link, button or field shows it.

Q: Is outline: none an accessibility violation?
A: Only if nothing replaces it. Removing the outline without another visible focus style fails WCAG 2.4.7 (W3C failure F78). Replacing it with your own clear style is fine.

Q: How much contrast does a focus indicator need?
A: WCAG 2.4.7 sets no number, but focus indicators are visual components, so WCAG 1.4.11 asks for at least 3:1 against adjacent colors. The AAA criterion 2.4.13 Focus Appearance sets stricter rules.

Q: What is the difference between :focus and :focus-visible?
A: `:focus` matches every focused element, including after a mouse click. `:focus-visible` lets the browser decide when a focus ring is helpful – typically during keyboard use. Styling `:focus-visible` keeps visible focus for keyboard users without rings on every click.

Q: Can allyWay fix focus visible automatically?
A: Yes. allyWay adds clear focus outlines to links, buttons and fields where they are missing, as part of its [automatic accessibility fixes](https://allyway.ai/automatic-accessibility-fixes-for-website). Because outlines are a visible change, they only go live after you approve them, and your code and theme stay untouched. [Start for free](https://app.allyway.ai/register) and give keyboard users a clear path through your site.