Rule

Interactive images must have meaningful text alternatives.

What are interactive images?

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.

How to add alternative text to interactive images

Using 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>

Using ARIA

The following markup uses aria-label on a button to provide the text alternative

<button aria-label="">
		<svg role="none"></svg>
</button>

Using aria-labelledby