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.
src="http://donaldevans.com/images/example_alt.jpg">
Code
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
Works With
Browser | Screen Reader | Results |
---|---|---|
IE 9 | JAWS 12 | Yes |
FF 4 | JAWS 12 | Yes |
Standards:
- WCAG 2.0 SC 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)