«
»

Using an image (IMG) as Link Text.

Jun 7th, 2011 at 10:20 am

When an image is used as a link, the ALT attribute provides the link text to assistive technology like the JAWS screen reader, and the title attribute can be viewed by the user of a a magnifier. Both are important to convey meaning to people with disabilities.

In the example below, the image is used as a link to a movie clip. When creating link text with an image, imagine you are speaking the link text to a friend over the phone. If the friend can understand the purpose of the link, you have successfully created accessible link text.

Example 1:

Using an image as link text IMG tag.

Mobile phone video of recent funeral procession in Jisr al-Shughour src="http://donaldevans.com/images/example_alt.jpg">

Code


<a href="story.html">
<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="example_alt.jpg">
</a>

Example 2:

Using text and an image as a link.


src="http://donaldevans.com/images/example_alt.jpg">

Mobile phone video of recent funeral procession in Jisr al-Shughour

Code


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

Works With

Using an Image as Link Text
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

In Accessibility, Best Practices, WCAG. Both comments and pings are currently closed.

Comments are closed.