Category: focus

`: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 tri...

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...

Removing that ugly :focus ring (and keeping it too)

David Gilbertson: Removing the focus outline is like removing the wheelchair ramp from a school because it doesn’t fit in with the aesthetic. So David shows how you can remove it unless you detect that the user is tabbing, then show it. Essentially you add “user-is-tabbing” class to the body when you...

Focus Styles on Non-Interactive Elements?

Last month, Heather Migliorisi looked at the accessibility of Smooth Scrolling. In order to do smooth scrolling, you: Check if the clicked link is #jump link Stop the browser default behavior of jumping immediately to that element on the page Animate the scrolling to the element the #jump link pointed to Stopping the...