How do I code an image as a link and make it accessible?
Question
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.
