Are you supplying unnecessary alt text?

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?

a smiling lady

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?

Tell us your opinion in the comments.


Watch quick video tour of Sitebeam

Test your website with

or see prices & plans
  • Craig Connell

    It seems to me that the majority of ALT tag use these days is for SEO purposes.

    Blind users are probably not much of a thought to many designers, however you do raise the thought that maybe they should be, partly optimising for screen readers could really cut a lot of unnecessary crap out of websites.

    • silktide

      Honestly, try using any website with a screen reader (like I did last week), just close your eyes and try to navigate a site like Amazon. My brain almost melted with all the unnecessary links before you even got to the main content.

  • maciek

    I think that decorational elements that you metioned should be placed in CSS (which means no alt-tag is needed at all), while all the images that are not decorational, but rather relevant to the content and important for the user should be placed in HTML along with descriptive alt-tags.

    • silktide

      Absolutely agree. Unfortunately there’s times when the CMS you’re using might not make this possible however. But yeah, any presentation should be done using CSS and background images.

  • http://www.facebook.com/henson.garth Garth Henson

    One additional comment about the empty versus omitted alt tags is that, if your image is linked (wrapped in an anchor tag), screen readers (including JAWS) will read the href of your anchor tag as the content of the image. Hopefully, you’re not linking any images that aren’t contextually relevant, but this behavior is well worth the note.

  • ale5000

    Is it good to improve site for screen readers to add “speech” stylesheet and hide header and footer with “display: none”?

    • silktide

      There’s such low support for aural stylesheets that they’re almost useless unfortunately (according to this article http://lab.dotjay.co.uk/notes/css/aural-speech/).
      Don’t forget that most screenreaders do parse normal CSS files, and anything with display:none will *not* be read aloud by a screenreader.

  • Tim Baker

    Got to say, morally this (the ALT text) has to be kept in place, without a doubt. I have a close friend who is blind and I have met several people who are blind or partially sighted and they very much dislike that people feel they must treat them differently. Their argument is, the grand canyon is very visual, does that mean they have no right to see or experience it? No. Just because they’re blind should their house never be decorated – should the walls be allowed to go a off yellow color? No.

    In fact they recently summed it up very nicely. Mid conversation, someone said to my friend “did you watch that video” – then they (the same person) instantly changed that to “ermm I mean *listen* too”. While they didn’t express too much dismay at the time, later I did learn that this really had annoyed the chap in question – which was about the first time I’ve known him to get like that.

    Reason: they still see, its just they’re perception is so totally different to our than ours its hard to comprehend. He explained, the tone of the sounds, the background noises, gaps of silence all make a “visualization” for him. Now you tell me the last time you watched a YouTube video and really listened to everything, if your anything like me you don’t. Just to give you an idea of how sensitive his hearing is, he can tell what radio station I’m listening to, before he opens the car door – all due the pitch of the songs… Who knew?

    (try it, close your eyes and take a leap of faith, whats happening in this video http://www.youtube.com/watch?v=gxJ4M7tyLRE )

    It comes down to this, yes whilst I see your point, I’m afraid I disagree, blind people are entitle to see all the furniture and paintings just as much as everyone else.

    The Amazon clutter factor is a different issue entirely – that is bad user experience, not decoration.

    • http://www.ongoingworlds.com/ David Ball

      Great comment Tim! That’s exactly the kind of thing I wanted to debate, I feel that we shouldn’t treat blind users any differently, but at the same time I feel that their experience of using the web is very difficult, so want to make the experience better for them. Unfortunately “better” means a different experience though.

      What I’d like people to take away from this article isn’t that we should stop adding ALT text, it’s the think about what’s relevant for blind people and what isn’t. Having used a screen reader recently, I’ve noticed much unnecessary information being read aloud that gets in the way of a good user experience.

  • kuikistudio.com

    Alt text had to be placed at its right place and nothing else.. there is no ambiguity in this point!!!

  • flor nike

    Well I guess you made some points and I just knew it here, I was puzzled with your question about the right alt tag for the image above.
    http://fearlessflyer.com/2013/05/check-out-these-5-websites-that-make-logos-for-free/

  • Dana Tallon

    One small comment, I work for state agency who helps people with disabilities find jobs. We have hired many people with disabilities. In our staff, we polled the visually impaired on alt text – purely presentational – do we alt text or not. Our staff said alt text everything. Our blind do not care about the presentational graphics but our users who have some sight and use both a monitor and a screen reader – can tell there’s something there and when JAWS won’t recognize it or describe it, they don’t like it.
    Not all screen readers users are 100% blind. I do, however, on the purely presentational stuff keep the alt text minimal – “boy smiles for camera” that’s it. But at least the visually impaired who see a blob will know its decoration. It’s never clear cut, and this is only food for thought.

    • silktide

      Thanks Dana for commenting, a very useful insight!