Accessible hover image links

Hover images, that is images that change when the pointer moves over them, have always been an integral part of web development. They alert the user to the fact that the image is "active". Usually this indicates it can be clicked.

Implementing a hover image is relatively straightforward. But doing so in an accessible manner which does not require the use of Javascript is more tricky. Here's a technique I've recently used, which I like for it's relative simplicity as well as being mostly accessible.

HTML:

<a class="facebook" href="http://facebook.com/" title="Facebook">
 <img alt="Facebook" src="Facebook_Icon.png">
</a>

CSS:

.social-links a.facebook {
  background:url(Facebook_Icon_On.png) no-repeat;
}

.social-links a.facebook:hover img {

display:none;

border: 1px solid #000;

}

This technique is rather straightforward. There's an image, with meaningful alt text for accessibility, wrapped in a anchor tag. The anchor tag itself has a background image with appropriate height and width all set using CSS. The key is the :hover pseudo-class that hides the image using "display:none;". When the image is hidden, you see the background image of the anchor tag. The anchor tag itself is still clickable due to it's fixed height and width.

Having tested this technique in all modern mainstream browsers (ie latest versions of IE, Opera, Firefox, Chrome and Safari) it copes with the following situations better than many more complex techniques.

  • CSS on, Images on: Works as you would expect
  • CSS off, Images on: Page lays out in basic fashion. Image hover doesn't work, but links do.
  • CSS on, Images off: Images replaced by Alt text. Hover creats  a border to create active feel.
  • CSS off, Images off: This would be more or less how a screen reader might see the page. The Image is replaced by it's alt text and the link thus remains meaningful.

Simple, but effective.

Tagged: