jordan scales home projects twitter github
April 03, 2015

Focus vs. Hover

Visual interactions should never require a mouse.

Consider the ever-popular :hover selector, which is used to declare styles on elements under a mouse cursor.

.nav-link {
    color: #ffffff;
}

.nav-link:hover {
    opacity: 0.8;
}

The following example shows a mouse cursor hovering over various items in a navigation bar which highlight as the mouse passes over them.

If we attempt to access these buttons with a keyboard, however, we're met with an unfortunate short-coming.

Nothing happens.

The following example is just a navigation bar with three links and no animation, because we did not declare our styles correctly.

Instead, we need to use the :focus selector, which is used to declare styles on focused elements - the items on the page that keyboards can highlight with subsequent presses of the tab key.

All we need to do is add the :focus selector, so that it is applied in addition to the hover styles.

.nav-link:hover, .nav-link:focus {
    opacity: 0.8;
}

Ta-da, now we get the same effect even when we're using a keyboard instead of a mouse! This helps users keep track of their location in their page, and also presents the same information that a mouse-wielding user would receive.

The example below shows three links on a nav bar highlighting in sequence as a theoretical keyboard tabs to each of them.

We can do still do better, though. Many of your visitors will be unable to detect subtle color changes (and, in some cases, very obvious ones!), so we'll add an underline to the link.

It's okay if you don't want this on hover - since a mouse cursor is a good visual indicator in and of itself - but it's pretty essential to do this on focus for visitors using the keyboard.

.nav-link:hover, .nav-link:focus {
    opacity: 0.8;
}

.nav-link:focus {
    text-decoration: underline;
}

The following example is the same as the previous example, but the links also have an underline when focused.

Side note: While browsers like Chrome will declare a focus-ring-color outline for focused elements by default (a glowing blue outline), it's far too easy to accidentally remove these - and sadly many do!

Adding a :focus rule is a trivial change with a potentially great impact, so there's no real reason not make use of it. Always keep keyboard accessibility in mind when writing style rules for interactions, and try not to leave any of your users in the dark.