img-empty-alt-in-link

⌘K
  1. Home
  2. SiteLint
  3. Accessibility Rules
  4. img-empty-alt-in-link

img-empty-alt-in-link

Print this article

Description

This rule determines if a given anchor element <a> have a defined accessible name when the only child node is the image. In that case, the image must have defined an alternative description that describes the action. Example scenario:

<a href="example.com"><img src="action.png" alt="Add to cart"></a>

Quote from W3C:

Functional images are used to initiate actions rather than to convey information. They are used in buttons, links, and other interactive elements. The text alternative for the image should convey the action that will be initiated (the purpose of the image), rather than a description of the image.

Missing or empty alt values create significant problems for screen reader users because functional images are essential to the functionality of the content. Screen readers will typically announce the image file name, the image URL, or the URL for the link destination, which is unlikely to help users understand the action that will be initiated by the image.

How to fix it

Always define the alternative description for the image and it should convey the action that will be initiated (the purpose of the image), rather than a description of the image.

<a href="https://example.com">
<img src="button.png" alt="Add to cart">
</a>

Resources

Standard

Accessibility, SiteLint, WCAG 2.1, Success Criteria 1.1.1, Level A

Was this article helpful to you? No Yes

How can we help?