Images as links

For linked images, the alt attribute (the alternative text) can be used as the link text. If the alt attribute describes the image: the link text will be the description of the image, which is unlikely to clearly communicate the link purpose.

The post Creating the perfect link by The A11Y Collective gives an example of this.

Take an image of a cherry tree, for instance: Normally the alternative text would be something like, “A cherry tree in full bloom”. But if the image serves as a link to Wikipedia about cherry blossoms, the alternative text will be: “Wikipedia page on cherry blossoms”.

So the proper way to use an image as a link is to describe the link destination in the alt text. If the image links to a post about the Accessibility Team’s handbook, add the alternative text “Accessibility Team Handbook”.

It is not necessary to ever use the word ‘link’ or ‘this link goes to’ in your alt text; that will already be sufficient announced by the screen reader.

Resources

By giving a meaningful image a proper alternative text, you meet WCAG success criteria