Select Page

Category: focus

Keyboard-Only Focus Styles

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 navigate the web. But those focus styles are most useful when tabbing or otherwise navigating with a keyboard, and less so when they are triggered by a mouse click. Now we’ve got :focus-visible! Nelo writes: TLDR; :focus-visible is the keyboard-only version of :focus. Also, the W3C proposal mentions that :focus-visible should be preferred over :focus except on elements that expect a keyboard input (e.g. text field, contenteditable). (Also see his article for a good demo on why mouse clicking and focus styles can be at odds, beyond a general dislike of fuzzy blue outlines.) Browser support for :focus-visible is pretty rough: This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up. Desktop Chrome Opera Firefox IE Edge Safari No No 4* No No No Mobile / Tablet iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox...

Read More

`:focus-visible` and backwards compatibility

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 is on the button, it can be confusing for a mouse user to find the look of the button change after they clicked it – making them wonder why the styles “stuck”, or if the state/functionality of the button has somehow changed. If we use :focus-within instead of :focus, that gives the browser the freedom to not apply focus styles when it determines it’s unnecessary, but still does when, for example, the element is tabbed to. The scary part is “instead of”. We can just up and switch with browser support as it is. Not even @supports can help us. But Patrick has some ideas. button:focus { /* some exciting button focus styles */ } button:focus:not(:focus-visible) { /* undo all the above focused button styles if the button has focus but the browser wouldn't normally show default focus styles */ } button:focus-visible { /* some even *more* exciting button focus...

Read More

Focusing on Focus Styles

Not everyone uses a mouse to browse the internet. If you’re reading this post on a smartphone, this is obvious! What’s also worth pointing out is that there are other forms of input that people use to get things done. With these forms of input comes the need for focus styles. People People are complicated. We don’t necessarily perform the same behaviors consistently, nor do we always make decisions that make sense from an outsider’s perspective. Sometimes we even do something just to… do something. We get bored easily: tinkering, poking, and prodding things to customize them to better suit our needs, regardless of their original intent. People are also mortal. We can get sick and injured. Sometimes both at once. Sometimes it’s for a little while, sometimes it’s permanent. Regardless, it means that sometimes we’re unable to do things we want or need to do in the way we’re used to. People also live in the world. Sometimes we’re put into an environment where external factors conspire to prevent us from doing something the way that we’re accustomed to doing it. Ever been stuck at your parents’ house during the holidays and had to use their ancient-yet-still-serviceable desktop computer? It’s like that. Input Both mouse and touch input provide an indicator for interaction. For touch, it is obvious: Your finger acts as the bridge that connects your mind...

Read More

Keeping Parent Visible While Child in :focus

Say we have a . We only want this div to be visible when it’s hovered, so: div:hover { opacity: 1; } We need focus styles as well, for accessibility, so: div:hover, div:focus { opacity: 1; } But div’s can’t be focused on their own, so we’ll need: There is content in this div. Not just text, but links as well. This little piggy went to market. Go to market This is where it gets tricky. As soon as focus moves from the div to the anchor link inside it, the div is no longer in focus, which leads...

Read More