Archive | focus

RSS feed for this section

`: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 …

The post `:focus-visible` and backwards compatibility appeared first on CSS-Tricks.

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

The post Focusing on Focus Styles appeared first on CSS-Tricks.

Keeping Parent Visible While Child in :focus

Say we have a <div>.

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:focus {
opacity: 1;

But div’s can’t be focused on their own, so we’ll need:

<div tabindex="0">

There is content in this div. Not just text, but links as well.

<div tabindex="0">
<p>This little piggy went to market.</p>
<a href="#market">Go to market</a>

This is …

Keeping Parent Visible While Child in :focus is a post from CSS-Tricks

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 detect the tabbing, and use that class to remove the focus styles if it’s not there (plus handle the edge cases).

Direct Link to ArticlePermalink

Removing that ugly :focus ring (and keeping it too) is a post from CSS-Tricks

Focus Styles on Non-Interactive Elements?

Last month, Heather Migliorisi looked at the accessibility of Smooth Scrolling. In order to do smooth scrolling, you:

  1. Check if the clicked link is #jump link
  2. Stop the browser default behavior of jumping immediately to that element on the page
  3. Animate the scrolling to the element the #jump link pointed to

Stopping the browser default behavior is the part that is problematic for accessibility. No longer does the #jump link move focus to element the #jump link pointed to. …

Focus Styles on Non-Interactive Elements? is a post from CSS-Tricks