アクセシビリティ

アクセシビリティとは

Web アクセシビリティ (a11y) は、視覚・聴覚・運動機能に障害のあるユーザーを含め、すべての人が Web コンテンツを利用できるようにする取り組みである。WCAG (Web Content Accessibility Guidelines) が国際標準で、日本では JIS X 8341-3 が対応規格。

WCAG の 4 原則

原則	説明	例
知覚可能	情報を認識できる	画像に alt テキスト
操作可能	UI を操作できる	キーボードで全操作可能
理解可能	内容を理解できる	明確なエラーメッセージ
堅牢	支援技術で利用できる	セマンティック HTML

実装チェックリスト

セマンティック HTML

<!-- ❌ div で全てを構築 -->
<div class="header"><div class="nav">...</div></div>

<!-- ✅ セマンティック要素を使用 -->
<header><nav aria-label="メインナビゲーション">...</nav></header>
<main><article>...</article></main>

画像の alt テキスト

<!-- 情報を伝える画像 -->
<img src="chart.png" alt="2026年の売上推移グラフ。1月から3月にかけて20%増加" />

<!-- 装飾的な画像 -->
<img src="divider.png" alt="" role="presentation" />

キーボード操作

/* ❌ フォーカスインジケーターを消さない */
:focus { outline: none; }

/* ✅ カスタムフォーカススタイル */
:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

カラーコントラスト

レベル	コントラスト比	対象
AA	4.5:1 以上	通常テキスト
AA	3:1 以上	大きなテキスト (18px+)
AAA	7:1 以上	最高レベル

ARIA 属性

<button aria-label="メニューを開く" aria-expanded="false">
  <svg>...</svg> <!-- アイコンのみのボタン -->
</button>

<div role="alert">エラーが発生しました</div>

テストツール

ツール	種類
axe DevTools	ブラウザ拡張
Lighthouse	Chrome DevTools
WAVE	Web ベース
VoiceOver / NVDA	スクリーンリーダー

React でのアクセシビリティ

// ✅ ラベルとフォームの関連付け
<label htmlFor="email">メールアドレス</label>
<input id="email" type="email" aria-required="true" />

// ✅ ライブリージョン (動的な更新を通知)
<div aria-live="polite">{message}</div>

法的要件

日本では障害者差別解消法により、公的機関の Web サイトはアクセシビリティ対応が義務。民間企業は努力義務だが、2024 年の改正で合理的配慮の提供が義務化された。

アクセシビリティの理解を深めるには関連書籍が参考になる。