What does this accessibility issue mean?
Accessibility issue summary: alt text missing for <role=”img”> element
Role elements (<role>) provide context about user interface (UI) components on a web page for assistive technologies such as screen readers.
If a <role> element has an attribute of either “img”, it should include alt text to describe the purpose of the image and, if appropriate, the image content.
This helps screen readers determine how to present that element to users.
Solution: Ensure image elements have alternate text or a role of none or presentation.
Example HTML violation: Image element missing alt text or role (WCAG Level A Issue)
<div class="row">
<div class="col-md-12">
<h1>Our Best Sellers</h1>
<div class="product-list">
<div class="product">
<img src="img/product-1.jpg" />
<h2>Product 1</h2>
<button>Add to cart</button>
</div>
</div>
</div>
</div>The HTML code given above violates the image-alt accessibility rule because the <img /> tag does not contain any alternative text. The alt attribute is crucial for users who use screen readers or have visual impairments. Without an alt attribute on the <img /> tag, these users can't understand what's conveyed by the image.
A corrected HTML example is below:
How to fix "Image element missing alt text or role (WCAG Level A Issue)" issue
<div class="row">
<div class="col-md-12">
<h1>Our Best Sellers</h1>
<div class="product-list">
<div class="product">
<img src="img/product-1.jpg" alt="Product 1 image" />
<h2>Product 1</h2>
<button>Add to cart</button>
</div>
</div>
</div>
</div>The alt attribute is now present in the <img /> tag with a meaningful description ("Product 1 image") that describes the image content or function. This makes the site accessible to more users.
