実践Webアクセシビリティ

実践！SVGのアクセシビリティ対応：代替テキストとARIAの使い方

ウェブサイトでSVG（Scalable Vector Graphics）を使用する機会は増えています。軽量で拡大縮小しても劣化しないSVGは、特にアイコンやイラストで非常に有用です。しかし、視覚的な情報であるSVGをそのまま使用した場合、スクリーンリーダーを利用している方や、様々な理由で画像が正しく表示されない方などにとっては、その内容を理解することが困難になります。

本記事では、SVGをアクセシブルにするための具体的な実装方法を、コード例を交えて解説します。装飾的なSVGと意味を持つSVGで取るべき対応は異なりますので、それぞれのケースに分けてご紹介します。

なぜSVGのアクセシビリティ対応が必要なのか

SVGは画像フォーマットの一種ですが、HTMLやXMLのようなマークアップ言語で記述されているため、単なるビットマップ画像（JPEG, PNGなど）よりも多くの情報を埋め込むことが可能です。しかし、その構造が複雑なため、適切なマークアップや属性が付与されていないと、支援技術がSVGの内容を正しく解釈できません。

アクセシブルなSVGは、以下のようなユーザーにとって重要です。

• スクリーンリーダーユーザー: SVGが何を示しているのか、音声で情報を得られる必要があります。
• キーボードユーザー: SVGがインタラクティブな要素（ボタン内のアイコンなど）である場合、キーボードで操作できる必要があります。
• 視覚以外の障害を持つユーザー: 色覚多様性のあるユーザーに対するコントラスト配慮や、認知障害のあるユーザーへのシンプルな表現などが含まれる場合があります（本記事では主にスクリーンリーダー対応に焦点を当てます）。
• ネットワーク環境が不安定なユーザー: SVGが表示されない場合でも、代替テキストで内容が伝わる必要があります。

これらのユーザーがウェブサイト上の情報を漏れなく取得できるよう、SVGのアクセシビリティ対応は不可欠です。

SVGの基本的なアクセシビリティ要素 <title> と <desc>

SVG仕様には、アクセシビリティ情報を提供するための基本的な要素として <title> と <desc> が用意されています。これらはSVG要素の直下に配置します。

• <title>: SVG全体の短い説明を提供します。多くのスクリーンリーダーがこの内容を読み上げます。HTMLの alt 属性に相当するものと考えることができます。
• <desc>: SVGのより詳細な説明を提供します。<title> より長い、補足的な情報を含めることができます。

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <title>太陽のアイコン</title>
  <desc>中央に円があり、周囲に放射状の光線が描かれたアイコンです。</desc>
  <circle cx="50" cy="50" r="40" fill="yellow"/>
  <!-- 光線のパスデータなど -->
</svg>

<title> は特に重要で、多くの場合はこれを提供することで基本的なアクセシビリティを確保できます。<desc> は複雑な図やグラフなど、より詳細な説明が必要な場合に使用します。

装飾的なSVGの場合の対応

SVGがデザインの一部としてのみ使用されており、コンテンツに意味的な情報を加えていない場合（例: 背景パターン、区切り線など）、スクリーンリーダーに読み上げさせる必要はありません。むしろ読み上げてしまうと、ユーザーにとってノイズとなる可能性があります。

このような装飾的なSVGには aria-hidden="true" 属性を付与します。これにより、支援技術はその要素を無視します。また、<title> や <desc> は不要です。

<svg width="50" height="50" viewBox="0 0 50 50" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
  <!-- 単なる装飾用の図形 -->
  <rect width="50" height="50" fill="lightgray"/>
</svg>

aria-hidden="true" は、SVG要素自体に直接付与するのが一般的です。

意味を持つSVG（アイコンなど）の場合の対応

アイコンなど、何らかの意味や機能を示すSVGは、その内容をユーザーに伝える必要があります。前述の <title> と <desc> も有効ですが、文脈によっては他の方法がより適している場合があります。

aria-labelledby を使用する方法

SVGがHTML要素に関連付けられている場合や、SVG自体にIDがある場合に、aria-labelledby 属性を使用して別の要素のテキストをSVGの代替テキストとして参照させることができます。これは、特にインタラクティブな要素（ボタンなど）の中にSVGアイコンがある場合に有効です。

例えば、テキストラベルを持つボタン内のアイコンの場合、アイコンSVG自体には aria-hidden="true" を付けて非表示にし、ボタン要素のテキストラベルがアイコンの意味も兼ねていることを明示します。

<button type="button">
  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
    <!-- 歯車アイコンのパス -->
    <path d="..."/>
  </svg>
  <span>設定</span>
</button>

この場合、スクリーンリーダーはボタン全体を「設定 ボタン」として読み上げます。focusable="false" はInternet Explorer/EdgeにおけるSVGのフォーカス問題を回避するためによく使用されます。

もしアイコンのみのボタンで、テキストラベルが視覚的には隠されているがアクセシブルに提供されている場合は、その隠しテキストを aria-labelledby で参照させることができます。

<button type="button" aria-labelledby="settings-label">
  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
    <!-- 歯車アイコンのパス -->
    <path d="..."/>
  </svg>
  <span id="settings-label" class="visually-hidden">設定</span>
</button>

<style>
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
</style>

