Your Online Resource Centre
About Alt and Title Attributes
By: Kimberly 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.
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
Usability Consultant, Kimberly Krause Berg, is the owner of UsabilityEffect.com (http://www.usabilityeffect.com), Cre8pc.com (http://www.cre8pc.com), and Cre8asiteForums (http://www.cre8asiteforums.com/). Her background in organic search engine optimization, combined with web site usability consulting, offers unique insight into web site development. |
