Inline SVG: role img and a title
Name a meaningful graphic for screen readers.
Inline SVG: role img and a title is a free Web Accessibility Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
A Picture With No Words
An inline SVG draws shapes the eye loves, but a screen reader sees a pile of paths and says nothing useful about it. 🖼️
Meaningful or Just Pretty?
Before naming anything, ask one question: is this graphic meaningful or purely decorative? Your whole markup choice flows from that answer.
Tell the Browser It Is an Image
For a meaningful graphic, add role="img" so assistive tech treats the whole SVG as one image instead of loose shapes.
<svg role="img" viewBox="0 0 24 24">
<path d="M12 2 L22 22 H2 Z" />
</svg>Give It a Name With title
A <title> inside the SVG supplies the accessible name a screen reader will read aloud for the graphic.
<svg role="img" viewBox="0 0 24 24">
<title>Warning</title>
<path d="M12 2 L22 22 H2 Z" />
</svg>Put title First
Place <title> as the very first child of the SVG. Some screen readers only pick it up reliably when it comes before the shapes.
Connect It With aria-labelledby
For rock-solid support, give the title an id and point to it with aria-labelledby on the svg element.
<svg role="img" aria-labelledby="t1">
<title id="t1">Search</title>
<path d="..." />
</svg>aria-label as a Shortcut
Short on markup? An aria-label on the svg names it directly, no child title needed. It also overrides any inner title text.
<svg role="img" aria-label="Home">
<path d="M3 11 L12 3 L21 11" />
</svg>Name the Meaning, Not the Shapes
Write the name as the graphic's purpose, like Download, not its visual parts like a down arrow over a line.
desc Adds Longer Detail
Need more than a short name? A <desc> element holds a longer description, paired via aria-describedby for extra context.
<svg role="img" aria-labelledby="t2" aria-describedby="d2">
<title id="t2">Sales chart</title>
<desc id="d2">Revenue rose each quarter in 2025.</desc>
</svg>focusable Trips Up IE Legacy
Old browsers let SVGs grab keyboard focus. Adding focusable="false" keeps a non-interactive graphic out of the tab order.
<svg role="img" focusable="false" aria-label="Star">
<path d="..." />
</svg>Verify in the Inspector
Open your browser's accessibility panel and confirm the SVG shows as an image with the exact name you intended.
Quick Check
You want a meaningful inline SVG to be announced as a single image with a spoken name. Which combination does that?
Recap: Name the Meaningful
Meaningful SVGs get role="img" plus a title or aria-label naming their purpose. Inspect to confirm, and your graphics finally speak. ✅
Frequently asked questions
Is the “Inline SVG: role img and a title” lesson free?
Yes — the full text of “Inline SVG: role img and a title” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Inline SVG: role img and a title”?
Name a meaningful graphic for screen readers. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Inline SVG: role img and a title” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Inline SVG: role img and a title
- Hiding Decorative Icons With aria-hidden
- Icon Buttons That Still Have a Name
- Icon Fonts and Their Accessibility Pitfalls