SVG مضمّن: role img وعنصر title

An inline SVG draws shapes the eye loves, but a screen reader sees a pile of paths and says nothing useful about it. 🖼️

Before naming anything, ask one question: is this graphic meaningful or purely decorative? Your whole markup choice flows from that answer.

For a meaningful graphic, add role="img" so assistive tech treats the whole SVG as one image instead of loose shapes.

A <title> inside the SVG supplies the accessible name a screen reader will read aloud for the graphic.

Place <title> as the very first child of the SVG. Some screen readers only pick it up reliably when it comes before the shapes.

For rock-solid support, give the title an id and point to it with aria-labelledby on the svg element.

Short on markup? An aria-label on the svg names it directly, no child title needed. It also overrides any inner title text.

Write the name as the graphic's purpose, like Download, not its visual parts like a down arrow over a line.

Need more than a short name? A <desc> element holds a longer description, paired via aria-describedby for extra context.

Old browsers let SVGs grab keyboard focus. Adding focusable="false" keeps a non-interactive graphic out of the tab order.

Open your browser's accessibility panel and confirm the SVG shows as an image with the exact name you intended.

You want a meaningful inline SVG to be announced as a single image with a spoken name. Which combination does that?

Meaningful SVGs get role="img" plus a title or aria-label naming their purpose. Inspect to confirm, and your graphics finally speak. ✅