ALT attributes on IMG elements

The HTML IMG tag has an ALT attribute and a TITLE attribute. The ALT attribute is used to convey the meaning of the image to assistive technology like the JAWS screen reader.
On the other hand, the TITLE attribute is used to create the visual flyout tool tip. A magnifier users sees this tool tip. Therefore it is important to use both the ALT and TITLE, even if they are exactly the same.

All HTML IMG tags MUST have an ALT attribute. Images that convey meaning should use an ALT attribute that conveys the meaning of the image. Images that do not convey meaning, like a corner.gif, should use ALT=”" (null). The null ALT tells the screen reader to ignore the image.

Example 1:

Using the ALT and TITLE attribute on an IMG tag.
Mobile phone video of recent funeral procession in Jisr al-Shughour

Code


<img width="304" height="171" alt="Mobile phone video of recent funeral procession in Jisr al-Shughour" title="Mobile phone video of recent funeral procession in Jisr al-Shughour" src="http://donaldevans.com/images/example_alt.jpg">

Example 2:

Be sure to capture all the text in the image as alternative text. Although you may use the TITLE for other purposes, in this case it in not necessary for accessibility.
Mobile phone video of recent funeral procession in Jisr al-Shughour

Code


<img width="304" height="171" 
alt="Summer Sale.  Save up to 60% during our largest sale of the season.  
Shipping for free.  Guaranteed to last. L. L. Bean.  Shop Now" 
title=""
src="example_alt_2.jpg">

Example 3:

An image that has no meaning, like this corner image, can use ALT=”".

Code


<img alt="" title="" src="http://www.donaldevans.com/images/corner1.jpg">

Works With

ALT and TITLE attributes in the IMG tag
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Comments are closed.