Image accessible name is missing

Image accessible name is missing — rule summary

Field	Value
Rule code	Img_Name_Missing
WCAG conformance level	A
WCAG success criterion	1.1.1 Non-text Content
Must be fixed at source	No

Description

We detected an image that is missing an accessible name. The accessible name of an image usually comes from the alt attribute or related ARIA properties and should be provided unless the image is deemed decorative. In the case where an image is unimportant or decorative, provide an alt attribute with an empty value. Otherwise, provide an appropriate alt attribute or related ARIA property for the image to possess an accessible name.

How to fix

If the image is meaningful, add a descriptive label to the linked image. The label should describe the purpose of the image and any important visual details.

For images using the <img> element, use the alt attribute:

<a href="contact.html">
  <img src="contact.png" alt="Contact us">
</a>

For images using the <svg> element, use the aria-label attribute:

<a href="contact.html">
  <svg aria-label="Contact us">…</svg>
</a>

If the image is not informative or redundant with adjacent text, mark the image as decorative.

For images using the <img> element, use alt="":

<a href="contact.html">
  <img src="contact.png" alt="">
  Contact us
</a>

For images using the <svg> element, use aria-hidden="true":

<a href="contact.html">
  <svg aria-hidden="true">…</svg>
  Contact us
</a>