focus

Keeping Parent Visible While Child in :focus

Say we have a <div></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:hover,
div:focus { 
  opacity: 1; 
}

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

<div tabindex="0">
</div>

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>
</div>

This is where it gets tricky.

(more…)

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

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. So Heather added a #4: move focus to the element the #jump link pointed to.

But moving focus through JavaScript isn't possible on every element. Sometimes you need to force that element to be focusable, which she did through setting tabindex="-1".

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag