Interactive images must have meaningful text alternatives.
Interactive images are images that are made actionable by wrapping elements like an <a>
<button>
. These elements allow images to be actionable up mouse click or pressing the Enter key.
alt
attribute<a href="...">
<img src="..." alt="home">
</a>
In some cases, you may find interactive images wrapped around generic elements like <div>
or <span>
. This is okay as long as a proper role
has been defined and it contains tabindex=”0”
. If not, the image will likely not be accessible by assistive technology or keyboard.
<div role="button" tabindex="0">
<img src="..." alt="home">
</div>
<!-- NOT ACCESSIBLE: -->
<div tabindex="0">
<img src="..." alt="home">
</div>
<div role="button">
<img src="..." alt="home">
</div>
ARIA
The following markup uses aria-label
on a button to provide the text alternative
<button aria-label="">
<svg role="none"></svg>
</button>