Over a million developers have joined DZone.

Focus on :Focus - The Keyboard's Hover

DZone 's Guide to

Focus on :Focus - The Keyboard's Hover

· Web Dev Zone ·
Free Resource

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.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}