SVGスプライトのアクセシビリティベストプラクティス

SVGスプライトのアクセシビリティ

アクセシブルなアイコン使用は、SVGスプライトのアイコンフォントに対する主要な利点の1つです。ただし、すべてのユーザーに対してアイコンが正しく機能するよう、特定のパターンに従う必要があります。

装飾的 vs 情報的アイコン

最初の判断は、アイコンが装飾的（テキストの補足）か情報的（単独で意味を伝える）かです。

装飾的アイコンはテキストとともに表示され、視覚的な趣を加えますが新しい情報は伝えません：

<!-- 装飾的：テキストが意味を提供 -->
<button>
  <svg width="16" height="16" aria-hidden="true">
    <use href="#icon-save"/>
  </svg>
  ドキュメントを保存
</button>

aria-hidden="true"を使用してスクリーンリーダーから装飾的アイコンを隠します。

情報的アイコンは意味の唯一の指標です（アイコンのみのボタン、ステータスインジケーター）：

<!-- 情報的：アイコンが唯一のコンテンツ -->
<button aria-label="ダイアログを閉じる">
  <svg width="16" height="16" role="img" aria-hidden="true">
    <use href="#icon-close"/>
  </svg>
</button>

アイコンのみのボタンでは、SVGではなくボタン自体にaria-labelを配置します。

SVG内の<title>の使用

インタラクティブ要素内にないスタンドアロンの情報的アイコンの場合：

<svg width="16" height="16" role="img" aria-labelledby="status-title">
  <title id="status-title">接続アクティブ</title>
  <use href="#icon-check-circle"/>
</svg>

フォーカス管理

フォーカス可能な要素（ボタン、リンク）内のSVGは独立してフォーカスを受け取るべきではありません。SVGにtabindexを追加せず、IE/Edgeレガシー向けにfocusable="false"を使用してください。

色のコントラスト

アイコンの色はWCAG 2.1のコントラスト要件を満たす必要があります：

• グラフィカルオブジェクトとUIコンポーネントには3:1の比率
• アイコンがテキストの代替として機能する場合は4.5:1の比率

currentColorを使用してアイコンがテキスト色を継承するようにし、コントラスト要件を自動的に満たすようにします。