In one paragraph
SVG elements with an image role must have alternative text means a tested graphic exposes image-like semantics without an accepted accessible name. Supply a concise title or appropriate ARIA name for meaningful graphics, and make decorative icons redundant to another correctly named interface element. Check the outer rendered SVG and computed name, especially when symbols, repeated components, or complex charts are involved.
Why it matters
An image role can present a graphic as one unit rather than a collection of shapes. That makes an accurate name important, but does not mean every SVG should receive the role. Interactive graphics and complex charts can require richer structure and equivalent information.
SVG title provides a short accessible description and is often displayed as a tooltip. Visible associated text can also be referenced using aria-labelledby. A desc element can support additional explanation, but should not be assumed to supply the short name path this particular rule expects.
Decorative graphics should not create redundant announcements. However, hiding the sole graphic in an otherwise unnamed button or link removes the only potential naming content. Name the functional control independently before marking its artwork decorative.
How WebAuditOS evaluates this finding
The supplied svg-img-alt integration inspects configured SVG image-like roles and accepts paths including a direct-child non-empty title, aria-label, aria-labelledby, or title-attribute fallback. A nested title or desc alone does not satisfy its documented short-name checks.
Serious impact maps to high severity. SVGs outside its role or visibility scope can go untested, including informative graphics with no declared role. No violation therefore does not classify every graphic as decorative or prove the suitability of its text alternative.
How to fix it
- Determine the graphic's actual role in context. Distinguish decoration, a linked logo, a meaningful status icon, a static chart, and interactive visual content.
- Inspect the outer SVG after component rendering, including use or symbol references. A title inside a reused symbol should not be assumed to name every outer instance in all tested implementations.
- For a meaningful single graphic, a common naming pattern is:
<svg role="img" aria-labelledby="brand-title-1" viewBox="0 0 120 40">
<title id="brand-title-1">Example company</title>
<path d="M10 30L30 10L50 30Z"/>
</svg>This is an illustrative graphic and name, not a production brand asset. Use accurate content and a unique identifier for each instance.
- If existing visible text describes the graphic, reference the correct text where appropriate instead of maintaining a conflicting duplicate label. Use aria-describedby for additional detail when that fits the intended reading experience.
- For a complex chart, provide a concise name and accessible explanatory text or data nearby. A name such as Sales chart does not reproduce the information visitors need from its trends, values, and qualifications.
- For decoration inside an already named control, consider aria-hidden=true and appropriate focus handling on the artwork. Do not hide focusable links or remove the only accessible name of the enclosing action.
- Test component props, duplicate IDs, responsive alternatives, and theme variants. Generated icon libraries can silently add role=img without passing the intended title through to the real SVG element.
- Rescan and inspect computed names and actual navigation with supported assistive technology where practical. A direct-child title pass does not prove correct chart interpretation or a working interactive diagram.
What the fix can break
Reused IDs can make several instances reference the first title, announcing the wrong item. Generate instance-safe IDs or use another suitable naming mechanism.
Flattening interactive visual content into a single image can hide needed relationships. Keep functionality and its keyboard alternatives intact.
Do not add irrelevant labels to decoration solely to populate a scanner field. Extra repetitive announcements can make the interface harder to navigate even when every image has a non-empty name.
Questions
Is desc alone enough for this check?
Not under the supplied naming paths. Provide an appropriate short name and retain useful additional description separately.
Why did an SVG title not clear the finding?
Check whether it belongs directly to the relevant named element, has text, and is correctly referenced after rendering.
Does an SVG without an image role necessarily need no alternative?
No. It may simply fall outside this rule. Review whether it communicates essential information.
Which related checks help?
Review image-role alternatives, button names, and the automation limits guide.
What severity does this get in the report?
High. An axe finding takes its severity from the impact axe reports for the element that failed, and the report maps critical and serious to high, moderate to medium, minor to low. This rule is declared serious in axe-core, so a failure arrives as high.