Name informative SVG
Use title, desc, role, and labels when the SVG communicates information.
accessible svg
Make SVG accessible
Accessible SVG depends on intent. Informative graphics need names; decorative SVG should stay out of the accessibility tree.
Hide decorative icons
Use aria-hidden for purely decorative icons that duplicate nearby text.
Check inline SVG in buttons
Icon-only buttons need accessible names outside the visual SVG path data.
Accessible icon example
<svg viewBox="0 0 24 24" role="img"><title>Upload</title><path d="M12 4v12M7 9l5-5 5 5M5 20h14" fill="none" stroke="currentColor" stroke-width="2"/></svg>
<title>Upload</title>Accessible SVG Guide FAQ
Does SVG need alt text?
Inline SVG usually needs title or aria-label when informative; SVG in img uses the img alt attribute.
Should decorative SVG be hidden?
Yes. Hide decorative SVG from assistive technology with aria-hidden.