New Poll: alt Text Usage

Published
February 1, 2013
by
Chris Coyier

Alt text has come up a bunch of times for me recently. One reader wrote to me asking if people really use them anymore. He does and said "I feel alone in carrying out the good fight." ALA posted a reminder about when using alt text is unnecessarily repetitive. I ran across this flowchart in the comments there. The A11Y Project has a tip page on them. So I figured it would make for a good poll this round. If nothing else to raise a bit more awareness.

The poll (in the sidebar of the site), asks:

When you write alt text for an image that is important to content, you:

Go all out: alt="A graph showing that 347,985 students earned a degree in 2009 and 15,496 of them were in mathematics. That is less than 5%."

Do some: alt="A graph showing 5% of degrees are in math."

Do little: alt="graph"

Do nothing: alt="" or nothing at all

We'll do a wrap up with more information and anything interesting stuff we learn later on.

Hmmmm yea. I should start going all out. More context something on a website has, the better. I just don’t like when someone pauses on the page and if their mouse happens to be hovering over said image, it shows them all the alt text.

Alt text adds context for SEO purposes but it’s not very pretty in my opinion.

I don’t know about using alt="", but I’d definitely prefer the ‘real’ textual description of the image to be in visible page content, using aria-described-by.

Screen reader users aren’t the only users that can’t see your image, or that might benefit from a little more detail. For example, many websites host images on separate domains that are blocked by corporate firewalls (e.g. imgur.com: blacklisted under the media sharing category), and most browsers don’t display alt text very well at all in this scenario:

Internet Explorer: Will display as much of the alt text as fits in the image placeholder, so depends on the size of the placeholder and alt text, more may be placed in the tooltip, but this is not unlimited either.
Firefox: Will display as much of the alt text as fits in the image placeholder.
Opera: Will display as much of the alt text as fits in the width of the image placeholder (no wrapping).
Chrome & Safari: Displays no alt text if the image is not available, at all.

Also alt text content cannot be marked up so no change in language or emphasis can be communicated.

I was actually able to increase my companies organic traffic by 12% (A large amount on a site that get 120,00+ visitors/month) in a short amount of time (It’s still climbing too!) by just adding alt tags to their images. These usually consisted of short descriptive sentences of what the image contained.

Longer alt tags would probably be appropriate when the image is an infographic or some sort of data being visualized.

I will “do some” as a general rule. If the context hints that I should “go all out”, then I probably will. If a client explicitly asks for me to “go all out” then I will. I tend to also set the title attribute to the same value as well (usually only when the tool tip won’t be annoying by obscuring the image).

The A11Y tip page has is pretty covered. 508 and accessibility is my primary responsibility on my team and I work with these simple rules:

If the image is meant to convey information, go all out and give a full description of what information the image is supposed to convey. “Graph showing that 98 percent of respondents use javascript, 2 percent disable javascript”.

If the image is decorative, meant to support content, give a brief description. “Dog sitting on a porch”.

If the image is a spacer, alt=”spacer”.

I personally do not subscribe to the alt=”” simply because screen readers do pick these images up. I rather the user know it’s a spacer and not have them wondering if the coders simply didn’t bother putting alt text in and they are missing something.

@Alan, that is correct, advises against it, however we used to run into issues where JAWS picked the images up and read the src info and I am just speaking from my experience. That was our remediation until we finally got projects updated to avoid unnecessary images. Of course still going through older systems and such, it’s still fun to find wonkiness. Heck we’re trying to figure out now why JAWS is skipping (not reading) images in documents that have alt text!

@Hilmon, agreed! It’s fun trying to go through and slowly bring older sites and systems up to date :)

I have not a plenty of knowledge on coding but It is really surprise me that it can possible to practice and play with codes at a very cheap rate if you have a blogger account. Ofcourse, You must need to change domain with your own domain name for this purpose. So it is really easy to practice or make a customized blog by expending just 10$ per year.
I highly appreciate the every post of this site because, it is really helpful to a beginner coder who just start to learning about this.
Keep it up. Good Luck!

I must add, the example in the poll are very wrong. alt-text should not be a description of the picture, but a text that (as the spec puts it) you should have written if you included no picture at all.

@Chris: it depends on the context. But the idea is that the alt-text flows naturally with the surrounding text and is not exactly the data as depicted in the picture. In this case I do not know the context (it is not shown), but I doubt the text you used will flow nicely. I would suspect something along the lines of: “Research showed that 347,985 students earned a degree in 2009 and 15,496 of them were in mathematics. That is less than 5%.” and not “a graph…” The fact that it is shown in a graph is non-information to a blind-user.
The main point is that this text flows naturally with the lines before it and after it in the actual text. ALT-text is a textual ALTernative to an image, not a description of the image.

