What does this accessibility issue mean?
Accessibility issue summary: Image missing alt text or role attribute
To adhere to accessibility best practices, each image on a web page should have an alt text attribute that describes the image and/or have a role defined as “none” or “presentation,” if the image is purely decorative.
Screen readers use <img> alt text to meaningfully describe images to visually impaired readers. If an image is purely decorative, that should be flagged to screen reader technology by including an empty alt tag (alt=””) and by defining its purpose using the role attribute. This ensures that users accessing your page through assistive technology understand the nature of the image, its importance (or lack thereof) within the page content, and how to interact with it.
If the alt tag is left off an image entirely, a screen reader may read the file name instead, which could be confusing to a user. If the image is decorative, you should still include the alt tag, but leave its descriptive text blank.
Solution:
Ensure all <img> elements on your website have an alternate text tag. Further, define purely decorative images by including a role attribute of “none” or “presentation”.
Example HTML violation: Image element missing alt text (WCAG Level A Issue)
<div class="product">
<div style="background-image: url('images/product.jpg');" role="img"></div>
<div class="product-description">
<h2>Product Name</h2> Product Description
</div>
</div>Explanation: The above HTML violates the role-img-alt accessibility rule because the element with role="img" does not have an "accessible" name or alternate text that describes the image.
This is problematic because screen readers and other assistive technologies rely on this alternate text to provide context and enhance the experience for users who cannot see the image.
How to fix "Image element missing alt text (WCAG Level A Issue)" issue
<div class="product">
<div style="background-image: url('images/product.jpg');" role="img" aria-label="Description of the Product Image"></div>
<div class="product-description">
<h2>Product Name</h2> Product Description
</div>
</div>Explanation of changes:
- Added the attribute
aria-label="Description of the Product Image"to the element withrole="img".
Screen readers will read out this description when a user navigates to the image. You should replace Description of the Product Image with a short, descriptive alternate text for the image.
For more information, you can refer to the Web Accessibility Initiative's guidelines on the usage of aria-label attribute and the rule that elements with role='img' should have alternative text.
