Although this looks quite reasonable it was causing problems for screen readers as they list out all images which means the user will get a list of images all saying "More information" (so a bit like having a list of links all saying "Read more..."). This is a problem with using images as text (an icon is really short hand text) if you look at them out of context they don't make sense.
Using image replacement as a way of hiding images from screen readers works quite well, as they are background images and not img tags. If we look at the same link using image replacement...
I tend to use nested spans for image replacment, you may prefer to use a single span with a combination of overflow hidden and a text-indent value, depends what browser support your after. If you don't need backwards compatibility you could just use the CSS "content" property instead.
Something like that, I would just have as a style on the link itself, giving it a background image - to me, that looks like decoration!
ReplyDeleteor does the icon have a different function from the rest of the link?
Updated the cropped images of HTML so you can see better what's going on here. This would be used where the icon is telling the user something useful and is necessary on the link to distinguish it from other similar links. (in the above example we have multiple links e.g. [page name] more information, [page name] referral etc... which are differentiated with icons so the icon is very important )
ReplyDelete