Skip to content

Images as Links

Using images as links

Using images as links is perfectly acceptable, 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 links 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.