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
alttext 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.
Since it’s useful for screen readers in aiding hose who are blind/visually impaired, they should definitely be used. With a short sentence summing up the image for those who can’t see it.
I agree, I’m still more worry about how it affect the people with disability than for SEO purpose. Go all out!
Since Google Webmaster Tools has this to say about them, I go all out.
Thanks for sharing that link! I found it very interesting.
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.
Thanks for the the link share.
You need a fifth answer: use ‘alt=””‘ and include a textual description of the image in the surrounding context.’
Agreed!
I wouldn’t put the description of the graph in alt text. Off the top of my head, I’d use figure and figcaption unless research deemed otherwise.
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, usingaria-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.
Tend to use a few words instead of a full sentence. Though if I’m working in WordPress it’s nice being able to throw the full title in there.
Sometimes I do alt=” ” because some validators complain about the empty tag.
(It’s a nonbreaking space and gets converted to whitespace here.)
My problem is that I’ve never showed “important” images in my works, no I’ve never bothered to put an
altattribute in my<img>‘s.I guess I won’t answer the poll in order to not pollute the results.
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.
Yeah, context matters here, too. I would say my goal is “Do some” (which is what I voted), but sometimes the image is so simple or so complex that it goes to “Do little” or “Go all out.”
I use them and write a description about the image, or, about context of the image. My SEO guy told me to use them so I do.
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
titleattribute to the same value as well (usually only when the tool tip won’t be annoying by obscuring the image).I’m gonna have to vote on “Do some”. I put short descriptive text or just a title for the image. Yes, it does help a lot on SEO too!
I do the medium, just type in enough to accurately describe the image. If the image has text, like an ad, I will just type the text for the alt text.
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.
@John:
WCAG advises against that: F39: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt=”spacer” or alt=”image”) for images that should be ignored by assistive technology.
Are you sure about that? The link I mentioned (F39) says, “Providing a null text alternative (i.e., alt=”” or alt=” “) will allow assistive technology to ignore the image […]”.
I wonder how many people, apart from web designers, know what a spacer is. I think that would confuse most people.
I can’t honestly think of an instance where you needed to use a graphic spacer in this day and age….
@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 :)
You are supposed to use alt=”” on spacer images so they will be ignored by screen readers, blind users don’t want to read through the 6 spacer.gif’s on a web site.
Since Google Image Search uses this attribute and my site appears more often in the search results I always go “do some”. And you know, according to statistics: it works!
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 voted “go all out” but I must include that this means (for me) that I use alt as described in the spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#alt
Whcih includes cases where alt=””. Also, after I finished a project in WordPress, I obviously have no control anymore over how the user will upload pictures. And they hardly ever use the alt-text (I should say never).
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.
The text that would be written in lieu of that graph is exactly the data the graph contains. How is “very wrong”?
@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.
A little or nothing. I’m not sure on the impact.
I do, however, work on the title attributes.
Cheers.
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.
Read an interesting article about alt text and when it can become superfluous – http://alistapart.com/blog/post/on-alt-text
Makes sense but wondering if it is valid?
Most of the images I work with are dynamically created for some frivolous programmatic purpose, and I do all that I can to use pure CSS for visual stuff.
So… I’ve kinda stepped away from the alt field.
Reading these comments has made me want to start using it again though.
Your poll’s wording makes a basic error that I and other AT users, aural and Braille alike, find unnecessarily verbose: we do not need or want to know what type of image (graph, photo, et al.) it is.
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.”
Again, this is one blind users opinion here. Can’t base your accessibility decisions on the opinion of one disabled user.
I think you should include if it’s a graph, pie chart, painting, comic, etc. You obviously don’t have to say “image” but if you want to say it’s a “photo” then go for it.
@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.
This is redundant and slightly non-informative.
Better would be no alt-text:
This still gives all the information without distracting the reader. Another example:
The text “stutters” and does not flow naturally. Besides, the description is non-informative.
Better would be:
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.
http://webaim.org/techniques/alttext/#context See Example 4 with the alt=”Painting of George Washington crossing the Delaware River” as the recommendation.
And another example from WebAIM (who’s been doing this WAY longer than me). http://webaim.org/techniques/images/alt_text#adding The recommendation for a portrait painting is alt=”Portrait of Silvia Alvarez”.
FYI on the character count of alt text http://www.washington.edu/accessit/articles?1257
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.
Indeed. I was just about to post this when I saw your comment:
http://www.campaignmonitor.com/blog/post/3280/displaying-and-optimizing-alt-text-in-popular-email-clients/
I’ve heard the benefits that it may get you for SEO.
So I always try and use it, even if at a bare minimum.
Since it brings image traffic, why not!
So, what do i put for an alt tag where i’m using some business handshakes and glass buildings images in my site? should that be relevant to image or to the content?
It (must) depends on the image context… if the infos are already in the text it’s useless to repeat them in the alt attribute
You never mentioned
<figure>and<figcaption>. Is this on purpose? It seems those would be totally relevant to this discussion as well.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.
Big oversight.
Alt text isn’t the only factor for image SEO: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=114016
i choose – Do nothing: alt=”” or nothing at all – because visual its say everything :)
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
alttag 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? if to the people, I think it’s pretty clear. if you say laziness, I better change my choice to do little: D
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.
Search engines can’t read an image so they will read the alt text to gather the content. (better the content better the rankings)
Also anyone that uses a screenreader will have the alt text read out to them.
Personally I can’t see why anyone would consider leaving alt tags out??
Totally agree!
Agreed! As a UX Designer, I advocate for alt text for screen reading capabilities, those on a network with firewalls, and SEO purposes.
My Vote : Do Some
Reason : At least a one liner alt text makes more sense for the image and its also good as it sometimes get crawled in image search engines too..so My vote is on Do Some!
I find that screen readers are a smaller audience than something like older versions of IE, but some of the people here DO alt tags, and DON’T bother with making changes for other browsers.
Yeah, but would you rather punish someone that is using out of date browsers or someone with visual impairment.
I choose to punish those using out of date browsers :p
A component of major search engines is ‘image search’. It only makes sense to put in a small bit of effort in order to be fully optimized.
Woah, too much emphasis on SEO already!
Content authors didn’t originally use alt text for SEO. Search engines indexed alt text because it was something content authors were already using.
If everybody neglected (or abused) alt text, search engine developers would find other ways of indexing images, they do already.
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.
It’s not second guessing though? The link you posted earlier from google says use good ALT text in an image?
I have never once said it’s the ONLY thing you should use, I merely said that it should be used and used well!
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.
Hi Chris,
Having written hundreds of words on this over 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.
Thanks!
JF
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.
Ashamed to say I do little to nothing most of the time. I’m getting better!
I do some or go all out. It depends on how important the information contained in the graphic is.
“Do little” thoughtfully:
Only if the image portrays content that would be lost to those who are vision impaired do I add an alt value.
If the image is for frills or design, never.
If the image has words but still isn’t absolutely necessary for the content to be understood, I will at the very least add the content of the words that are lost.
Random stock photos attached to articles (which almost never add anything to the content): empty alt attribute.
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.”).
Very good articles
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)
I always use a little describing text in the alt attribute. Not too descriptive, just a small effective text who describes what’s hapening in the picture. Like ‘A cat, stuck between an iron fence’.
It’s just a little bit cleaner when suddenly your image dies.
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!
Check out what the Royal National Institute of Blind People (RNIB) says about it: http://www.rnib.org.uk/professionals/webaccessibility/designbuild/wacimages/Pages/alt_text.aspx
With regards to long ALT text:
“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)
I think that the ALT text only matters if it contains keywords used in het webpage. So Google understands the connection between them.
(sorry for my bad Englisch)
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.