Description
This rule determines if following HTML elements have defined an alternative description through an alt attribute for non-decorative images, images within a link, form fields, and other interface elements.
imgareainput[type="image"]
Context
People who are blind or have low vision may need additional information presented as text so they can access information and control interface elements. Complex images may require detailed descriptions to convey important or useful information. For instance, provide a more detailed description for a chart demonstrating a growth trend.
How to fix it
- Give the purpose and function of the image within the context of the surrounding information and provide any text shown in the image, verbatim.
- Related to SEO, but important to remember that the keywords you use in the alternative description increase your chances of ranking in image search.
- Read
Best practices for writing good alt text
.
How to find missing image alt text attributes on a website?
- Use SiteLint platform to determine automatically all missing
alttext attributes without crawling. - Use following small code snippet directly in your developer console:
Array.from(document.images).filter((img) => { return img.getAttribute('alt') === null })
Standard
- Standard: WCAG 2.0, 2.1
- Level: A
- Success Criterion: 1.1.1 Non-text Content
- Severity: high