I should point out that I did not mean to say that the wording is “very wrong” but that the choice of example is. A graph is usually just an aside to the main text, so an alt-text would not be needed in most cases (the graph is simply a visual aid to explain the surrounding text).
A better example would have been (for example) a photograph within an article.

@ Chris – I am waiting for you to moderate my earlier post, which contains links that explain why it is “wrong”. The amount of data in an image as complex as a graph far exceeds a useful alt text: there is a reason why I have lobbied hard and long for the retention of longdesc in HTML5. Barring that, you could also use aria-describedby (under certain conditions and with some caveats).

A ‘summary’ of a chart (“5% of users are foobar”) as alt text conveniently omits describing the other 95%…

Another key point is that ALT text should never be considered out of context, a point we are unable to ascertain via your current poll.

Thanks for keeping this conversation going though, understanding how to write effective and useful alt text is actually one of the hardest bits of web accessibility, and so the more we talk about it, the more others can begin to understand what ALT is really for.

I had to consider how to approach conveying graph data for screen reader users some time ago. The graph used jQuery flot to show mortgage repayments over the chosen period. Regardless of the tech used, I agree that the ALT attribute is not suitable for this purpose.

My solution was to write the data to a table hidden off-screen. The table summary gave a brief description of the graph, e.g. “Mortgage repayments over a period of 25 years”, and contained all of the data represented on the graph. I don’t like the idea of giving some users all of the information and others a snapshot of it, especially when the data in the graph can be easily represented in tabular form.

In the case of content images I think it needs to be considered what the impact of including “picture of man with dog” might be for someone using a screen reader. I rarely populate ALT attributes for content images unless they depict something that isn’t represented by the associated content.

Incidentally, this argument can be applied to the TITLE attribute, especially when used on A tags.

my guess before even checking the results was that “Do Some” would be the runaway choice in this poll. That’s what I do. Every time I see the alt text field in WordPress after an upload, I think of that little blind girl just trying to seek knowledge on the web, and my heart goes out to her, so I describe what is going on in the picture.

I can understand how in “A photo of George Clooney looking dapper” the “A photo” is pretty useless. But I thought to myself as I did these “A graph” might be a good way to start as elsewhere in the text might refer to the graph and also be like: “warning: a bunch of very specific numbers ahead.”

@Paul: Compare the following. This is the text from a page as read out by a screenreader. The ALT-text is placed in square brackets. To get the full effect read the examples out loud.

… The study shows a steady decline of 10% in the population’s susceptibility to this virus. [A graph showing 10% decline in susceptibility against income.] Research is now focussing on a better understanding of how and why the virus affects people with less income, while passing by those with more means…

This is redundant and slightly non-informative.

Better would be no alt-text:

… The study shows a steady decline of 10% in the population’s susceptibility to this virus. [] Research is now focussing on a better understanding of how and why the virus affects people with less income, while passing by those with more means…

This still gives all the information without distracting the reader. Another example:

… While growing up Paul regularly played football with his friends. [Picture of Paul playing football with his best friend John in his back yard.] This was to be the start of a successful career…

The text “stutters” and does not flow naturally. Besides, the description is non-informative.
Better would be:

… While growing up Paul regularly played football with his friends. [With his best friend, John, in particular he spent many hours practising in his back yard.] This was to be the start of a successful career…

This describes the picture (without giving the redundant information of it being a picture) and let’s the story flow and thus make it easier to understand.

Actually, Paul, I am not just “one blind user”. I am a registered-blind web developer who works in accessibility and does regular test sessions with groups of disabled users, including screen-reader users like me. So that is much more than “the opinion of one disabled user”.

Hi Ade, are you registered blind or registered as a web developer? I’ve not heard of registered web developers. At least not in the USA.

So are you saying that you and all the other blind screen reader users that you’ve done test sessions with do not care to know if an image is a graph, pie chart, black and white photo, painting, watercolor, etc.? I find that hard to believe, and in my opinion, it is simply your opinion ;)

WebAIM.org has done a lot more testing with screen reader users than you have I’m sure and they do recommend adding contextual info about the image depending on the situation.

You’d be amazed at how bad support for alt text is in email clients — some versions of Outlook will preface your entire alt text with a huge disclaimer on each image…you may as well write nothing at all.

It’s too bad, because people much more likely to view emails without images, the importance of alt text could shine through a little more in this area.

I’m surprised the ALA article (and this one) says nothing about SEO. Whether or not it makes a difference for accessibility means nothing to me, but I always write alt text for every image since it allows the search engines to apply some semantics to the image.

Mohamad, although the visual side counts for pretty much everything, there will be some people viewing the site who have visual impairments and will have to have an audio description. It’s for these people that an alt tag is necessary, even just a short sentence, but doing nothing just shows laziness.

