:focus-visible Is Here

One of the most important features of a website that is built with accessibility in mind is that it can be navigated with a keyboard. Most blind users and many users with motor disabilities rely on keyboard navigation, either with a standard keyboard or with a device that mimics the functionality of a keyboard. Providing strong visual indicators that highlight the element that currently has keyboard focus is therefore indispensable. In CSS, the focus styles for an element can be changed via the :focus pseudo-class.

a:focus {
  outline: 3px solid blue;
}

Hiding Focus Styles Is Bad Practice

Besides accessibility requirements, there are also design considerations to be made, though: For some users, a strong visual focus indicator once they click an element with a mouse or touch it with their finger can be irritating or feel “clunky”. Often, the focus highlight is only visible for a short time just before a page change occurs. This is an additional visual change in the interface that users have to process and understand. Without the knowledge that this highlight around the element is actually an accessibility feature, people might be distracted or irritated. Sometimes, it is even perceived as an error. And while some designers certainly are far more sensitive to the aesthetic qualities of an interface than its users – and would be well-advised to get used to a bit more accessibility-oriented, contrasted designs –, it is still relatable that focus indicators might feel like an intrusive break in an otherwise carefully balanced visual design if the designers missed to actively style them.

Many clients and designers, therefore, insist that developers remove the focus styles altogether for purely aesthetic reasons.

a:focus {
  outline: none;
}

Don’t do this. It is an uninformed decision that actively excludes people and should not be an acceptable solution in 2020 anymore. We have to do better. But how?

One way out of this dilemma would be to consciously design the focus state of an element so that it is perceived as a natural part of the transition from one state of the interface to the next. This, however, is not always easy or possible.

:focus-visible to the Rescue

Luckily, there is now another option: The :focus-visible pseudo-class. According to the spec, “the intent of :focus-visible is to allow authors to provide clearly identifiable focus styles which are visible when a user is likely to need to understand where the focus is, and not visible in other cases.” Or, in other words, it lets you show focus styles only when they are needed, using the same heuristic that the browser uses to decide whether to show the default focus indicator:

/* Hide focus styles if they're not needed, for example, 
when an element receives focus via the mouse. */
:focus:not(:focus-visible) {
  outline: 0;
}

/* Show focus styles on keyboard focus. */
:focus-visible {
  outline: 3px solid blue;
}

Chrome 86 just shipped with support for :focus-visible, Firefox supports it via the :-moz-focusring pseudo-class since 2011 and Mozilla is currently working on adding support for :focus-visible, too. So you can start using it now. And once more, progressive enhancement is your friend here. You can define regular focus styles for non-supporting browsers and then overwrite them for browsers that support :focus-visible.

:focus {
  outline: 3px solid blue;
}

:focus:not(:focus-visible) {
  outline: 0;
}

:focus-visible {
  outline: 3px solid blue;
}

You can try it out in this Codepen:

See the Pen :focus-visible Demo by Matthias Ott (@matthiasott) on CodePen.

Note that :focus-visible always applies in combination with :focus. So if you inspect it in Chrome’s Developer Tools, for example, make sure to tick both boxes to see the appropriate focus styles.

Focus Visible In Chrome Developer Tools

A Polyfill for Older Browsers

If you need to support a wider range of browsers, including Safari, there is also a polyfill. It simply adds a focus-visible class to all focused elements in situations in which otherwise the :focus-visible pseudo-selector would match.

Once the script is added to your page, the code looks much like in the examples above. The only difference is that now we are using classes to define the visible focus styles in our CSS:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

.js-focus-visible .focus-visible {
  outline: 3px solid blue;
}

If you decide to use the polyfill, make sure to pay attention to how it behaves in combination with your existing focus styles. It might still be a valid choice to only use the polyfill until Safari also adds support for :focus-visible. But regardless of which method you decide to use, it is fabulous that we now have a solution to a problem that was often “fixed” by developers and designers by making websites less accessible. :focus-visible now offers a solution that is accessible and makes users, designers, and developers happy.

