Focus appearance explained

First posted 2nd September 2022 in Accessibility; updated 24th July 2023

There’s some great stuff coming up in version 2.2 of the Web Content Accessibility Guidelines (WCAG), but there’s one rule that’s particularly difficult to understand: 2.4.13 Focus Appearance.

Update: this rule was simplified considerably when WCAG 2.2 moved to ‘Proposed Recommendation’ on the 20th of July 2023; it was also moved from level AA to AAA. So this article probably isn’t very useful anymore!

What the rule applies to

The rule applies to ‘user interface components’, which means:

  • form fields
  • links
  • buttons

Essentially, any element you typically interact with.

Note: this can also include things like horizontally-scrolling tables.

Indicator style

The focus indicator must:

  • be at least 2px thick
  • be a solid line
  • go round the whole element

Colour contrast

The contrast of the focus indicator is covered already in 1.4.11 Non-text Contrast, so it must provide at least a 3:1 contrast ratio against:

  • 3:1 against the background it sits on
  • 3:1 against the element (e.g. a button) that has focus

The focus indicator should also be obvious compared to

  • how the element looked before it had focus
  • other similar elements that aren’t in focus

So Focus Appearance sets the contrast ratio of the focus indicator against the focused element’s unfocused state at at least 3:1.

Accessibility in your inbox

I send an accessibility-centric newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. WCAG 2.2 in language I can understand

    A follow-up to my post on the Web Content Accessibility Guidelines 2.1, level AA; this time explaining the nine rules coming up in WCAG 2.2.

  2. Images as the first thing in a button or link

    If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.