Grow your CSS skills. Land your dream job.

Poll Wrapup: How Much Effort Do People Put Into Alt Text?

Published by Chris Coyier

From over 16,000 people surveyed, more than half (54%) say they "do some" when it comes to alt text for images that are important to content. The example provided did provide insight into the content and relevance of the image.

Thankfully the least number of people (10%) said they "do nothing." This is unfortunate as it is a a real accessibility problem.

22% said they "do a little." The example provided gave no insight into the content and relevance of the image, making it just as bad (possibly worse, as it costs time) than doing nothing. But I suppose at least they are aware they should be providing alt text.

14% of people said they "go all out." In the example (an image of a graph), the exact numbers shown in the graph were spelled out and the most striking fact about the graph explained. That is often the point of a graph: to emphasize a particular juxtaposition. As long as "go all out." doesn't turn into "go too far" (use your own good judgement), this is the ideal way to go.

The graph this time with an embedded Pen using amCharts:

See the graph on CodePen

For more information, the A11Y Project says:

The alt attribute is meant to help users not miss any content, so make sure your text is helpful to anyone not seeing the image. These could be assistive technology users or users of a mobile with images turned off (to save data, for instance).

And has many good tips.

Full, real time results for this poll and all past polls are in the polls archive.

Comments

  1. I voted the all out. My moms blind and uses a screen reader. Pictures with no or little alt text is her biggest issue.

  2. Ray Andrews
    Permalink to comment#

    I used to fall squarely in the ‘Do Nothing’, then I saw a presentation by Leonie Watson https://www.youtube.com/watch?v=vK1tlLOavvM now I’m completely ‘Go All Out’

  3. It’s good to know most people provide text descriptions, and hopefully the 10% will start to do so from now on!

    It’s worth adding a quick point about the usability of text descriptions though.

    If you use a screen reader, consuming the amount of information in the “go all out” text description might be hard work. There’s a lot of detail to take in, and a screen reader will typically read it all in one go as soon as the image gains focus.

    That detail is extremely important though, especially if the data from the image isn’t available elsewhere on the page. One approach is to use the “do some” option for the alt text, and compliment it by using the longdesc attribute to point to more detailed information on another page.

  4. Dave
    Permalink to comment#

    I go all out since I’ve had it drilled in to my head by my instructor in intermediate and advanced web design. Thanks Ian =D

  5. I think that the “Go all out” doesn’t make much sense to be in the poll because all that information shouldn’t actually be in an alt tag, it should be in the content of the page.

    If that information is on the page itself, then the “Go all out” alt tag of that image could be something like: “Graph that shows how many students earned a degree in 2009 for mathematics“.

    The image supports the content, if you take the image out it shouldn’t affect the final message.

    And if you’re repeating content on the alt tag from the main content of the page, you’re still missing the point of the alt tag, the image itself: support of the main message.

    Also, DRY if that’s the case.

    Just sayin’.

    With this being said, I usually go “nothing” (empty tag but always present) or “some”.

    That is until a web developer takes my markup and effs it up ><

    • Hard to make assumptions like that. What if you were just reposting some chart on a Tumblr blog and all you felt like writing was. “WOW – this is crazy!”. That is acceptable to me. Sighted users can see your reaction and see the chart and figure out what you are reacting to. Screen reader users can see your reaction and then read about the data and figure out what you are reacting to. It’s all about the situation.

    • Right Chris, I see what you’re saying.

      Thing is that with your example I now have my “hands tie behind my back”, meaning there’s no way to argue your example and you’re ultimately right.

      But that’s a very strict/rare situation, I don’t think a situation like that happens too often to be considered the ‘norm’.

      In my eyes, as a content strategist, I try to not depend on images to convey the main message, but instead use images to support the content and enhance the message, no matter how that message is transmitted: via text, via sound (screen reader), etc.

      If the message is, for whatever reason, image dependent, then maybe the alt tag would actually fall short and at that point maybe sound would be a better option.

      Just ‘TOL’ing (thinking out loud :p)

      But as with your case, the case above could also be rare.

      Bottom line is, all those 16K+ people and us here are very aware of the need to provide the best user experience possible either with alt tags, sound, proper content architecture, etc.

      And that’s a good thing for the web :)

    • Evan
      Permalink to comment#

      I disagree. I think the “hands tied” actually represents the vast majority of image content on the web – stuff that’s user uploaded, from a CMS, reblogged, and so on. No amount of lovingly hand-crafted markup will ever be able to equal the amount of automatically generated content already on the web.

      But in general, I agree – most images on the web aren’t graphs of student exmatriculation rates; they’re 1×1 transparent gifs/pngs, lolcats, and photos of naked people. I always put a little bit of thought into my alt attributes, but in the end, most of them end up being null strings. Why? Most of the time, if the image doesn’t show up, I want the user agent to skip it like it’s not even there – because often it’s impossible to encapsulate something relevant to say, relevant information doesn’t exist in the first place, or it’s purely decorative.

      As an example of the first category, consider an image with a caption that in some way ironically undermines the content of the picture (or vice versa). What would you do for the alt text? Just have the caption? Have the caption and a description of the image? The caption and a description and a comment about how and why the juxtaposition is ironic? All of the above plus a length metaphysical treatise on the philosophical nature of irony itself?

      It’s impossible to answer this question in a general sense, which is why pronouncements about the importance of lengthy alt tags are a bit silly.

  6. Just an FYI, your graph is nifty, but doesn’t scale too well in mobile :-S

    http://cl.ly/image/1N2b0D3R2s0W

  7. Permalink to comment#

    I didn’t pay that much attention to alt tag until recently when I had a conversation with a coworker (I work in mental health and do our team’s website) who told me that individuals who are visually impaired really appreciate as detailed a description as possible. He pointed out that images of things like food and landscapes that have rich alt tags can really enhance the experience.

    I understand where Ricardo Zea is coming from when he says that the content should contain the meat of the information, but I still feel like there are many scenarios where the content doesn’t support the image (e.g. galleries, profiles pictures, etc.).

    • @Dan, I think those image galleries and profile pictures have a particular type of content which doesn’t necessarily mean that using the alt is the best solution to support the images.

      I’ve seen a thousand and one lightboxes for image galleries where the author of the script decides to use the alt tag as the attribute from which the script extracts the description of the image, only to have everyone ask in his forum or tutorial page “Hey, how do I add HTML into the alt tag?”.

      That right there is a major flaw of the understanding of what the alt tag is for.

      As you can see, the “content” is telling you/me “Hey man, I need this text to be bold, have a paragraph and have a link at the end”. How do we then plan to do that? By using markup in the alt tag.

      Plop! Not the correct way to use the alt tag in my eyes now, I woke up from that nightmare only a few years ago. Let’s not even talk about separating presentation from content, or… code bloat :p

      So at the end, I think that it’s not how the content/message supports the images, but how images help support the content/message.

  8. Mike
    Permalink to comment#

    I, for one am now going all out now understanding how much the alt tag it affects people with screen readers.

    It would be interesting to see a poll of how many of the over 16,000 will or won’t change their approach after taking this poll. (:

    Avid reader for a year. First time posting.

    Thanks for the great content.

  9. Nicholas Mazzuca
    Permalink to comment#

    As an avid user of a CLI browser, as well as a user of an old Blackberry(with only 2g), I must say; your alt text is VERY appreciated. Thanks for all of you of the 13.88%, you are amazing!

  10. The amount of alt text isn’t really the issue, but when to use it. I tend to lean on the side of caution and add alt text for majority of images when they aren’t needed. It ends up having a negative effect on screen reader users as it reads out more content than it needs to, in some cases doubling up and adding “noise” to the content.

    The most common example below I will never have alt text as the text in the link provides enough context

    <article>
        <h3>
            <a href="#">
                <img src="http://fillmurray.com/100/75" alt="">
                Headline text
            </a>
        </h3>
        <div class="summary">Lorem ipsum dolor sit amet.</div>
    </article>
    

  11. Bill Westbrook
    Permalink to comment#

    I use alt texts all the time, mostly for SEO purposes. Writing 2-3 words about the image doesn’t take more than a few seconds. I don’t know why most people don’t bother using alt.

  12. Anonymous
    Permalink to comment#

    I may not put in a full description of image, but I try to put in the relevant information. However my current boss (a small web developer company) Uses the alt tag for ‘SEO’ Adding a ton of useless information that has nothing to do with the image. When mentioning that hes basically breaking the site for anyone with a screen reader, his response was he doesn’t care about that.. Along with the fact, that I doubt there is any SEO bump using useless tags in the Alt section I was told I don’t know what I’m talking about

    • I feel your pain.

      I’m sure your boss thinks he knows what he’s talking about when he says ‘he doesn’t care’, lol.

      I’m sure your boss is hurting to some degree the SEO of the pages/sites where he’s making you stuff the alt tag with a lot of content.

      He must be so sure he’s fooling Google, hehe.

      Oh boy.

      Good luck man.

  13. ebook reader test
    Thanks for finally writing about >Poll Wrapup: How Much Effort Do
    People Put Into Alt Text? | CSS-Tricks <Loved it! ebook reader test

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".