I bet you’re bored to death of hearing about the alt tag, and how important and magical it is. I bet you think you know everything there is to know about it right? Good!
So when I put this picture on Facebook last week and asked our followers to answer a simple question about the appropriate alt text, why did so many get the answer wrong?
Here’s a little quiz for you guys. This image is on a website for purely presentational reasons. Which of these is the most appropriate alt text?
alt=”Image of a smiling lady”
alt=”a smiling lady”
alt=””
No alt
The comments were completely polarised, but many guessed it was one of the first 2 answers, which is wrong. One SEO cowboy did say he’d just fill it full of keywords, but I hope he was joking.
So what’s the real answer? The clue was that I said the picture was for “purely presentational reasons”, which means it has no relation to the content whatsoever. So the actual answer it that it should be alt=””, a completely empty alt tag.
To understand the reason why, put yourselves in the shoes of a blind user who has a screen reader to hear the webpage aloud. All page content is read out in the order it appears in the page (imagine you’ve turned the CSS off an are viewing the page as a list of paragraphs and headings). So when they hear an image with an alt tag, the screenreader reads aloud the word “graphic” followed by the alt. This is why the alt has to be as descriptive as possible. On a shopping site, it’s important that the image describes the product you’re about the purchase.
But some images are presentational, like decorations, rounded corners and *shudder* spacer GIFs. I’d actually argue these should be divs with a background image, but there might be a case to use an actual image for a decoration. As this is a decoration, it’s only for sighted people. Blind people don’t need to know about this. So you don’t need to provide an alt at all. This means screen readers will completely ignore the image and not even mention it.
So can we just omit the alt tag altogether?
Many of the real accessibility zealots I’ve read say there’s an important reason why we should still add it the alt tag, but keep it blank. The main reason given for this is that without the empty alt, a screen reader will read aloud the word “graphic” or “blank”, leaving the blind user confused about whether the image was important or not. To save confusion, just add the empty alt tag.
Actually though I did my own testing with JAWS, the most popular screen reader, and NVDA, the most popular free screen reader. What I found is that it doesn’t actually matter if you leave the alt text blank or omit it altogether, the result is the same, it’ll just ignore the image.
Just to demonstrate, here’s a video of how JAWS and NVDA read an image with and without alt text specified.
You can also see why we don’t need to use the words “An image of…” in our alt text, the screen reader already announces it’s a graphic!
If you’ve never used a screen reader, I highly recommend downloading one and give it a try, if only to demonstrate how difficult it is to be a blind user navigating the web. You can download NVDA for free, which is the 2nd most popular screen reader and use a browser (they recommend Firefox or IE), navigating it with your cursor keys. There’s a good guide showing all the hotkeys here.
A moral issue
After having spent a lot of time using screen readers myself recently (more about that in my next article) I’ve noticed that so many pointless links are read out, and often in a pretty daft order. When creating a mobile website we’re often encouraged to think about what are the most important parts of the website, and either hide everything else or at least put the main content first. It doesn’t seem like many websites do this thinking about screen readers, and blind users have to listen through many links before getting to the main content. When I tried testing Amazon.co.uk it reads all graphic links in the affiliate toolbar before even getting to useful products I might want to buy.
So now we know how to streamline a blind user’s experience by not subjecting them to the pointless images we have to look at (here’s some examples of wildly overused stock imagery), hopefully cutting out some of the time needed for them to navigate the page. But a moral issue remains, should we be hiding this from them?
When I put this question up on our Facebook page, many people were adamant the image should have an alt text, even though the image was for presentation reasons only. In an attempt to optimise the experience for blind people I’m also taking something away from them. Is this something we should be doing?