How do I code an image as a link and make it accessible?

Question

I have an image on my site that I want to code as a link? How do I code an image as a link and make it accessible?

Answer

The element containing the link text or graphic needs to be an anchor element (<a>) or to have role="link". Using native elements for their intended purpose is always best when possible, so using an anchor element (<a>) with an href is recommended.

For example:

<a href="https://accessibleweb.com/web-accessibility-checker-browser-extension/"><img src="https://accessibleweb.com/wp-content/uploads/2021/10/scanning-image-1-1024x591.png" alt="Accessible Web Tool scanning website pages" /></a>

When text alternatives are provided for images, the image's text alternative can act as an accessible name for the links surrounding them.

For more information, the Accessible Web Academy course Landmarks, Links and Headings includes in-depth discussion and examples of links and link accessibility.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.