Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Focus on :Focus - The Keyboard's Hover

DZone's Guide to

Focus on :Focus - The Keyboard's Hover

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

I care about accessibility, I truly do. But whenever I'm stuck in css limbo or pondering some html fluffiness I tend to neglect it, if only just a little. Building a website is a minefield and there's only so much time, sadly accessibility is often the first to go. How to solve this? Just try to build accessibility right into your work flow, forcing you to apply some commonly forgotten accessibility rules without having to explicitly think about them all the time. One such example? :focus styles.

:focus is the keyboard user's :hover, but keyboard users are easily forgotten in the development/test process. I'm a mouse man myself, as are most people who surf the web. But there's still a sizable user base who prefer keyboard navigation (occasionally, maybe often, some always) and they shouldn't be left in the cold. It becomes a serious problem when you realize that default browser :focus styling can cause some harm to your visual design. There are workarounds of course, but none are without danger. In most cases, people just remove the default :focus styles and forget to apply a new style. Not good.

Since :focus doesn't really differ from :hover from a conceptual point of view, we can safely bind both styles together. This is accepted behavior, but writing it out in full each time can be quite bothersome, to the point where it once again gets neglected. I at least never really managed to anchor it into my work flow. That's where less/sass could help us out though (featured code is less).

 /* :focus reset*/ 
*:focus {outline:none;} 
/* less function */ 
.hover(@css) {&:hover, &:focus {@css}} 
/* use in css */ 
.selector {[rules]} 
.selector {.hover(~"[rules]");} 

Instead of writing the :hover code directly, we just copy the original selector and use a nested less function to apply the same :focus and hover styles. You can of course apply the less function directly into the original selector, but personally I find it easier to keep track of hover and focus styles when adhering to the above layout. So as long as you don't forget to set your hover states, keyboard users will have the same styles applied as mouse users. Sweet.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Niels Matthijs, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}