この visually-hidden クラスは、要素を視覚的には隠しますが、アクセシビリティツリーからは削除されないようにするためのテクニックです。

role="img" と aria-label または aria-labelledby の組み合わせ

インラインSVGに role="img" を指定し、代替テキストを aria-label または aria-labelledby で提供することも可能です。

<svg width="30" height="30" viewBox="0 0 30 30" role="img" aria-label="メールアイコン" xmlns="http://www.w3.org/2000/svg">
  <!-- メールアイコンのパス -->
  <path d="..."/>
</svg>

この方法は、<title> や <desc> よりもHTML側のARIA属性として代替テキストを提供したい場合に有用です。aria-label は短い説明、aria-labelledby は別の要素を参照する場合に使用します。

<img> タグでSVGを使用する場合

<img> タグの src 属性でSVGファイルを指定する場合、アクセシビリティ対応は他の画像フォーマット（JPEG, PNG）と同様に alt 属性で行います。

<img src="/images/logo.svg" alt="会社ロゴ">

この場合、SVGファイル内部の <title> や <desc> は通常スクリーンリーダーには読み上げられません。<img> タグの alt 属性が優先されます。もし装飾的なSVGであれば、alt="" と空にします。

インタラクティブなSVGの対応

SVG自体がボタンやリンクとして機能する場合（例: インタラクティブな地図の領域など）、適切なセマンティクスとキーボード操作のサポートが必要です。

• SVG全体または特定の図形要素 (<circle>, <rect>, <path> など) を <a href="..."> や <button> 要素で囲むのが最もシンプルでアクセシブルな方法です。これにより、ネイティブな要素のキーボード操作性とセマンティクスが利用できます。 html <a href="/profile"> <svg width="30" height="30" viewBox="0 0 30 30" role="img" aria-label="ユーザープロフィールへのリンク" xmlns="http://www.w3.org/2000/svg"> <!-- ユーザーアイコンのパス --> <path d="..."/> </svg> </a>
• もしSVG内部の特定の要素にクリックイベントなどを付与する場合、その要素に role="button" や role="link" などを付与し、tabindex="0" を設定してキーボードフォーカス可能にし、Enter/Spaceキーでのイベント発火をJavaScriptで実装する必要があります。また、aria-label や aria-labelledby でその要素の目的を伝える必要があります。これは複雑になりがちなので、可能な限りネイティブなHTML要素を使うことが推奨されます。

実装時の注意点とよくある落とし穴

• 装飾と内容の区別: SVGが単なる装飾か、意味を持つコンテンツかを正しく判断し、aria-hidden="true" を適切に使用することが重要です。意味を持つSVGに aria-hidden="true" をつけてしまうと、その情報が完全に失われてしまいます。
• コンテキストの考慮: アイコン単体では意味が分かりにくい場合でも、周囲のテキストによって意味が補完されることがあります。アイコンボタンの例のように、親要素のテキストラベルが十分であれば、アイコンSVGに別途詳細な説明を付ける必要がない場合もあります。
• 複雑なSVG: 図やグラフなど、非常に複雑なSVGの場合、<desc> だけでは説明しきれないことがあります。その場合は、SVGの代わりにデータをテーブルで提供したり、SVGの後に詳細な説明テキストを配置したりするなど、別の手段も検討が必要です。
• CSS背景画像: CSSの background-image プロパティでSVGを指定した場合、代替テキストを提供する方法はありません。意味を持つ画像は必ずHTMLの <img> タグまたはインラインSVGとしてマークアップしてください。

テスト方法

実装したSVGのアクセシビリティを確認するには、以下の方法を組み合わせて行うことが推奨されます。

1. スクリーンリーダーでの確認: 実際に主要なスクリーンリーダー（例: NVDA, VoiceOver, JAWS）を使用して、SVGがどのように読み上げられるかを確認します。特に aria-hidden を付与した要素が無視されるか、意味を持つSVGが正しく読み上げられるかを確認します。
2. キーボード操作での確認: インタラクティブなSVGの場合、Tabキーでフォーカスを移動させ、Enter/Spaceキーで操作できるか確認します。意図しない要素にフォーカスが当たらないか（例: aria-hidden が付与されていない装飾SVG）も確認します。
3. 開発者ツールのアクセシビリティツリー: ブラウザの開発者ツールにはアクセシビリティツリーを表示する機能があります。これにより、各要素が支援技術にどのように認識されているか、適切なロールや名前（ラベル）が付与されているかを確認できます。
4. 自動評価ツール: axe-coreなどのアクセシビリティ評価ツールは、一部のSVGに関する問題（例: aria-hidden の不適切な使用）を検出できる場合がありますが、すべての問題を見つけるわけではありません。手動での確認が最も重要です。

まとめ

SVGはウェブサイトに豊かさをもたらしますが、アクセシビリティへの配慮なしに使用すると、一部のユーザーを排除してしまう可能性があります。装飾的なSVGには aria-hidden="true" を付与し、意味を持つSVGには <title>, <desc>, aria-label, aria-labelledby などの適切な代替テキストやロール情報を提供することが基本的な対応です。インタラクティブなSVGの場合は、キーボード操作のサポートも必須となります。

今回ご紹介した具体的な実装方法を参考に、全てのユーザーにとって情報が理解しやすい、アクセシブルなSVG活用を目指していただければ幸いです。