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.
