How do I code an image as a link and make it accessible?
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 RAMP
Monitor your website and manage your progress towards WCAG conformance.
Accessible Web Academy
Career specific courses to help power up your accessibility knowledge.