About Alt and Title Attributes
By Kim Krause Berg
Basics
The alt and title attributes (not alt tag or title tag) are used to
further define an image or text link.
For alt attributes, the text included inside the attribute
help search engines and screen reader software understand that an image
is there, and what the image is about. For web site visitors, alt attribute
text also offers this information, which is helpful if they are browsing
with images turned off.
Title attributes are helpful for text links, such
as navigation or embedded links within content. When someone moves their
mouse over a link label, some browsers will display the title attribute.
Therefore, it's an added bonus to readers to mouse over a text link,
such as "Products", to discover that it will take them to certain products
and possibly even sales, if the title attribute mentions this incentive.
Title attributes spice up links by adding "scent", for what is known
as the "Scent of Information". In other words, incentive to click.
While testing websites, I've discovered the following about Alt and
Title attributes:
1. The Alt and/or Title will display on mouseover in IE 5.5 and up,
depending on the type of link.
2. The Alt attribute will not display on mouseover in NS 6.0 or 7.0+.
3. To cover your bases with all browsers, if you want a description
to appear when someone mouses over a linked image, put in BOTH
the Title and Alt attribute. However, repeating the same statement is
annoying to screen readers. Be considerate.
4. For text links, use the Title attribute to add
a description. This is a useful aid for special needs users and offers
more information for your website user. Title attributes are a helpful
way to explain for your visitor what they will find if they click the
link. This creates confidence and triggers a desire to remain on the
website.
4. If both Attributes are in place for a linked image, in IE,
the default is to show the Title attribute, NOT the Alt attribute.
(This is helpful if you're writing two separate descriptions, one for
the Alt and one for the Title.)
5. In Opera and Netscape 7, the Alt attribute will not be
displayed for unlinked images.
6. In Opera and Netscape 7, the Title attribute is displayed
for images that are clickable, and have both the Title and Alt attributes
included.
7. In Opera and Netscape 7, the Title attribute does display
the description on mouseover for text links only.
8. In Firefox, the alt attribute does not display on mouseover. However,
if you remove images, for a text-only rendering, the alt attributes
clearly describe where each image is.
9. In Firefox, if you include both the alt and title attributes for
a linked image, the title attribute description will appear
on mouseover. The alt attribute does not.
10. In Firefox, for text links, the title attribute does appear
on mouseover.
Examples for how to use them
This is acceptable for linked images:
<a href="yourdomain.com" TITLE="This link goes to
a page about blah blah."><img src="images/yourimages.gif"
width="156" height="59" ALT="This images links
to a page about blah blah."></a>
This is preferred for linked images
because of how text only browsers or text to speech readers will display
the descriptions. Duplicate descriptions may be frustrating. To avoid
this, use one description for the title attribute and a shorter one
for the alt attribute, focusing on the image description. This applies
to linked images.
<a href="yourdomain.com" TITLE="This is what you'll
find if you click here'."><img src="images/yourimages.gif"
width="156" height="59" ALT="An image of something,
that links to the something page."></a>
Text links only: (Especially helpful for text navigation.)
<a href="yourpage.html" title="Describe the page
or category the link goes to.">The link label goes here</a>
For Accessibility
Try not to repeat descriptions and repetitive alt attributes such as
"spacer graphic", "arrow marker", and other design
elements that repeat throughout a page. Imagine having to listen to
a screen reader read all that! For an excellent report on how to make
your source code "screen reader ready", please see Guidelines
for Accessible and Usable Web Sites: Observing Users Who Work With Screen
Readers
There's a very good thread on this topic at High Rankings Forums
called Alt
and Title Attributes
More Articles
Bio and Copyright
Usability Consultant, Kimberly Krause Berg, is the owner of UsabilityEffect.com
(www.usabilityeffect.com), Cre8pc.com
(www.cre8pc.com), and Cre8asiteForums
(www.cre8asiteforums.com/). Her background in organic search engine
optimization, combined with web site usability consulting, offers
unique insight into web site development.
Copyright 2006 Cre8pc.com. All Rights Reserved. Reprint rights by Permission
of the Author