Image accessible name is unclear

Image accessible name is unclear — rule summary

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

Description

We found an image with an unclear accessible name. Ensure that the image has a concisely populated alt attribute or text from a related ARIA property. Accessible names should be concise and descriptive and should not include file names or sequences of numbers unless critical to the operation of the page. In the case where an image is unimportant or decorative, provide an alt attribute with an empty value.

How to fix

If the image is meaningful, add a descriptive label to the image. The label should describe the purpose of the image and any important visual details. Placeholder labels like "image" or "graphic" don't convey what the image is for. 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 is 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>