Quite surprised to see no mention of the :focus-visible pseudo class considering it's been around for so long!
For anyone not familiar: it allows for focus indicators to only appear on keyboard navigation (like on tab) and not on elements that gained focus through a mouse interaction. Best of both worlds.
It's not really the best of both worlds. Even MDN warns of the confusing rules that focus-visible follows. It's not quite as simple as keyboard yes, mouse no. Chrome and Firefox have different rules, take input type select for example. User agent heuristics are not currently supported by any browser - which is what focus-visible was supposed to deliver.
I would recommend not using focus-visible currently. Nothing is clearer than always showing focus styles. Good UX is about usability, not prettiness (although I would argue a focus ring styled well adds aesthetics).
Many accessibility patterns - toolbars, grids, menu lists (to name a few) require arrow key focus, not tab, which can only be accomplished programmatically.
Chrome adds the focus-visible styling on any key press, not just tab. Firefox uses unstable timing functions to determine programmatic focus-visible styles.
focus-visible therefore results in an almost disco like light show of the ring flashing into view then disappearing, which is why MDN cautions against using it due to confusing behaviour - the antithesis of good UX.
A focus indicator doesn't have to be an outline. Good UX is about giving the user all the available information in their preferred way.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Quite surprised to see no mention of the
:focus-visiblepseudo class considering it's been around for so long!For anyone not familiar: it allows for focus indicators to only appear on keyboard navigation (like on tab) and not on elements that gained focus through a mouse interaction. Best of both worlds.
MDN: developer.mozilla.org/en-US/docs/W...
CSS-Tricks: css-tricks.com/keyboard-only-focus...
Official polyfill (yup, IE11 support for you enterprise devs!): github.com/WICG/focus-visible
It's not really the best of both worlds. Even MDN warns of the confusing rules that
focus-visiblefollows. It's not quite as simple as keyboard yes, mouse no. Chrome and Firefox have different rules, take input type select for example. User agent heuristics are not currently supported by any browser - which is what focus-visible was supposed to deliver.I would recommend not using focus-visible currently. Nothing is clearer than always showing focus styles. Good UX is about usability, not prettiness (although I would argue a focus ring styled well adds aesthetics).
Oversight on my part. Thanks for adding this.
Thank you, I'd also argue that outline is noisy UX unless it's tabbed to (edit: because everything is a button, increasingly)
Many accessibility patterns - toolbars, grids, menu lists (to name a few) require arrow key focus, not tab, which can only be accomplished programmatically.
Chrome adds the focus-visible styling on any key press, not just tab. Firefox uses unstable timing functions to determine programmatic focus-visible styles.
focus-visible therefore results in an almost disco like light show of the ring flashing into view then disappearing, which is why MDN cautions against using it due to confusing behaviour - the antithesis of good UX.
A focus indicator doesn't have to be an outline. Good UX is about giving the user all the available information in their preferred way.