Description: The WAI-ARIA image, created with role=”img”, does not have an accessible name.
Context: Adding the role=”img” attribute means that the element must adhere to the same standards as a standard ‘img’ tag, including the labeling requirements.
<svg class="icon icon-bars" aria-hidden="true" role="img">
<use href="#icon-bars" xlink:href="#icon-bars"></use>
lt;/svg>
How to fix it: If the image is informative or functional, use either the WAI-ARIA attribute ‘aria-label’ or ‘aria-labelledby’ to create an alternative text for the image. If the image is purely decorative, use the WAI-ARIA attribute role=”presentation” instead of role=”img” for the image. This will cause assistive technologies to ignore the image.
<svg class="icon icon-bars" aria-label="toggle menu" aria-hidden="true" role="img">
<use href="#icon-bars" xlink:href="#icon-bars"></use>
</svg>