Archive for the ‘focus’ Category

Keeping Parent Visible While Child in :focus

Posted on: No Comments
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:hover, div:focus { opacity: 1; } But div's can't be focused on their own, ...

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

Posted on: No Comments
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...

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