Web Accessibility Academy · 课时

内联 SVG：role img 与 title

为屏幕阅读器命名有意义的图形。

内联 SVG：role img 与 title 是 CoddyKit 上的免费 Web Accessibility Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

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. ✅

常见问题解答

「内联 SVG：role img 与 title」课时是免费的吗？

是的 — 「内联 SVG：role img 与 title」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。

「内联 SVG：role img 与 title」这节课中我会学到什么？

为屏幕阅读器命名有意义的图形。你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Web Accessibility Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「内联 SVG：role img 与 title」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Web Accessibility Academy 课中编写并运行代码吗？

能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Web Accessibility Academy