Proper Use of ALT and TITLE Attributes
Posted by Ted Goas on April 19th, 2007.
Ted Goas has posted 2 articles.
RSS Feed for Ted Goas
Different Practices Exist on The Web, Which Is The Right Way?
The World Wide Web Consortium requires all images and links in a webpage to have an ALT attribute and TITLE attribute respectively. Making web pages Accessible and usable is an important part of the creation process. Overall, using ALT and TITLE attributes on everything eliminates almost all accessibility problems on many web pages. ALT and TITLE attributes also improve user experience and help assistive technology translate content for users with physical and sensory disabilities.
So far we’ve established two things: 1. It’s good to have ALT attributes and TITLE attributes defined in markup because 2. it helps improve the experience of all users when it comes to page content. But having the attributes tags in place is not enough on its own. What should web authors write in these tags? While the W3C publishes its recommendations for each, a variety of different practices are currently being practiced on the web.
The ALT Attribute for Images
The W3C states that alternate text is “for user agents that cannot display images, forms, or applets, this attribute specifies alternate text.” ALT attributes “let authors specify alternate text to serve as content when the element cannot be rendered normally.” This attribute can be inserted into IMG, AREA, and INPUT elements. In this article, we’ll focus on its use with IMG tags, possibly its most common use. If an image file cannot be displayed, at least users can see its ALT text. What kind of content should go into an image’s ALT attribute?
Good Practices
- Adding a caption describing the vital subject(s) of the image
- Adding the title of the image
- Adding an image citation / photo credit
- Keeping it short, choosing only essential words (using the LONGDESC attribute for longer descriptions)
Not So Good Practices
- Using the image’s file name
- Adding additional text that, by itself, does not describe the image accurately
- Adding empty quotes (except for elements like bullets - empty quotes are actually recommended by the W3C in cases like this)
The contents of an ALT attribute should NOT be a tooltip (even though IE displays it like this, which it shouldn’t). The text should be short (less than 100 words, as per WCAG 2.0). The text should also be relevant to the primary content so users may use it INSTEAD of the image and still gain the image’s value. In this case, it’s an accessibility thing rather than a usability thing.
The TITLE attribute for Links
The W3C states that a TITLE attribute is meant to offer “advisory information about the element for which it is set.” In short, the TITLE attribute should add additional information that compliments the linked text.
Good Practices
- Adding additional text or caption describing the link
- Adding a citation for the URL (link source, title of original article, author, all of these…)
- Keeping it somewhat short
Not So Good Practices
- Adding the exact text in the accompanying the link (this kind of a moot point since the title attribute essentially adds no new information in this case)
- Adding empty quotes
- Relying on plugins like Snap (these often rely on JavaScript and insert invalid markup into a web page. Some browsers don’t support them at all)
Content in the TITLE should add to the text inside the links, not just reiterate it. TITLE attributes should be more descriptive than ALT attributes, but not a paragraph (such as in LONGDESC attribute).
What Does It All Mean?
Roger Johansson wrote a great piece on this subject in 2004. To conclude this article, I’d like to quote his summary.
Alternate text is not meant to be used as a tool tip, or more specifically, to provide additional information about an image. The title attribute, on the other hand, is meant to provide additional information about an element…. Many people seem to confuse these two attributes…
It’s important for web designers and developers to know how to write good ALT and TITLE attributes. Practices like these should be employed into each web page element as it’s created. As Roger notes, we should be including accessibility features when initially creating web pages rather than going back to add it later.
Personally, I am glad I did some research for this article. I’ll be the first to admit that I have not followed these guidelines 100%. I learned something and hope to learn more from reader comments.
More Reading
- GAWD - Writing Good ALT Text
- D. Keith Robinson’s Take on Title Attributes
- Using Link Titles to Help Users Predict Where They Are Going
- The Image Problem and Text and Links
Make A Comment
( 64 so far )
64 Responses to Proper Use of ALT and TITLE Attributes
What can I say? Good article… very important points there…
Another great article, Ted. I think this information is valuable for any designer/developer. It’s important to understand the difference between the two attributes.
Looks like it’s time to sort out fad as well!
Nice article, though being a visual kind of person it would be great to see some image examples. Perhaps you could make a follow up article on this? Post a bunch of images and let the readers suggest the ALT text. I think that would make for a better learning experience.
You say you shouldn’t add empty title attributes. However, this can be a ‘fix’ for IE when using alt on images. Adding empty title attribute means IE doesn’t incorrectly pop up the alt text.
A good addition to this article might be some examples.
I think it’s also a judgment call when to use alt text vs. an empty string. For example, if there is a decorative image that doesn’t provide any real information, should you use alt text (like “a man and a woman holding hands”) or an empty string?
@ Patrick: In cases where the image adds nothing to the meaning of the page, I think I’ve read that you should use alt=”image”. Can anyone confirm this?
Good article, just one question can you tell me where you find this affirmation exactly :”(less than 100 words, as per WCAG 2.0)”. I haven’t seen any number concerning the length of alt attribut in wcag 2
I always thought that if the image is not important you should write it like this: alt=”" This validates so I always thought it was ok.
Superb article chap. Good work.
Good article… It explains the basics and it’s helpful to everyone that consider yourself a good Web developer.
[…] Proper Use of ALT and TITLE Attributes - Fadtastic.net […]
[…] ALT en TITLE te gebruiken Op fadtastic is te lezen hoe je nou precies die ALT en TITLE attributen moet gebruiken in je HTML code. Dit is […]
Very good article. Just a few comments…
Alt text shouldn’t really be a ‘description’ of the image, but should provide the content alternative for the image. CONTENT and FUNCTION (if there is a function) should be provided. More details in this article.
Also, WCAG 2.0 test suite documents (these are not yet formalized, approved, or final), indicate that alt text should be no more than 100 characters. We can all take this with a grain of salt, but it’s generally a good recommendation.
Images that do not convey content should provide empty or null alt text (alt=”").
[…] it right!) is the incorrect usage of alt and title attributes (yet attributes, not tags!). Proper use of ALT and TITLE attributes hopefully clears this up once and for all (if Roger’s 2004 article on the subject […]
Like the article very much. Easy to understand why one should use proper alt and title atributes. One important item the author did not mention is that even search engines look at proper use of alt and title atributes. In using the correct atributes, SE do rank pages higher than without it.
A large majority of Web Designers ignores the fact, for whatever reason, I don’t know.
I always use an alt tags with the blind and screen readers in mind. So, where there is a picture of say, a flower. I would say alt=”photo of a pretty red flower”. I always add the phrase “photo of” before the description, thinking that if it’s a screen reader, it will be clearer to the person. Is that not necessary? Maybe screen readers already tell the person it’s a photo?
[…] » Proper Use of ALT and TITLE Attributes » fadtastic - a multi-author web design trends journal (tags: accessibility html usability xhtml alt title tips) […]
[…] Proper Use of ALT and TITLE Attributes - This is a good reference for those that are confused about what kind of information they should provide […]
Good article although always adding a title attribute to links can be a little unnecessary. If you write good descriptive links (i.e. not “click here” etc) then often it is unnecessary to have a title attribute as well. At a recent accessibility forum a representative from the RNIB recommended not to use title attributes unless they add value (i.e. citations or more description is needed). A lot of screen readers also do not even read title attributes and those that do often have this feature turned off by screen reader users as it can be so annoying (due to misuse).
Agree with Anton - you could have touched upon the SEO benefits of good alt attributes. Blogged about it very recently myself, actually. Otherwise, a good artice!
[…] the title attribute (or maybe the alt attribute) The alt and title attributes The title attribute Proper Use of ALT and TITLE Attributes __________________ [a web design portfolio ] - [web non-sense - a blog ] Resources for learning […]
I can add that search engines uses ALT and Titles for descriptions, so try to fill it correctly!
There may be some benefit for SEO in terms of alts and titles (mainly titles), but one should first cater to the users needs and not create a title attribute full of keywords. A search engine’s goal is to serve the user and if title attributes don’t do that on a particular site then why should the search engine bother taking note of them?
I’m not saying it’s user or search engine here where titles attributes are concerned. A well crafted title tag can cater to both.
The World Wide Web Consortium requires all images and links in a webpage to have an ALT attribute and TITLE attribute respectively.
Err, no they don’t. They require all images to have an alt attribute, title attributes are always optional.
Other than that it’s quite a good article. I find I use alt=”" quite a lot, since most of the time pictures are just eye candy - if you can’t see them, there’s no meaningful alternative. My rule of thumb is to imagine I’m reading the page out to somebody. If I’d ignore the picture in that context, I’d give the picture alt=”". That WebAIM article Jared linked to is excellent (I’m off to add a link to my blog!)
With regard to titles, I think they’re rarely useful. If you have to add a tooltip to explain what a link is about, you need to write better copy! The only time I’d regularly use a title is where the linked text is necessarily terse and non-descriptive. For example: say you have an event calendar site where each event has its own page. On each event/page you have links that say just “Next Event” and “Previous Event”. The title attribute can be used to hold the title of the next/previous event.
Of course title=”" is *required* on images with alt text, to stop IE doing something stupid like putting the alt text in a tooltip…
Good points, Chris.
With your initial point,I think Ted is saying that the W3C state that “images need alts” and “links need titles” - not that images need both.
@Patrick and Adam -
If there is a decorative image that doesn’t provide any real information, or is not important to the content of the page, my approach has been to apply this image using CSS as a background-image. Strictly speaking, if it’s a decorative image, it’s more likely to sit in the ‘presentation’ layer as opposed to the ’structure’ layer.
[…] Proper Use of ALT and TITLE Attributes from Fadtastic […]
[…] - In addition to adhering to XHTML 1 Strict and CSS standard recommendations, I include properly used ALT and TITLE attributes in every image and link, respectively. This helps those with disabilities, computers with bandwidth […]
Very important points made. This is something that is lost with a lot of image heavy websites, particularly artist portfolios, where search engines loose them as there is no descriptive text to go with the images.
[…] http://www.topdig.net4 . Title & Alt Attributes ： 如果你还没有使用它，最好现在就使用，并把它加入导航页等一切页面。这里还有一篇详细说明：Proper Use of ALT and TITLE Attributes 。 […]
[…] 4 . Title & Alt Attributes ： 如果你还没有使用它，最好现在就使用，并把它加入导航页等一切页面。这里还有一篇详细说明：Proper Use of ALT and TITLE Attributes 。 […]
I would really like to start using these on my blog (and loved your hints and tips), but I am having trouble actually finding instructions on actually ‘how’ to do it. I use new blogger. It’s probably really simple, but if you could help me out, I would really appreciate it.Thanks,Jill
[…] на такую-то тему». 4. Атрибуты Title и Alt. Используйте их по прямому назначению. Прочтите данную статью и примените почерпнутые в ней […]
[…] This blog provide more info about this topic - Proper Use of ALT and TITLE Attributes. […]
I’ve been trying to improve my coding, the use of ALT and TITLE is one area I need to think about more.Great Article very useful.
[…] a favour and ensure you follow both XHTML and Usability guidelines and make sure the ALT= attribute is included in any URI […]
[…] Proper Use of ALT and TITLE Attributes from Fadtastic […]
[…] 4 . Title & Alt Attributes ： 如果你还没有使用它，最好现在就使用，并把它加入导航页等一切页面。这里还有一篇详细说明：Proper Use of ALT and TITLE Attributes 。 […]
your article made a lot of sense to me, until i read an article here: http://www.rnib.org.uk/wacblog/articles/too-much-accessibility/too-much-accessibility-title-attributes/it begins: "The TITLE is an essential attribute for some elements, such as ACRONYM or ABBR, and is a required attribute for FRAME elements where it provides contextual information that wouldn’t otherwise be obvious to screen reader users. Unfortunately though, it can be applied to almost any HTML element. Most often we see it on links and images, where it can confuse or even mask essential information. It can create issues on other elements, but for this article we’ll concentrate on the damage it can do to clear link text and images with good ALT attributes…"Am i understanding this correcly then that if i choose to use title attribute (they are NOT required?) for images that it should contain the exact same text as my ‘alt’ attibute? … i guess that would mean any additional information i wanted to show beyond what is necessary for ‘alt’ text ought to be clearly visible on the webpage and not hiddle in pop-up text?
[…] & Alt Attributes: Use them how they are supposed to be used. If you haven’t used any at all, then a quick fix will be to start adding them to navigation and […]
[…] & Alt Attributes: Use them how they are supposed to be used. If you haven’t used any at all, then a quick fix will be to start adding them to navigation and […]
Good article. I myself used the alt text for captions many times and only learned about the title tag when the captions wouldn’t show up in FF. Now I know better. Thanks for the article.
[…] this is important for SEO purposes as well as from a user’s perspective. Be sure also to include ALT and TITLE attributes for your home […]
[…] this is important for SEO purposes as well as from a user’s perspective. Be sure also to include ALT and TITLE attributes for your home […]
[…] this is important for SEO purposes as well as from a user’s perspective. Be sure also to include ALT and TITLE attributes for your home […]
This article, although well-intentioned, is actually quite bad. It makes several gross errors. Corrections: ALT attributes are not allowed on links! Try it: you’ll get a validation error. TITLE attributes are required neither on links nor on images.Using ALT and TITLE on everything is actually harmful to accessibility (don’t flood screenreaders with useless information, thanks).Using ALT text to add extra information about the image — such as a title or photo credit — is an abuse of the ALT attribute and harmful to accessibility (use TITLE for this instead). ALT should only be used to provide a textual alternative to the meaning of the image in the given context (if the image is decorative, use alt="").TITLE is no substitute for good link text: most people won’t see the TITLE, but everyone sees the link text. If you write descriptive link text, you should rarely need to use TITLE on links.
I tried to use a bulleted list, but it appears to be broken :p
title attribute is very useful, thanks.
I have a few watermark-style images defined in a common.css style sheet. The thought occurred to me that I might add a title attribute to these so that when the mouse hovers over one such background image the additional information would appear. The desired effect is not achieved.
.wm-SLv1 {
background: url(/images/a/aa/Wmk_SLv1.gif);
background-repeat: no-repeat;
background-position: top left;
title: “effect at skill level 1″;
}
Is what I attempting not possible due to it being a part of the style sheet and not the actual page content?
[…] 4 . Title & Alt Attributes ： 如果你还没有使用它，最好现在就使用，并把它加入导航页等一切页面。这里还有一篇详细说明：Proper Use of ALT and TITLE Attributes 。 […]
Большое спасибо вам. Ваш блог это хороший повод найти интересных и начитанных людей, способных к конструктивным обсуждениям и критике. :)
[…] this is important for SEO purposes as well as from a user’s perspective. Be sure also to include ALT and TITLE attributes for your home […]
[…] & Alt Attributes: Use them how they are supposed to be used. If you haven’t used any at all, then a quick fix will be to start adding them to navigation and […]
[…] 4 . Title & Alt Attributes ： 如果你还没有使用它，最好现在就使用，并把它加入导航页等一切页面。这里还有一篇详细说明：Proper Use of ALT and TITLE Attributes 。 […]
Что-то у меня в Опере дизайн вашего сайта расползается…
ナースの卒業試験は開脚台で大股を開き、パイパンマンコにドクターのごっつい注射を注入され空っぽになるまで受けれたら合格です。
good , thank you http://wind-flowers.net
[…] this is important for SEO purposes as well as from a user’s perspective. Be sure also to include ALT and TITLE attributes for your home page. Also, make a logo that will give your banner a proficient look Instead of just […]
[…] 4 . Title & Alt Attributes ： 如果你还没有使用它，最好现在就使用，并把它加入导航页等一切页面。这里还有一篇详细说明：Proper Use of ALT and TITLE Attributes 。 […]
[…] 4 . Title & Alt Attributes ： 如果你还没有使用它，最好现在就使用，并把它加入导航页等一切页面。这里还有一篇详细说明：Proper Use of ALT and TITLE Attributes 。 […]
[…] This blog provide more info about this topic – Proper Use of ALT and TITLE Attributes. […]
[…] 4.Title & Alt Attributes：如果你还没有使用它，最好现在就使用，并把它加入导航页等一切页面。这里还有一篇详细说明：Proper Use of ALT and TITLE Attributes 。 […]
I thought readers would be interested in an application called Alt&Title that applies missing alt and title attributes to applicable HTML tags. I have used it on hundreds of web pages and it has saved me many hours of work.Give it a go. I hope you find it as useful as I have!Here is the web page promoting it… http://www.flysoftware.com/products/altandtitle/overview.asp
[…] 面。这里还有一篇详细说明：Proper Use of ALT and TITLE Attributes […]
Great post, keep it up :)
Related In Some Way, Shape Or Form
The above post has obviously kept you amused. Why not discover similar material:
The posts 25 Ways To Improve Your Site Today, 25 Ways To Improve Your Site In 5 Minutes, The Semantic Code, W3C’s CSS spec updates, How Do You Lay Out The Layout?, are related to this post.
Or why not take time out to find out about the author of the post.
Sponsors
Recent Comments
- Successful Facebook Applications Use Calls to Action:
[…] developers are using CTA’s in other ways within their applications. Matt Davies of Fadtastic... - Maria Rogers:
i hear that SEO experts earn thousands of bucks just optimising some large high traffic... - Paige Price:
my father practices Reiki and it is helpful for the general health.’`,
Search
Topics
Authors
- Abhijit Nadgouda
- Al Newkirk
- Andrew Faulkner
- Andrew Whitacre
- Anshul
- Chris Moseley
- Darren Hoyt
- Dean Hunt
- Derek Brown
- Ezekiel Bruni
- Gavin McFarland
- Jason Spector
- Johan
- Terry Ng
- Marc Bernstein
- Matt Davies
- Michael Murphy
- Mike Bishop
- Phil Renaud
- P.J. Onori
- Ron Scott
- Steve Rose
- Steven Teskey
- Tadeusz Szewczyk
- Tammie Lister
- Ted Goas
RSS Feeds
- Complete Feed
Everything from fadtastic. - Articles
Just the articles. No news/blog. - Reviews
Our book, brand and service reviews. - Blog/Site News
The 'FadBlog.' Site updates and news.
9rules
