accessibility

Web アクセシビリティ（WCAG 2.2 AA）

すべての人のために作りましょう。アクセシビリティは機能ではなく、必須要件です。

コントラスト比（WCAG AA）

要素	最小比率
通常のテキスト（< 18pt）	4.5:1
大きなテキスト（>= 18pt または 14pt 太字）	3:1
UI コンポーネントとフォーカスインジケーター	3:1

WCAG 2.2 の新しい AA 基準

基準	要件
ターゲットサイズの最小値（2.5.8）	インタラクティブなターゲットは 24x24 CSS ピクセル以上
フォーカスを隠さないこと（2.4.11）	フォーカスされた要素が少なくとも部分的に表示され、固定ヘッダーやオーバーレイに隠されない
フォーカスの外観（2.4.13）	フォーカスインジケーターは最小面積（周囲 2px）を持ち、コントラストの変化は 3:1 以上
ドラッグ操作（2.5.7）	ドラッグ操作には、すべてシングルポインターで操作できる代替手段を用意する
冗長な入力（3.3.7）	すでに提供された情報の再入力を要求しない
一貫したヘルプ（3.2.6）	ヘルプ手段（チャット、電話、FAQ）は、ページ間で同じ相対順序に配置する
アクセシブルな認証（3.3.8）	ログイン時に認知機能テストを要求しない（貼り付け、自動入力、または代替手段を許可する）

基本的なキーボード操作パターン

キー	操作
Tab / Shift+Tab	フォーカス可能な要素間を移動する
Enter / Space	ボタンとリンクを有効にする
矢印キー	ウィジェット内（タブ、メニュー）を移動する
Escape	ダイアログとメニューを閉じる
Home / End	ウィジェット内の最初／最後の項目へ移動する

要素の選択

用途	要素
ページへ移動する	<a href="...">
フォームを送信する	<button type="submit">
ダイアログを開く	<button aria-haspopup="dialog">
その他の操作	<button type="button">
独立した記事	<article>
ナビゲーションリンク	<nav>
補足情報	<aside>

よく使われる ARIA 属性

属性	目的
aria-label	表示ラベルがない場合の名前
aria-labelledby	既存のテキストをラベルとして参照する
aria-describedby	追加の説明（ヒント、エラー）
aria-live	動的な更新を通知する（polite または assertive）
aria-expanded	折りたたみ／展開の状態
aria-hidden="true"	装飾要素をスクリーンリーダーから隠す
aria-invalid	エラーがあるフォームフィールドを示す
aria-required="true"	必須フィールドを示す
aria-busy	読み込み中の状態を示す

WCAG 2.2 AA チェックリストの概要

原則	主な要件
知覚可能	画像に代替テキストを付ける、コントラスト比を 4.5:1 以上にする、色だけを唯一の識別手段にしない、テキストを 200% まで拡大可能にする、動画に字幕を付ける、prefers-reduced-motion に対応する
操作可能	キーボードで操作可能にする、フォーカスを見える状態にし、隠れないようにする、フォーカス表示を最小要件に適合させる、ターゲットを 24px 以上にする、スキップリンクを設ける、ドラッグ操作に代替手段を用意する
理解可能	<html lang="en"> を設定する、一貫したナビゲーションにする、ヘルプの配置を統一する、フォームラベルを設ける、エラーを特定できるようにする、冗長な入力を求めない、認証をアクセシブルにする
堅牢	有効な HTML を使用する、すべての UI コンポーネントに名前・ロール・値を設定する、ステータスメッセージに aria-live を使用する（SC 4.1.1 Parsing は WCAG 2.2 では廃止）

アンチパターン

アンチパターン	修正方法
<button> の代わりに <div onClick> を使う	セマンティックな HTML 要素を使用する
置き換えなしで outline: none を指定する	:focus-visible と視認できるアウトラインを使用する
ラベルとしてプレースホルダーを使う	<label> 要素を使用する
tabindex に 0 より大きい値を指定する	DOM 順序または tabindex="0" / tabindex="-1" を使用する
色だけで状態を示す	アイコンとテキストラベルを追加する
見出しレベルを飛ばす	h1-h6 を順番に使用し、CSS でスタイルを設定する
<button> に role="button" を指定する	重複する ARIA を削除する
インタラクティブ要素に aria-hidden を指定する	インタラクティブなコンテンツを隠さない
フォントサイズを固定する（px）	rem 単位を使用する
モーダルダイアログにフォーカストラップがない	フォーカスをトラップし、Escape で閉じる

よくある間違い

間違い	正しいパターン
すでに可視テキストがある要素に aria-label を追加する	代わりに aria-labelledby を使って既存の可視テキストを参照する
緊急でない更新に aria-live="assertive" を使う	ほとんどの動的コンテンツには aria-live="polite" を使い、assertive はエラーやアラートに限って使用する
情報を伝える画像に alt="" を設定する	説明的な代替テキストを指定する。空の alt は純粋な装飾画像に限って使用する
フォーカスできない要素にキーボードイベントハンドラーを追加する	ネイティブのインタラクティブ要素を使うか、tabindex="0" と role、キーイベントハンドラーを追加する
axe などの自動ツールだけでテストする	自動スキャンで検出できる問題は約 30% です。必ずキーボードのみの操作とスクリーンリーダーでのテストも行います

スクリーンリーダーとブラウザーの組み合わせ

スクリーンリーダー	ブラウザー	プラットフォーム
JAWS	Chrome	Windows
NVDA	Chrome	Windows（無料）
NVDA	Firefox	Windows（無料）
VoiceOver	Safari	macOS / iOS
TalkBack	Chrome	Android
Narrator	Edge	Windows（標準搭載）

テストのクイックガイド

方法	ツール	所要時間
キーボードのみ	マウスを非表示にし、ページ内を Tab キーで移動	5 分
スクリーンリーダー	JAWS + Chrome または NVDA + Chrome/Firefox	10 分
スクリーンリーダー	VoiceOver + Safari（macOS）	10 分
自動スキャン	axe DevTools ブラウザー拡張機能	2 分
Lighthouse	Chrome F12 > Lighthouse > アクセシビリティ	2 分
単体テスト	jest-axe（Jest）または vitest-axe（Vitest）	継続的

作業の委任

アクセシビリティに取り組む際は、次の担当に委任してください。

• design-system — カラートークンとコントラストの検証
• react-patterns — コンポーネントのパターンとフック
• testing — jest-axe の統合とテストパターン

リソース

• WCAG 2.2 クイックリファレンス
• ARIA オーサリングプラクティスガイド
• MDN アクセシビリティ
• WebAIM
• The A11y Project

参考資料

• セマンティック HTML と構造 — ドキュメントのランドマーク、見出しの階層、要素の選択、スキップリンク
• フォーカス管理 — フォーカスインジケーター、フォーカスの遮蔽防止、ダイアログのフォーカストラップ、SPA のルートフォーカス、focus-visible パターン
• ARIA パターン — アクセシブルなタブ、ライブリージョン、ARIA 属性を使用したデータテーブル
• フォームとバリデーション — ラベルの関連付け、エラーの通知、重複入力、アクセシブルな認証
• カラーとメディア — コントラスト要件、モーションの低減、ドラッグ操作の代替手段、動画の字幕、代替テキスト
• テスト — キーボードテスト、スクリーンリーダーの組み合わせ、axe DevTools、jest-axe と vitest-axe の単体テスト