If you give just the image alone, what it is for the search engines what for?

Sorry! I’m trying to think what you could possibly mean, but I just don’t understand this. So I could be a million miles away from answering your question here…

If an image element has no alt attribute text, a search engine can still index the image using:

Its filename (from its URL).
Content from the pages the image appears on.
Text used in links to the image.
Metadata found in the image file.
Results from performing Optical Character Recognition over the image.
Existing information harvested from images that are calculated to be a duplicate or similar.
Results from crowd-sourcing descriptions of the images.

It’s not JUST search engines though (although I would have thought having your images appear on the first page of image search for anything relevant would be worthwhile?) For my customers it is anyway!

But the other point we are making is that people that can’t see the image because of visual impairments will rely on decent ALT text to have their screen reader describe the image too them.

True, but why change something that already is in place and works?
Also it is not just SEO, it is the screen readers that rely on ALT text. You expect them to all adapt because some people can’t be bothered to write ALT text?

What’s already in place and works? The alt attribute? I don’t think so.

If you really cared about SEO you’d be using image sitemaps and not second-guessing search engine algorithms. This ensures people find your images when they are relevant, and not by chance. You can also tag your images with richer data, like geo-location.

If you wanted an image to be accessible to as many users as possible, you should not rely on the alt attribute, because the content is hidden. Support is good in assistive tools, but browser support is shocking. If the image download fails for whatever reason, a normal user has a very poor substitute, as covered by my earlier comment.

My point is that the alt attribute is not intended for SEO (that is, the HTML specification doesn’t say that’s what it exists for). SEO should never be the motivation for providing alt text.

Since alt text should be “alternative text [that] can be written by considering what one would have written had one not been able to include the image.”, I question whether one can provide good quality alt text if one’s target audience is search engines.

It’s also not intended only for screen readers, screen readers are just one example (the best example, since alt text seems to actually work well in a screen reader).

If your reason for providing alternative text is for users that cannot see your image, there are more practical, effective and inclusive techniques than using the alt attribute, because these assumptions are incorrect:
1. Everybody that can not see an image can easily see alt text.
2. Everybody that can see images will easily understand all of them, and never find anything of value in the alternative text.

I don’t think the alt attribute should be completely empty though, if an author needs to reference an image, AT users will appreciate some indication there’s an image present in the page.

Having writtenhundredsof wordson thisover at ALA (5 links there), I approach this now with some fatigue. It is extremely important to understand that ROLE that the alt attribute plays, as well as consider the ‘verbosity’ of screen readers when they encounter images.

As an extremely general rule of thumb, I apply the “as succinct as possible” rule whenever possible, and so in your poll, I would actually write the following alt text: alt=”Graph: 5% of degrees are in math.”

I urge you and others to read the comments over at ALA – this is important.

Hi Chris, you have to provide a text alternative for ALL info inside the graph. The only correct answer in your poll is Go all out: alt=”A graph showing that 347,985 students earned a degree in 2009 and 15,496 of them were in mathematics. That is less than 5%.”.

Even though this is not the most popular choice in the poll, it is correct. The most popular choice in the poll is excluding certain data from the screen reader user. Accessibility decisions can’t be made by popularity contests. In reality the only option for accessibility is to provide EQUAL access.

All info, most importantly all text info, inside an image needs to have a text alternative. You can decide how to handle that by providing a text alternative in the alt attribute if it fits, or providing the text alternative inside a data table below the image and then programmatically associating that text data to the image using aria-describedby.

It would probably be best to use a data table as the text alternative so all users can copy/paste the data for other uses. Not possible with an image.

As is clear from the discussion, there is some disagreement among people who provide guidance on best practices. I am encouraged by many commenters who try to provide at least some descriptive information. It is a little difficult for me to comment on the specific example since there is no actual image. That being said, a few things should be noted. As a screen reader user and as someone who has studied screen reader interactions, I can make several observations:
1. The alt text should be relatively short. For example, “photo of a woman holding child.” It should not be: “Photo of a tall, dark-haired woman in a green dress with matching eyes, holding a child swaddled in a yellow blanket.” Even though the second way provides much more information, it is probably going to be distracting. The information conveyed should be contextual.
2. Use the Longdesc or ARIA-describedby attributes to provide the kinds of long descriptions that I suggested in the example above if necessary. Longdesc is the best way in my personal opinion.
3. Please do not use the title attribute as a substitute for alt. For many reasons, it is not effective. The most significant reason is that the title attribute is intended to provide a tooltip. Moreover, screen readers do not treat the title attribute in the same way as alt. Alt is consistently exposed and read.
4. Often times, data tables and other context may provide additional information to the reader. Keep in mind that writing is a subtle art in which images play an important role but are not the be all and end all of presentation. People with cognitive and/or learning disabilities will also find your presentation compelling if you provide more context.
5. Infographics should never be used alone without context, interpretation, and description.
6. You can skip describing decorative images. When you include them, try to do so via CSS so that they’re not a part of the content flow. If you are including a stock image or any kind of image, think about why you’re including it. What meaning are you trying to convey? Will describing that image provide some important information or will it increase the enjoyment of your content? Just as you include stock images to provide a better visual effect, you should look at providing a short alternative text for users who are not viewing your content.

