Semantic Svg Img Alt
Serious - WCAG Level AA
The issue at hand is the lack of meaningful alternative text for SVG elements that serve as images. This is crucial because screen readers rely on alternative text to convey the content and purpose of images to users who are visually impaired. Without it, these users miss out on important information that the image might provide, which can hinder their understanding of the content or functionality of a webpage.
To fix this issue:
You should ensure that <title> or <desc> used for svg images accurately describes the image to make sense without context.
The
<title>element provides a short, descriptive text that serves as the alternative text for the image, while the<desc>element can be used to provide a more detailed description if necessary.
Best practices:
Keeping the alternative text concise yet descriptive
Avoiding redundant information
Ensuring that the text is meaningful in the context of the page content.
Avoid using phrases like 'image of' or 'graphic of' as screen readers typically announce the presence of an image
Common mistakes
Using the same alternative text for different images, which can confuse users
Neglecting to update the alternative text when the image content changes