Sometimes less is more: providing useless info does not help anyone.
disclaimer: Most of this I learned from my co-worker who is visually impaired and uses a screen reader (SR). I wanted to blog about this since I feel that when people understand the reasons, they remember the solutions.
Web developers should know that the img tag requires an alt attribute to be set. What happens when you don't and use a SR? It reads the scr attribute. Yuck.
Okay, so that means we should always fill out the alt attribute? No. Sometimes it's good if you put alt="". Like for a spacer image, it's not going to help someone using a SR and it saying "Option One...spacer image... Option 2... spacer image...". Putting alt text on those images provides no useful info to the user.
That's not all. You have to make sure that the alt text makes sense in the context that you are displaying it as well. For example: I've got a table that lists widgets and I put an image beside the "widget name" that will bring the user to an edit screen. If I put the alt text as "edit a widget", that doesn't really help out the user too much. Someone not using a SR can make the cognitive leap that the image and text visually beside each other are associated. For someone using a SR they would have much more trouble. Alt text like "edit [widget name] widget" would be more useful.
Just another thing to keep in mind when building accessible web applications. ;-)
I always found it weird that the alt attribute is required. I think that no alt attribute should mean the same as alt="", although I guess if you're actually testing your page for compliance, then it's a good way of checking that you at least thought about putting an alt attribute on the image.
ReplyDeleteAnd Since you mention spacer images, let me point out how much I hate space images. You should meet my two friends. Margin and Padding. Margin is used to make space around HTML elements, while Padding is used to make spacing within the boundaries of your HTML element. They work in just about every browser I've seen, even IE, which is pretty amazing considering their crappy CSS support. And it makes a lot more sense then putting tiny stretched out single pixel transparent gifs all over you web pages.
http://www.w3schools.com/css/css_margin.asp
http://www.w3schools.com/css/css_padding.asp
Okay, "spacer" might not have been the best example. But there are lots of examples of images that just add to the look, but don't convey an information.
ReplyDeleteI will leave that as an exercise for the reader. ;-)