Whenever you :hover you must always :focus.

When it comes to viewing a webpage, a mouse should not be a requirement.

The internet is quickly becoming accessible to everyone. Through many great new tools and updates, our future is strong for allowing us all to experience the web in an equal way.

Go ahead and check out VoiceOver (mac = command + F5) and play around with it on a webpage. You’ll see how truly amazing this is and the possibilities it has.

After further research on accessibility on the web I discovered a little command you can add to a :hover style that I feel should be added to all of your future :hover rules.

.nav {
    color: #000;
}

.nav:hover {
    opacity: 0.5;
}

In the css above, if we attempt to access these buttons with a keyboard it does not show this effect at all.

By adding :focus in the css after :hover it creates a new rule for us. Adding a :focus rule is a small change with a potentially huge impact. It is used to declare styles on focused elements - the items on the page that keyboards can highlight while pressing the tab key continuously.

.nav:hover, .nav:focus {
    opacity: 0.5;
}

There you go! Now we have the same effect using a keyboard rather then a mouse in the small change above.

We can go even further and make it more visible for people who can’t see colour change very well by adding an underline in the text-decoration.

.nav:hover, .nav:focus {
    opacity: 0.5;
}

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

Try it now with these changes, you’ll see the :focus much easier. Also the underline effect only occurs when tab is pressed.

Always keep keyboard accessibility in mind when writing rules for interactions, and try not to leave any of your users in the dark.