Further reading

-

This is the 62nd post of my 100 days of writing series. You can find a list of all posts here.

~

1018 Webmentions

Photo of David Hellmann
David Hellmann
New link: ":focus-visible Is Here · Matthias Ott – User Experience Designer" — Direct Link: matthiasott.com/notes/focus-vi…
Photo of Matthias Ott
Matthias Ott
Oh yes, 100 %! I’m also linking to your article. 😄; Maybe the screenshot in the tweet is incomplete in that regard… 🤔;
Photo of Jakub G
Jakub G
Websites hiding focus indicator "because it's ugly" has been a major issue on the web for long time. Hopefully with being able to distinguish keyboard/mouse focus, this antipattern will go away.
Photo of Glafira Zhur
Glafira Zhur
Э;р;а; л;и;ш;н;и;х; и; г;л;ю;ч;н;ы;х; с;к;р;и;п;т;о;в; п;о;д;х;о;д;и;т; к; к;о;н;ц;у;! 😍; Д;а;ё;ш;ь; focus-visible!
Photo of Matthias Ott
Matthias Ott
Hey Imran! Sure! I wrote the CSS myself, so no theme. The typefaces are Nudista by Suitcase Type Foundry and FF Spinoza by FontFont.
Photo of James Maclean
James Maclean
I wrote this demo to solve this problem last week. I guess it’s now a polyfil codepen.io/jqim/pen/QWNZw…
Photo of Paul Welsh
Paul Welsh
After being schooled by @patrick_h_lauke and @a_frontend_dev - it’s good to see this more on the wild
Photo of Laurence Cliff
Laurence Cliff
This’ll get designers who hate being able to see accessibility features off our backs!
Photo of Geoffrey Crofte ????;
Geoffrey Crofte ????;
Great news! I'm not sure what you mean with Firefox support because I use it for several weeks now. Or maybe I missed something 😊;
Photo of Geoffrey Crofte ????;
Geoffrey Crofte ????;
Oh yes ok I understand now. It's the Mac behaviour that made me think Firefox supports it by default. Thanks for pointing this out 😊;
Photo of Matthias Ott
Matthias Ott
AFAIK, Firefox still only supports the feature under the name `:-moz-focusring` (see screenshot). But (!) on Mac, buttons still don’t have a focus style on click in Firefox. That’s what confused me a bit, when testing it. I’ll add this to the article… developer.mozilla.org/en-US/docs/Web…
Photo of Em
Em
Sorry mates; web development isn't my strong side. Those CSS properties look super useful, though! :)
Photo of Florens Verschelde
Florens Verschelde
:focus-visible has an implementation in Firefox either behind a flag or enabled only in Nightly, not sure. @Emilio might know more about if it could be enabled more widely or if there are blocking issues.
Photo of Florens Verschelde
Florens Verschelde
Woops sorry, wrong Emilio ^^ I meant to tag @ecbos_ who worked on this feature.
Photo of Em
Em
No worries! It happens all the time. :)
Photo of Emilio
Emilio
Yeah, the Mac focus-on-click behavior is in fact special, but it mimicks the platform convention (i.e., matches Safari).
Photo of Matthias Ott
Matthias Ott
Thanks for the update and explanation, Emilio! Much appreciated! 🤗;
Photo of Emilio
Emilio
Yeah, I implemented it behind a flag, but I think to ship it we probably want to make it a real alias of :-moz-focusring. I tweaked -moz-focusring behavior to be more sensible a while ago with the intention of doing it, but I haven't got to finishing that work.
Photo of Emilio
Emilio
There's probably a bit of spec work involved. I think Gecko's focusring behavior of making outlines always visible once you've tab-navigated should be allowed by the spec. And then probably also some -moz-focusring behavior changes like making it match on some programmatic focus.
Photo of Florens Verschelde
Florens Verschelde
Perhaps not ideal for primarily mouse users who focus a form field and tab through several fields after that. They end up in "keyboard mode" even when using the mouse after that. The focus-visible polyfill handles it well in my experience.
Photo of Florens Verschelde
Florens Verschelde
But since it would mostly affect power users who may know what focus styles are anyway, I think I could live with that.
Photo of Б;у;д;н;и; в;е;р;с;т;а;л;ь;щ;и;к;а;
Б;у;д;н;и; в;е;р;с;т;а;л;ь;щ;и;к;а;
Н;е;м;н;о;г;о; п;р;о; :focus-visible в; с;т;а;т;ь;е; @m_ott: matthiasott.com/notes/focus-vi… И; в;ы;ж;и;м;к;а; к;а;к; в;с;е;г;д;а; н;а; к;а;н;а;л;е;: t.me/htmlshit/453 #HTML #frontend #CSS
Photo of В;е;б;-с;т;а;н;д;а;р;т;ы;
В;е;б;-с;т;а;н;д;а;р;т;ы;
:focus-visible у;ж;е; з;д;е;с;ь;. М;а;т;т;и;а;с; О;т;т; о;б;ъ;я;с;н;я;е;т; п;р;и;н;ц;и;п; р;а;б;о;т;ы; п;с;е;в;д;о;к;л;а;с;с;а;, п;о;я;в;и;в;ш;е;г;о;с;я; в; Chrome 86, и; п;о;к;а;з;ы;в;а;е;т;, к;а;к; п;р;и; п;о;м;о;щ;и; п;о;л;и;ф;и;л;а; д;о;б;а;в;и;т;ь; п;о;д;д;е;р;ж;к;у; в; с;т;а;р;ы;х; б;р;...
Photo of biou
biou
matthiasott.com/notes/focus-vi…
Photo of Smashing Magazine
Smashing Magazine
🎉;🥳; Hurray, :focus-visible is here! /* Hide focus styles, e.g. when an element receives focus via mouse. */ :focus:not(:focus-visible) { outline: 0; } /* Show focus styles on keyboard focus. */ :focus-visible { outline: 3px solid blue; } matthiasott.com/notes/focus-vi… via @m_ott
Photo of gabi alvarez
gabi alvarez
:focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
Photo of Jon Kantner
Jon Kantner
It’s really good news that `:focus-visible` is getting more browser support. It has recently landed in Edge and Chrome 86, so now we wait on Safari. 😄; matthiasott.com/notes/focus-vi… #CSS
Photo of jebswebs
jebswebs
Good reminder: ":focus-visible Is Here" #a11y matthiasott.com/notes/focus-vi…
Photo of Anna
Anna
:focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
Photo of Adilade
Adilade
:focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
Photo of patrick h. lauke
patrick h. lauke
(ignore my last two, tweets, got confused thinking the codepen was already using the polyfill)
Photo of ????;‍♀;️; Stefangnie ????; Waltergeist ????;
????;‍♀;️; Stefangnie ????; Waltergeist ????;
#CSS :focus-visible Is Here. Honestly, I never met any users who said that the focus was "clunky" in any tests, I think that removing the focus is mostly a "designer think it's breaking their design" problem. Still here's a solution :) matthiasott.com/notes/focus-vi…
Photo of patrick h. lauke
patrick h. lauke
it does work as expected "in browsers that don't support :focus-visible it behaves just like it always does/did". hadn't had my coffee, and somebody asked me "so why is the demo not working in Firefox?" which got ME confused until i realised the demo WASN'T polyfilled too
Photo of Matthias Ott
Matthias Ott
No, thanks for taking a look at it! 😊; But would you say that it works as expected? I didn’t expect this post to get that much attention and am happy to hear about anything I might have overlooked so that people get to read correct information. 😅;
Photo of Johan Ramon
Johan Ramon
:focus-visible Is Here matthiasott.com/notes/focus-vi… #accessibility #a11y
Photo of WPbonsai
WPbonsai
:focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
Photo of Pablo Lara H
Pablo Lara H
:focus-visible Is Here by @m_ott #a11y #accessibility #browsers #css #focus #ui #usability matthiasott.com/notes/focus-vi…
Photo of webdesignrepo
webdesignrepo
:focus-visible is here matthiasott.com/notes/focus-vi… @m_ott #Accessibility #CSS
Photo of Aurelie Touchard ????; ????; ????;
Aurelie Touchard ????; ????; ????;
Ca va réconcilier ceux qui ne veulent pas afficher le contour au focus sur un élément, et ceux qui tiennent à leur affichage ! 👍; #css #focus #accessibilite #accessibiliteWeb #webAccessibility matthiasott.com/notes/focus-vi…
Photo of Tammy Jensen
Tammy Jensen
:focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
Photo of Brian Birtles
Brian Birtles
I wrote a tailwind plugin to support this in a backwards compatible manner: https://t.co/VB7Xeee5WB
Photo of Bryan Matthews
Bryan Matthews
:focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
Photo of Daiane Assen
Daiane Assen
:focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
Photo of Steve Lee
Steve Lee
:focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
Photo of Mattia Michini
Mattia Michini
:focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
Photo of Amy Dutton
Amy Dutton
@adamwathan Have you seen this? I know you've been talking about focus states for @tailwindcss. matthiasott.com/notes/focus-vi…
Photo of Chris Heilmann
Chris Heilmann
👉;🏻; “:focus-visible Is Here” 🔗; matthiasott.com/notes/focus-vi… @m_ott on a CSS feature that may bring peace to the "keep it keyboard accessible" and "but I don't want ugly big blue outlines" debate.
Photo of míchє;l mαíllαrd
míchє;l mαíllαrd
:focus-visible Is Here · Matthias Ott – User Experience Designer matthiasott.com/notes/focus-vi…
Photo of thomas villain
thomas villain
:focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
Photo of Kyle Poole
Kyle Poole
:focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi… SO excited about this!
Photo of ua5aw98z
ua5aw98z
参;考;ま;で;。;🐶; matthiasott.com/notes/focus-vi…
Photo of Guillaume Barbier
Guillaume Barbier
Une fonctionnalité intéressante pour ces situations où nous arrive pas à concilier le designer/le client et les exigences de l'accessibilité (un Joker en qq sorte) :focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
Photo of Blake Niemyjski
Blake Niemyjski
:focus-visible Is Here matthiasott.com/notes/focus-vi… #web #accessibility #CSS
Photo of Peter Demaria
Peter Demaria
:focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
Photo of Front-end Bookmarks
Front-end Bookmarks
📣; New article by @m_ott matthiasott.com/notes/focus-vi… frontendbookmarks.com/css/selectors/…
Photo of Friday Front-End
Friday Front-End
:focus-visible Is Here, by @m_ott matthiasott.com/notes/focus-vi…
Photo of Quentin Bellanger
Quentin Bellanger
We can now show focus styles only on keyboard focus. #a11y matthiasott.com/notes/focus-vi…
Photo of Access42
Access42
Cet article concis de @m_ott résume ce qu’il faut savoir sur :focus-visible : matthiasott.com/notes/focus-vi… L’outline ne sera visible qu’à la tabulation et n’apparaîtra pas au clic. Les navigateurs ne supportant pas :focus-visible afficheront l’outline comme d’hab’. #a11y #UX #CSS
Photo of Gary Stevens
Gary Stevens
frontendfront: :focus-visible Is Here matthiasott.com/notes/focus-vi…
Photo of Jacky
Jacky
:focus-visible Is Here · Matthias Ott – User Experience Designer matthiasott.com/notes/focus-vi…

Likes

Reposts