What does this accessibility issue mean?
Accessibility issue summary: SVG element is missing alt text
SVG (or “scalable vector graphics”) elements define vector-based website graphics in XML format. For screen readers and other assistive technologies, <svg> elements should include an aria-label attribute that includes alt text to describe the vector image used.
If you cannot use a <label> attribute on an SVG element, you can use aria-label to meet accessibility standards and provide context for assistive technologies.
Solution:
Ensure SVG elements with an img, graphics-document or graphics-symbol role have an accessible alt attribute.
Example HTML violation: SVG with img role missing alt text (WCAG Level A Issue)
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>Ecommerce website</title>
</head>
<body>
<div class="product">
<h2>Product name</h2>
<svg role='img'>
<!-- SVG code for product image -->
</svg>
</div>
</body>
</html>Explanation: The above code violates the svg-img-alt rule of Web Content Accessibility Guidelines (WCAG), because it uses an svg element with a role of 'img' to present an image (in this case, a product image), but it doesn't provide an alternative text.
As a result, people who use screen readers won't be able to understand what the image is meant to convey. Solution: The issue can be resolved by providing an alternative text using an aria-label or aria-labelledby.
Here is the corrected HTML:
How to fix "SVG with img role missing alt text (WCAG Level A Issue)" issue
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>Ecommerce website</title>
</head>
<body>
<div class="product">
<h2 id='product_name'>Product name</h2>
<svg role='img' aria-labelledby='product_name'>
<!-- SVG code for product image -->
</svg>
</div>
</body>
</html>In the corrected example, we added an aria-labelledby attribute to the svg element that refers to the id of the h2 element. This way, the screen reader will announce "Product name" when it reaches this SVG image.
This solution effectively provides an accessible name for the SVG image and thus meets the requirements of the WCAG rule on providing text alternatives for non-text content.
