Web Accessibility

Images as Links

Meeting WCAG 2.0

A To claim Single A conformance, all of your pages and documents must meet all Single A requirements for all content

A A To claim Double A, all of your pages and documents must meet all Single A and all Double A requirements

A A A To claim Triple A, all of your pages and documents must meet all Single A, Double A and Triple A requirements

Using images as links

Using images as links is perfectly acceptible, but they do need some special attention. A screen reader can identify images used as links, so they should be placed in the page in a way that this technology can access. This means they must have alt text and it must be relevant.

See also the guidelines for

Single A

Making images into liniks and describing their purpose

Images are made into links by wrapping an a tag around the img tag. Luckily this is done automatically by most webpage editing software, but still needs some attention to getting it right.

Example of an image used as a link

The image code may have been:

<img src="icon.gif" alt="icon" />

When made into a link, the alt text needs to say where the link is going to take the user. A screen reader will read this out as a link, and use the alt text as the link text. Therefore, it is important that the alt text describes the link purpose, not the image appearance:

<a href="products.html"><img src="icon.gif" alt="Our Products" /></a>

In this example, keeping the alt text as icon' would not be informative.

See also

Double A

No specific requirements for making images into links.

Triple A

No specific requirements for making images into links.