How to Make SVG Accessible  ARIA, title and desc Guide
Accessible SVG uses title, desc, and ARIA attributes so screen readers can describe icons and illustrations to visually impaired users.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Accessible SVG: title and desc Elements
Add `<title>` (short accessible name) and `<desc>` (longer description) as the first children of `<svg>`. Reference them with `aria-labelledby` pointing to both IDs for maximum screen reader compatibility.
- <title id='t1'>Shopping cart icon</title>
- <desc id='d1'>A shopping cart with 3 items</desc>
- On <svg>: role='img' aria-labelledby='t1 d1'
Decorative SVG: Hiding from Screen Readers
Decorative icons that add no information should be hidden from screen readers. Add `aria-hidden='true'` to the `<svg>` element. This tells assistive technology to skip the SVG entirely.
- Decorative: <svg aria-hidden='true' focusable='false'>
- Informative: <svg role='img' aria-labelledby='title-id'>
- Interactive: <svg role='img'> with keyboard focus management
Frequently Asked Questions
How do I make an SVG icon accessible?
Add role='img' and aria-label='Description of icon' to the <svg> tag. Or use <title> inside SVG with aria-labelledby referencing the title element id.
Should decorative SVG icons have alt text?
No  add aria-hidden='true' to decorative SVG. Screen readers should skip icons that have adjacent text labels or convey no additional meaning.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG