Text alternative does not serve same purpose as image

Rule

The alternative text for actionable images MUST accurately convey the purpose or result of the action.

Background

People who are blind cannot see images on a page. In order to give people who cannot see an image access to the information conveyed by the image, it must have a text alternative. The text alternative must describe the information or function represented by the image. Screen readers can then use the alternative text to convey that information to the screen reader user.

For actionable or functional images - such as links or buttons - the alternative text must describe the destination, purpose, or function of the image - not necessarily the image itself. For example, the alternative text for an image that is a link or a button will describe the link destination or the button function, not the shape or other visual characteristics of the image.

How to Fix

Fix this issue by ensuring that the alternative text for the active image describes its destination, purpose, or function.

<a href="index.html"><img src="ABCD-logo.png" alt="ABCD Home"></a>

<button><img src="envelope-icon.png" alt="Email Us"></button>

<input type="image" src="magnify.png" alt="Search">