Skip to main content

The WCAG Primer is intended for use by the UK cross government accessibility community.

2.4.7 Focus Visible (AA)

What WCAG says:

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Understanding 2.4.7 Focus Visible

What this means

When interactive elements such as links, buttons and form fields have keyboard focus, the focus indicator must always be visible.

Why it matters

People who use a keyboard to navigate need to know where they are on a page.

How to check

Tab through interactive elements. Check that you can always see where the focus is.

How to test in detail for 2.4.7 Focus Visible

Good examples

The following examples relate to an adjacent GOV.UK style Continue button and Cancel link.

Green Continue button and blue Cancel link, with no keyboard focus

The Cancel link receives visible focus by adding a yellow background, darkening the text and thickening the line underneath. While the yellow colour has low contrast against its background, the thickening of the black line ensures that there is a sufficiently visible focus indicator in order to also pass 1.4.11 Non-text Contrast.

A Cancel link with a yellow background and a thick black line underneath. It is next to a green Continue button.

The Continue button receives visible focus by changing its colour from dark green to yellow, and changing the text from white to black. While this relies on changes of colour, the contrast ratio of this change is higher than 3:1, also passing 1.4.1 Use of Colour.

A Continue button highlighted in yellow

Common mistakes

Custom element has no visible keyboard focus

A custom Home button has been created using a generic element (<div>) rather than, for example, a button or link tag. There is no code or styling in place to change its appearance when it receives keyboard focus.

Home button with no visible focus

Focus styles turned off

Some websites have focus styles turned off by default, using code such as "outline: none". This should always be avoided.

This success criterion only requires that a focus indicator is visible without specifying how visible it should be. There are several other closely-related criteria:

  • 1.4.1 Use of Colour requires there to be some way other than a change in colour to determine what has keyboard focus.
  • 1.4.3 Contrast requires text to have enough contrast even when focussed.
  • 1.4.11 Non-text Contrast requires that a focus indicator has a contrast ratio of at least 3:1 against surrounding pixels.
  • 2.1.1 Keyboard requires everything to work with a keyboard, regardless of whether or not the focus is visible.
  • 2.4.3 Focus Order requires elements to receive focus in a logical order.
  • 2.4.11 Focus Not Obscured requires elements that would normally have visible focus not to be covered by something else on screen.
  • 3.2.1 On Focus requires focus to stay where it is when an element receives focus.

Also, Understanding 2.4.13 Focus Appearance (level AAA) has more guidance on how visible a focus indicator should be.