Whenever you :hover you must always :focus.

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.

--

--

--

Web Developer and Instructor | www.dannypaton.com | @dannypaton_

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Danny Paton

Danny Paton

Web Developer and Instructor | www.dannypaton.com | @dannypaton_

More from Medium

What happens when you write google.com

Why does a cat need a good scratch post

What I Ate in a Day (Realistic Vegan!) / Wholesome & Relaxing Day!

How to Fix Warzone Memory Error 0–1766 on PC & Xbox? [8 Ways]