Have you considered people using magnification programs when building your hover images or navigation? Here’s a quick look into a common problem with magnifiers and a simple fix to keep your users smiling.

This post came about after a dilemma involving my site design. I’m going to be adding icons on the sidebar which when hovered over change colour and have text appear next to them for example,”feed me”,  ‘tweet me’, ’shout me’.

Now for screen readers I don’t see this being a problem as can give the text a large minus left-margin: left-margin: -10000px; which pops into the required place when the icon is hovered over. This mean the text is still is readable in the html unlike using display: none which hides the text from screen readers. So I’m sorted for accessibility right? Well not necessarily.
When reading accessibility articles I feel the limitations of magnification programs are often overlooked. When someone is using a magnifier hover images like the ones I’m implementing can be a pain in the arse.

To demonstrate the image on the left shows an example screen area of someone who is partially sited navigating the website using a magnification program. They can see the icon but only partially see the description. In the next image the user has moved the mouse to view the description which cause the text to disappear.

Luckily by happy accident the Eric Meyer’s CSS method to create  hover buttons provides a solution to this problem. For the pop up to work the text has to be enclosed in the same <a href> tag as the object you are hovering over.  This means the text becomes a link as well and will stay displayed when the mouse is moved over it:

So if you’re looking to use hover images, drop downs or tool tips have a thought about people using magnication programs and how you your navigation will work for them to.