SVGアクセシビリティ：ベクターグラフィックスをインクルーシブにする方法

WCAG 2.1 要件：
- 非テキストコンテンツには代替が必要
- 色だけで情報を伝えない
- 十分なカラーコントラスト
- 劣化なしでリサイズ可能
- フォーカス可能な要素はキーボードでアクセス可能

<svg aria-hidden="true" focusable="false">
  <!-- デコラティブグラフィック -->
</svg>

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">売上成長 2025</title>
  <!-- チャートコンテンツ -->
</svg>

<svg role="img" aria-labelledby="title desc">
  <title id="title">組織図</title>
  <desc id="desc">
    CEOを頂点とした階層構造、
    3人のVPが報告、それぞれにチーム。
  </desc>
  <!-- 複雑な図表 -->
</svg>

<!-- ロール定義 -->
role="img"           <!-- 静的画像 -->
role="graphics-document"  <!-- 複雑なインタラクティブ -->

<!-- ラベル -->
aria-label="..."     <!-- シンプルな説明 -->
aria-labelledby="..." <!-- タイトル要素への参照 -->
aria-describedby="..." <!-- 詳細な説明 -->

<!-- 状態 -->
aria-hidden="true"   <!-- ATから非表示 -->
focusable="false"    <!-- フォーカスを防止 -->

<svg role="img" aria-labelledby="icon-title icon-desc">
  <title id="icon-title">警告</title>
  <desc id="icon-desc">
    注意を示す感嘆符付きの黄色い三角形
  </desc>
  <path d="..."/>
</svg>

<svg>
  <a href="/section-1" tabindex="0">
    <rect x="0" y="0" width="100" height="50"/>
    <text>セクション1</text>
  </a>
</svg>

svg a:focus,
svg [tabindex]:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

svgElement.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    // 要素をアクティブ化
  }
});

最低要件：
テキスト: 4.5:1（通常）、3:1（大きい）
グラフィックス: 背景に対して3:1
UIコンポーネント: 3:1

<!-- 悪い例：色のみ -->
<circle fill="red"/>  <!-- エラー -->
<circle fill="green"/>  <!-- 成功 -->

<!-- 良い例：パターン + 色 -->
<circle fill="red">
  <title>エラー</title>
</circle>
<use href="#checkmark" fill="green">
  <title>成功</title>
</use>

<button aria-label="ダイアログを閉じる">
  <svg aria-hidden="true" focusable="false">
    <path d="..."/>
  </svg>
</button>

<button>
  <svg aria-hidden="true"><!-- アイコン --></svg>
  ドキュメントを保存
</button>

<svg role="img" aria-label="通知：未読メッセージ3件">
  <circle cx="12" cy="12" r="10" fill="#ff0000"/>
  <text x="12" y="16" text-anchor="middle">3</text>
</svg>

@media (prefers-reduced-motion: reduce) {
  svg * {
    animation: none !important;
    transition: none !important;
  }
}

<button id="toggle-animation">
  アニメーションを一時停止
</button>

<svg class="animated-svg">
  <!-- アニメーションコンテンツ -->
</svg>

<a href="/">
  <svg role="img" aria-label="会社名 - ホーム">
    <title>会社ロゴ</title>
    <!-- ロゴパス -->
  </svg>
</a>

<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">月別売上 2025</title>
  <desc>1月の¥150万から12月の¥675万への
        売上増加を示す棒グラフ</desc>

  <!-- 代替テーブルを提供 -->
</svg>
<table class="sr-only">
  <!-- アクセシブルなデータテーブル -->
</table>

<svg class="icon" aria-hidden="true" focusable="false">
  <use href="#icon-search"/>
</svg>
<span class="icon-label">検索</span>