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.
Tags: Accesibility, CSS, Web Design
You’ll probably want to add a :focus state to the links, so that keyboard-only access works too. Currently tabbing to the link does nothing to change the visible state, so the text doesn’t appear.
Hi Mark!
Thanks so much for the tip. Currently after the hover buttons are clicked on a dotted border appears extending across the page. I looked to remove the border when I should have been looking to make the text appear when the :focus state was reached.
I checked my text links after reading Roger Johansson’s tip http://tinyurl.com/qj85wm on not using border: none on the :focus for keyboard navigation. It just didn’t twig while making the links!
Thanks again,
Steve