Image replacement and screenreaders

Ok kids, if you use image replacement to create super-cool rollover buttons, raise your hands. Good. Now, keep your hands raised if you put title attributes on the links to give added information. Great! What is the text inside the link? Keep your hands raised if you repeated your title attribute in the link text.

Congratulations, you’ve probably done some usability testing with an actual screen reader.

For those who put your hands down; here’s the deal-eeo. Screenreaders ignore title attributes by default. Sucks… I know. I’ve been adding really juicy title attributes for usability and they’re being ignored!

Go ahead and duplicate your text

I was doing some user-testing today with Victor Tsaran, the Accessibility Project Manager at Yahoo! He came across a button with link text that was the same as the image. He said, “what’s this going to do?” It was a simple thing like “more info”… But the title attribute said “Visit Joe’s Web Site for more information.” That, he suggested, should have been the link text.

The link text is hidden from the visual users and the title attribute is hidden from the screen readers; so duplicating the information isn’t a bad thing. If you find yourself putting good information in a title attribute for a link that is using image replacement, duplicate the content in the link. It’s that simple. Now, put your hands down, it’s starting to smell musky around here.

Get rid of the dotted lines on links with image replacement

Update 2-26-2014

This is obviously an outdated article. Please do not follow the older advice on using outline:none and hiding focus. We need to provide some visual cue that a user has placed their focus on a link or button via the keyboard. The key is not to hide focus, rather to avoid generating the marching ants that went off screen with older methods of image replacement. The key is hide the text while not pushing it off-screen. Thierry Koblentz’s article Clip your hidden content for better accessibility is the gold standard on using hidden text while avoiding the off-screen outlines and making your site global-ready.

If you do decide to use outline:none, you must make sure that you re-define the focus style. This is normally done by duplicating the :hover style

:hover, :focus, :active {
    text-decoration:underline;
}

Original post

I don’t remember where I first found this tip (Hedger Wang?), but it’s a good one. If you are using image replacement, i.e. background images and negative text-indent, you may notice a dotted line appear when the link is clicked and waiting for the page to change (:focus). It’s outlining the text that happens to be wayyyyy off screen. It’s easy as pie to fix this issue.

CSS Fix

This will fix the problem in Firefox. Just drop this into your global.css file.

a:focus {
    -moz-outline-style: none;
}/*this avoids having image replacement sections display a dotted outline*/

JavaScript Fix

This will fix the issue in the other browsers.

var theahrefs = document.getElementsByTagName('a');
//fix dotted line thing when link is OnClicked
for(var x=0;x!=theahrefs.length;x++){
    theahrefs[x].onfocus = function stopLinkFocus(){this.hideFocus=true;};
}