:focus-visible Archives

Articles Tagged :focus-visible

It takes as much energy to wish as it does to plan. — Eleanor Roosevelt

Like Eric Bailey says, if it's interactive, it needs a focus style. Perhaps your best bet? Don't remove the dang outlines that focusable elements have by default. If you're going to rock a button { outline: 0; }, for example, then you'd better do a button:focus { /* something else very obvious visually */ }. I handled a ticket just today where a missing focus style was harming a user who relies on visual focus styles to … Read article

`:focus-visible` and backwards compatibility

Shared by
Chris Coyier

Patrick H. Lauke covers the future CSS pseudo class :focus-visible. We're in the early days of browser support, but it aims to solve an awkward situation:

... focus styles can often be undesirable when they are applied as a result of a mouse/pointer interaction. A classic example of this are buttons which trigger a particular action on a page, such as advancing a carousel. While it is important that a keyboard user is able to see when their focus

… Read article

Our Notes / Read at developer.paciellogroup.com

:focus-visible focus

Keyboard-Only Focus Styles

`:focus-visible` and backwards compatibility