SVG Img Alt
Critical - WCAG Level A
The issue at hand is that SVG elements used as images or icons need to have a text alternative to be accessible to users who rely on assistive technologies, such as screen readers. Without a text alternative, these users may not understand the content or purpose of the SVG, which can lead to confusion or a lack of information.
This matters because users with visual impairments depend on screen readers to interpret and describe the content of a webpage. If an SVG lacks a text alternative, it becomes invisible to these users, potentially omitting critical information or context.
To fix this issue:
You should provide a text alternative for SVG elements that serve as images or icons.
This can be achieved by using the
<title>element within the SVG to describe its content or purpose.Additionally, ensure that the SVG has a role of
img,graphics-document, orgraphics-symbolto indicate its function.
Best practices:
Keeping the text alternative concise yet descriptive, ensuring it conveys the same information as the visual content.
Avoid using generic terms like "image" or "icon" as they do not provide meaningful information.
Instead, describe the specific content or function of the SVG.
Common mistakes to avoid:
Omitting the
<title>element, using non-descriptive text, or failing to set the appropriate role attribute.Additionally, ensure that the
<title>is the first child of the SVG to ensure it is correctly read by screen readers.