Web Accessibility Academy · レッスン

インラインSVG：role imgとtitle

意味のあるグラフィックに名前を付け、スクリーンリーダーに伝えます。

「インラインSVG：role imgとtitle」はCoddyKit上の無料Web Accessibility Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。

「インラインSVG：role imgとtitle」で何を学びますか？

意味のあるグラフィックに名前を付け、スクリーンリーダーに伝えます。ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応の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に戻る