Focus outline visibility – only for keyboard or for touch and mouse too?

Note: This post is older than two years. It may still be totally valid, but things change and technology moves fast. Code based posts may be especially prone to changes...

(Loaded 940 times)

I believe all users should have the focus outline visible, but not everybody agrees with me. And there is a new CSS pseudo selector on the horizon – :focus-visible that is somehow connected.

Focus outline – sometimes a subject of love or hate.

Keyboard only users must see where their focus is, at all times – and that is actually also a WCAG success criterion ( 2.4.6: Focus Visible, opens in new window) – just to be clear about it.

In my opinion we must use it by default, for all inputs. If user clicks on an element with mouse – show it. If user touches it on mobile – show it. It can help everybody!

I can be distracted and when trying to fill in my tax report – and there it is – helping me to quickly find last field. User that needs to zoom in will also appreciate it, believe me.

The purpose of this success criterion is to help a person know which element has the keyboard focus.

Understanding Success Criterion 2.4.7: Focus Visible

Shouldn’t we just drop the keyboard from this sentence? Use CSS pseudo selector :focus and set a smart and nice outline and be consistent is my suggestion.

Should user agents choose when to show focus outline instead of developers?

It seems that this will be the reality. I’ve discovered that we can actually let the user agent determine if it will make focus outline visible or not by using a new CSS pseudo selector called :focus-visible. The specification is still a draft at this time (Selectors Level 4, July 2020, opens in new window), but it is already supported in Firefox when I write this.

The interesting part here is how the user agent will determine when to match the :focus-visible, but it is not up to the specification alone (user agents can choose their own heuristics).

Specification is suggestive a bit, for example:

  • user agent will check if user has set some preferences for focus indication, this will be the ultimate check that will override all others,
  • any elements that supports keyboard (or virtual keyboard) will always trigger pseudo selector,

I guess we have to wait and see.

Author: Bogdan Cerovac

I am IAAP certified Web Accessibility Specialist (from 2020) and was Google certified Mobile Web Specialist.

Work as digital agency co-owner web developer and accessibility lead.

Sole entrepreneur behind IDEA-lab Cerovac (Inclusion, Diversity, Equity and Accessibility lab) after work. Check out my Accessibility Services if you want me to help your with digital accessibility.

Also head of the expert council at Institute for Digital Accessibility A11Y.si (in Slovenian).

Living and working in Norway (🇳🇴), originally from Slovenia (🇸🇮), loves exploring the globe (🌐).

Nurturing the web from 1999, this blog from 2019.

More about me and how to contact me: