Quiz 1.1.8: ALT text or Title text?
A few months ago we looked at a test case which presented the various ways of providing text alternatives to an image using ALT text. Modern assistive technology handles most methods well. Even in cases where the ALT text was completely missing, assistive technology remained silent. Older screen readers would annoyingly read out the path names of images without ALT text. They’ve learned not to do that.
The current best practice for a purely decorative image, an image that adds no material value to those listening to the page with assistive technology, ALT coded as two quotes with no intervening space: alt=”".
Of course, we all know that the current best practice for an image that conveys information is ALT text that accurately describes the image. That is exactly why ALT exists.
Now, what about those developers who want to use TITLE text instead of, or in addition to, ALT text? ALT was designed for and is the best practice method for providing a text alternative to an image. Yet, some are drawn to use TITLE text because of the visual hover effect (incorrectly) produced by a certain widely used browser. Oh yeah, it looks nice, but what does it do for those who listen to the page rather than see it? Do they get to hear only the ALT text, only the TITLE text, or both … more than they might want or need?
I’ve created a test case which includes various combinations of ALT and TITLE text. You can try it with your favorite assistive technology. You can also tell us why you prefer a particular method.
Q. For images which convey information and require a text alternative, I prefer method: ____. Please explain why.
- A using ALT text alone
- B using ALT text and TITLE text
- C using TITLE text alone
October 1st, 2005 at 8:26 am
In the context of the question *alt* attribute is a required one, and *title* is implied according W3C Standards.
So, discard method C.
Users agent may speak the *alt* and the *title* attributes.
Visual browsers frequently display the title as a “tool tip”.
I consider for my choice:
Following standards: may use *alt*
Following standards and serving visual browsers: may use both *alt* and *title*, with the disavantage of a double speak by assistive technologies.
My choice: method A
October 1st, 2005 at 11:50 am
I’ve shifted to “B”. Applying TITLE to images comes in handy when doing some generic xml/xhtml parsing of documents using DOM methods, where ALT is specific to images.
October 1st, 2005 at 6:25 pm
You actually need more test cases than that, including multiple titles (e.g., {a title}{img title}{/a}) with different degrees of specificity.
October 1st, 2005 at 9:12 pm
Thanks for the suggestion Joe. You’re absolutely right! This one was intended to be the very simple case. The next one is for testing TITLE everywhere the spec allows.
Just as we were recently surprised to discover Jaws handles display:none differently for label elements than for other elements, we need a comprehensive test case for TITLE. Coming soon.
October 2nd, 2005 at 3:06 am
I was thinking about this the other day. I thought that the tool tip did not display that meant that the AT being used did not see the proper items?
There is great debate about this. For example, I heard that title would only be used for a description like, “The Google company’s main logo” and ALT would say “The word Google where letters are different colors [link to more info.”
October 3rd, 2005 at 2:17 pm
I personally prefer the example (B), alt+title, I like the “tooltip” effect in FF and IE, however, if it conflicts with the screen readers, JAWS, et. al. then I would certainly abandon the use of title, and choose alt-only. After all, that is the reason we want to design, for accessibility, not for seo.
October 3rd, 2005 at 6:47 pm
[…] “they are asking “ALT text or Title text?” […]
October 3rd, 2005 at 6:59 pm
At present I feel I err on the side of caution although in the past I’ve used both alt and title on images. Mainly I’ve used both simply for the hover effect of title in Firefox so I am probably a bit norty on that one.
But nowdays I simply use Alt as it would irritate me to the point of leaving if I were reliant on a screenreader which kept giving me double descriptions of every image.
I’ll be interested in the upcoming discussion you mentioned to Joe though as I started using title all over the place more for SEO than accessibility at some point and then moved away. It would be nice to know what the results of that past behaviour were for assistive technologies.
October 5th, 2005 at 1:13 pm
I try to stick to alt text on images to avoid being redundant. There are cases where both might be very useful: For instance, on a visual browser, where the image conveys a meaning, but it is a link to something that doesn’t really fit the image meaning. This might be a queue to use both. But then again that may be a developer problem in that the wrong image was chosen to go with the link.
I have to choose A, but will also employ choice B in some circumstances.
October 10th, 2005 at 5:14 pm
I would choose A or B depending upon what other screen readers do regarding using alt and title. If any of them read both, I would choose A.
Fire Vox 3.0 in Firefox reads the path to the graphics in #1 and # 5, the ones with no alt attribute so C would not be a good option at least for people using Fire Vox. Home Page Reader 3.04 and Opera 8.5 skip the images for #1 and #5.
Home Page Reader 3.04, Opera 8.5, and Fire Vox 3.0 read only the alt attribute; not the title attribute for #6.
It will be interesting to learn how other screen readers handle #6.
October 15th, 2005 at 6:56 am
The good news is that the following assistive technologies do not read redundant information. One would hope they all speak the correct standards compliant value, the ALT text. Alas, they don’t.
For the case where both ALT and TITLE text is provided, line 6 in the test case, we heard these results:
October 16th, 2005 at 6:58 pm
I have been doing some testing of assistive tech support fpr the tilte attribute it may be of interest:
TITLE Attribute what is it good for?
http://www.sf.id.au/WE05/indexa.html
Screen reader software support for the TITLE attribute.
http://www.sf.id.au/WE05/forms.html
Assistive Technology users test TITLE attribute access.
http://www.sf.id.au/WE05/survey.html
October 23rd, 2005 at 8:05 am
[…] Access Matters Seeking Best Practices Previously: Quiz 1.1.8: ALT text or Title text? […]
December 8th, 2005 at 4:31 am
i perform B
January 5th, 2006 at 7:34 pm
HTML4 standards require to use alt=”" in anyway. But that’s fine if there is alternative for this. I have not known. Thank your for recommendation.
February 8th, 2006 at 3:09 am
Firefox not only doesn’t display alt text since they feel it is “incorrect”, the alternate title text doesn’t display all the text you have entered.
Eg a title text with the following text “On August 28, 1963, Dr. Martin Luther King. Jr. delivered his ‘I Have a Dream’ speech to some 250,000 supporters in Washington, D.C He eloquently described his faith in equality, justice, and freedom for all.” displays in full in IE but in FF it only displays “On August 28, 1963, Dr. Martin Luther King. Jr. delivered his ‘I Have a Dream’ speech t…”
April 8th, 2006 at 3:13 am
Answer is: A
Alt text :
The alt attribute specifies alternate text that is rendered when the
image cannot be displayed. User agents must render alternate text when
they cannot support images, they cannot support a certain image type
or when they are configured not to display images.
The alternate text is just that: alternate. In other words, it should
be a textual alternative for the meaning of the image. It should
convey the same thing as the image.
Authors should not specify irrelevant alternate text when including
images intended to format a page, for instance, alt=”red ball” would
be inappropriate for an image that adds a red ball for decorating a
heading or paragraph. In such cases, the alternate text should be the
empty string (alt=”"). Authors are in any case advised to avoid using
images to format pages; style sheets should be used instead.
Authors should not specify meaningless alternate text (e.g., “dummy
text”) either. Not only will this frustrate users, it will slow down
user agents that must convert text to speech or braille output.
April 18th, 2006 at 1:21 pm
We’ve published several Webmaster Tips that discuss the importance of ALT text descriptions and the many uses for the TITLE attribute on links and images. After reading them, many subscribers asked what seems to be a simple question. How can I include formatting information and line breaks inside TITLE and ALT attributes?
www.rdirectory.net
May 6th, 2006 at 3:50 pm
Ranking Directory,
You asked about formatting TITLE and ALT attributes. (1) GOOD for you for calling them attibutes, not tags! (2) Can’t be done. There are no presentation controls for attributes.
September 24th, 2006 at 6:23 am
[…] The previous quiz question asked about supplementing ALT text with TITLE text, and how it might affect assistive technology. As always, we find variations in how assistive technology handles the various combinations. I’ll leave the recap for later. Now, we’ll turn to a more comprehensive question and test case about TITLE text. As Joe Clark rightly pointed out, the previous test case was too simple. OK, Let’s try a more complete test. TITLE text can be applied to almost any HTML element, so that’s what I’ve done. […]
September 25th, 2006 at 9:34 am
the title and alt tag palys a important role as the search engine read the title of the webpage and displays result of search keyword according to it.
the alt tag on the other hand is used for images to know details about the image.
September 25th, 2006 at 3:03 pm
now only tittle tag play description and other meta tag has been ignored by the major search engine. although the content is the king of best position in top Search engine ranking.
January 5th, 2007 at 7:41 pm
I am an artist and have a lot of graphics on my site. I use title and alt. My computer is apple osx and I use Safari 2.0.3 and IE 5.2 for Mac. On these browsers I don’t see the (alt tool tips) on my site, but I do see the (title tooltips). I like to put descriptions of my art in tool tips. Since I don’t have very much text on my site, taking advantage of the title elements allows me to give my pages more content. Since search engines don’t see graphics I feel the information given in titles may be important especially since you can use them in conjunction with urls as stated previously. I also have a dell/windows running Millennium and IE version 6.0 and I can see both title or alt on that version of IE. I can’t comment on what the screen readers speak in regards to my site but I hope it is not redundant or improper. Thanks for the information on this site. Serena Rose
January 7th, 2007 at 11:22 am
Serena,
(Sorry for the delay in posting your comment. I have comment moderation set on because some stuff is still getting by the Akismet filter.) Your Mac browsers are operating correctly, exactly as the W3C intended. The correct browser interpretation of ALT is to display it ONLY when the graphic itself cannot be displayed. It is INCORRECT to display ALT as a tooltip when the graphic is also displayed. IE/Win got this wrong a long time ago and has now corrected it with IE7 in strict mode.
ALT should be used as a simple alternate description. TITLE is intended for supplemental description, exactly as you suggest.
Beautiful artwork. I need to spend more time admiring it.
March 9th, 2007 at 4:03 pm
I would choose A normally, but may use choice B in certain situation.
March 26th, 2007 at 3:47 pm
formatting TITLE and ALT attributes
IE will honor line feeds (\n) in TITLE attribute.