ALT and TITLE attributes for Accessibility & Web Design
Monday, 10 August 2009
I have been asked several questions about the use of ALT and TITLE attributes in webpage design recently, so thought I would write a brief summary here.
'ALT text' or 'ALT attributes' (nb. not ALT 'tags' as many people call them) should be included on all non textual elements of your webpage, such as images. The ALT attribute should be provided as an alternative textual description for all relevant images. ALT attributes are coded like this:
ALT = "textual description of image".
If the image in question is purely decorative, the best practice is to use an 'empty alt attribute', i.e. with no textual description:
ALT = "".
ALT text should be used to improve the accessibility of your page particularly for those using assistance technology such as screen readers. They also enable search engine crawlers to "see" your non-textual page content- potentially improving your search engine ranking.
The ALT attribute is required.
The 'TITLE attribute', in contrast, should be used to provide additional information about the page element. Most modern browsers show the title attribute as well as the image (or other page element). The title description is shown in a yellow box when the user hovers over the element with their mouse. It is coded using:
title = "title text".
I like to use title text in three main situations:
1) When additional information about a image is required, such as source information or the photographer's name when using a photograph.
2) If a field in a form requires explanation this information can be given via a title attribute. I would also include this information in plain text above the field for completeness.
3) To explain more about a hyperlink- such as a warning if a link opens in a new window.
The ALT attribute is optional.
This is a very basic overview of ALT and TITLE attributes- if you have any questions or queries, please don't hesitate to contact me at via : Simplicity User Experience Optimisation
Posted byCharlie M at 05:29
Labels: accessibility, ALT attributes, TITLE attributes
I noticed that image tooltips were missing in IE8 and Firefox for all web pages I had designed. I then realised I had only specified alt attributes instead of title attributes!
Having a portfolio of hundreds of Web pages I was faced with the time-consuming task of adding title attributes to applicable images. Thankfully I stumbled upon a Windows application called Alt&Title that did this tiresome task for me!
Instead of spending hours manually adding title attributes, Alt&Title did it for me in minutes.
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