focus Archives - CSS-Tricks

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

# August 9, 2017 By Chris Coyier

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

a11y focus

Focus Styles on Non-Interactive Elements?

# May 2, 2017 By Chris Coyier

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

a11y focus