Accessibility Tip: Ensure you have clear focus and hover states

Last updated on January 01, 2022A11y issues

Ensure that you have clear focus and hover states, so people know when they are hovering over an element or have it focused.

Table of contents

What is focus and hover state?

  • Focus state is how an element (such as a link or button) looks when it is focused - so if you press tab until you land on that element, that element is in the focused state. For example a button might have a different background colour when focused. This applies to links, buttons, form elements (inputs, dropdowns) so users know what they are interacting with.
  • Hover state is similar, but is when it is hovered (your mouse cursor is over it). For example links might turn to a different shade of blue, or have an underline.

Why is having focus and hover states important for accessibility

If you have a site with no focus and no hover states, it is very hard to use as you do not know what you are interacting with.

Anyone who has ever used a keyboard to access a site has probably come across a site where you do not know what item is the current active element, so you don’t know what you are interacting with if you hit enter.

Tips

  • the defaults in browsers will show a focus and hover state. You can disable this such as outline: none. But you should avoid doing this!
  • Hover and focus states should be added to everything that you interact with.

How to add focus/hover states in css

The css below shows how to add focus/hover states in CSS for a link:

a {
   color: blue; 
   text-decoration: none; 
}

a:hover {
   color; navy; 
   text-decoration: underline;
}
 
a:focus {
   color: green; 
   border: 1px solid green; 
}

Found this post useful?

Please consider sharing this link with your work colleagues or on social media. There are no ads on my site, I just want to promote accessibility.

Found an issue? please point them out - let me know if there is a mistake and I'll update it

Follow me on Twitter: @A11yForDevs. I post links to interesting a11y articles and resources.

More posts

Welcome to Accessibility for Developers

New to accessibility?

Accessibility for Developers

This is a free site to give advice on how to make your website accessible

I have been a software developer for nearly a couple of decades, and really want to help promote better accessibility in apps and websites that we, as developers, create! Accessibility isn't very difficult, it is just important to be aware about it and understand it.

If you spot any mistakes or have any suggestions, ideas or collaborations please check out my contact page.

Important: The information on this website is for general informational purposes only. I make no representation or warranty, express or implied. Your use of the site is solely at your own risk. I've tried my best to make sure all information is accurate, but I am just a software engineer (not an accessibility expert).