As for SEO–bah. If you’re leveraging image alts to up your rankings, there are other major problems with your content.

Special note: I never use “image of” or the like in my alt tags since screenreader software already specifies that it is an image. Imagine hearing “Image: Image of…” in every instance of an image (especially the ones that are for design flourishes: “Image: Image of green grass stock photo” or “Image: Image of speedboat racing over waves.”).

Sadly, most just use alt=”” to pass validation or a little more only if asked/required by the client.

Funny, in the beginning of the web, there were specialists. Then came ‘multi-skilled’ (versus just multi-tasked)individuals. Then, somehow, the divisions were blurred to assume anyone with HTML knowledge should know something about back-end technologies, server configuration, IT etc. Front-enders started creeping into back-enders territory because those out-of-the-know assumed so much in the title “front-end developer”. Let’s not even get into web designer versus web developer versus interactive designer.

Recently, in the past couple of years, the specialist has started coming about again, due mainly to the discussion between what UI is versus UX. Accessibility is now becoming a bullet-point on resumes along with “UI/UX” experience. Oh, let’s not forget the ‘content specialist’ or the ‘usability expert’ (shouldn’t that just fall under a UX person?)

However, besides Drupal and WordPress people, the back-enders have largely remained sheltered from all of this. Perhaps rightly so, but the output of code should surely be a concern as well where all that nice, validated code gets smeared by a CMS all for the sake of some neat feature or to make it easier for ‘the marketing people to make changes.’

We all have some experience as users first and foremost. Then, we acquire experience and skill as ‘web people’ I’ll call us.

Alt tags haven’t changed much since I started web stuff in 1997. They describe content or identify a graphic where the first isn’t true. Maybe it’s both sometimes.

Either way, it appears whatever ones main skill is, that will be subject that is ‘better left to the expert’ to comment on, rule upon or implement.

I think all that matters is if your audience can access the information easily and where they are supposed to or have to, you’ve succeeded. Communication is still senior to technology and certainly standards of any kind. (and yes, I realize that ‘standards’ are supposed to be there to ensure that communication I just mentioned)

Man. I always intend to do alt-text but I’m usually so cramped for time that I never do. I believe it’s important for screen readers, so it should be used as thoroughly as possible.
Unless you have a client screaming that they’ll cancel their contract with your agency if the website isn’t up in the next hour. Then you can leave it for later.

I would go all out unless the same thing was described in the surrounding text. For images that are more decorative I’d do little or do some, and for images that are just there to look pretty I’d probably do none.

I’m really not sure why you wouldn’t use any alt tags, that’s pretty bad. You should build sites that anyone can use and not discriminate someone because they have a disability. In an extreme case (in the EU at least) you could even be breaking the law or even get sued!

“ALT text for images should be kept to a minimum without missing out key information. This usually affects images containing lengthy passages of text, diagrams, charts, graphs and maps.

ALT text should be succinct and to the point of the image. If more than one word is used, keywords should appear at the start of the ALT text in order to make it more distinctive. Typically a screen reader user will only listen to the first word or first few letters, of ALT text in order to gain the meaning. We recommend the maximum length does not exceed a short sentence.”

(Their site is a really good resource for building accessible websites)

You’re missing the correct answer from the list of options, which is: “It depends entirely on what else is on the page”.

If that graph is the sole thing on the page, go all out: if the picture is worth a thousand words, you need the thousand words. If, however, the graph is sitting alongside text that details and explains the data then it’s purely illustrative and empty alt text is appropriate.

If I interpret the phrasing of the question as being the former case, then it’s debatable as to whether the “go all out” option or the “do some” option is appropriate, and that depends on the audience and how rigorous the explanation of the message needs to be.

All that said, the option of alt=”graph” is never going to be appropriate. It adds no value, but does add noise.

The key thing to remember is this: the page as a whole needs to have the same total value of meaning whether read by a screen reader or by a graphical browser. No more, no less.

Of course, the ideal solution for this example would actually be to offer a table of data as an alternative in the document, even if you didn’t present that on the screen for fully sighted users. It’s a good example of why alt text is not always the best alternative to an image.

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

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

How many people touch the CSS in your current main project?

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.