Images as links

For linked images, the alt attribute (the alternative text) is used as the link text. Screen readers will announce the alt text when the link gets focus.

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 helpful to use the word ‘link’ or ‘this link goes to’ in your alt text; that will already be announced by the screen reader.

Don’t: omit alt text for an image that is used as link.

The screen reader VoiceOver announces this as: “Link, link image”. So there is no information about where the link leads.

Do: use the alt text as link text.

With alt text:

The screen reader VoiceOver announces this as: “Link, image, WP Accessibility Knowledge Base”. The user now knows it’s a link with an image, and the link leads to the WP Accessibility Knowledge Base.

Read Alternative text for images in the content about how to add a custom alt text on an image in WordPress.