理解のためのカタログ
WCAG 2.2 達成基準
WCAG 2.2 は「アクセシブルとは何を満たすことか」を定めた基準です。 ここでは各達成基準をやさしい日本語の要約でまとめ、 本サイトで実装を学べるAPG パターンと結びつけています。 規範本文は waic.jp の日本語訳(新しいタブで開きます) をご参照ください。
現在 22 件の達成基準を収録(うち WCAG 2.2 新規 6 件)。 本サイトの APG パターンに関係する基準から順に拡充しています。
知覚可能
- 1.1.1レベル A
非テキストコンテンツ
Non-text Content
画像・アイコン・図など文字でないコンテンツには、同じ意味を伝える代替テキストを用意する。装飾だけのものは支援技術から隠す。
- 1.3.1レベル A
情報及び関係性
Info and Relationships
見た目で伝えている構造や関係(見出し・リスト・表の対応・ラベルと入力欄の結びつき)を、HTML のマークアップや ARIA でプログラムにも伝わる形にする。
- 1.4.3レベル AA
コントラスト(最低限)
Contrast (Minimum)
文字と背景の明暗の差(コントラスト比)を、通常の文字で 4.5:1 以上、大きな文字で 3:1 以上にする。
- 1.4.11レベル AA
非テキストのコントラスト
Non-text Contrast
ボタンの境界やフォーム部品、状態を示すアイコンなど、操作に必要な見た目の要素も背景と 3:1 以上のコントラストを確保する。
- 1.4.13レベル AA
ホバー又はフォーカスで表示されるコンテンツ
Content on Hover or Focus
ホバーやフォーカスで出る追加表示(ツールチップ等)は、消さずに読める・ポインタを重ねられる・Esc などで消せる、の3つを満たす。
操作可能
- 2.1.1レベル A
キーボード
Keyboard
すべての機能をキーボードだけで操作できるようにする。マウス前提の独自部品でも、Tab で到達し Enter/Space/矢印などで操作できること。
- 2.1.2レベル A
キーボードトラップなし
No Keyboard Trap
キーボードで入った場所からキーボードだけで抜け出せるようにする。モーダル内でフォーカスが閉じ込められたまま戻れない状態を作らない。
- 2.2.2レベル A
一時停止、停止、非表示
Pause, Stop, Hide
自動で動く・点滅する・スクロールするコンテンツ(カルーセル等)は、ユーザーが一時停止・停止・非表示にできるようにする。
- 2.4.3レベル A
フォーカス順序
Focus Order
フォーカスが移る順番を、意味と操作が通じる自然な順序にする。ダイアログを開いたら中へ、閉じたら元の位置へ、といった移動も含む。
- 2.4.7レベル AA
フォーカスの可視化
Focus Visible
キーボードで操作している今どこにフォーカスがあるかが、見て分かるようにする。フォーカスリングを消したままにしない。
- 2.4.11レベル AA2.2 新規
隠されないフォーカス(最低限)
Focus Not Obscured (Minimum)
キーボードでフォーカスした要素が、固定ヘッダーやダイアログなどに完全に隠れて見えなくならないようにする。
- 2.5.7レベル AA2.2 新規
ドラッグ動作
Dragging Movements
ドラッグで行う操作(スライダー・並べ替え・境界の移動など)には、ドラッグを使わない代替手段(クリックやボタン)も用意する。
- 2.5.8レベル AA2.2 新規
ターゲットのサイズ(最小)
Target Size (Minimum)
クリック・タップできる対象は原則 24×24 CSSピクセル以上にするか、十分な間隔を空ける。小さすぎる操作対象を避ける。
理解可能
- 3.2.1レベル A
フォーカス時
On Focus
要素にフォーカスしただけで、ページ遷移やモーダル表示など文脈が勝手に変わることのないようにする。
- 3.2.2レベル A
入力時
On Input
値を選んだり入力しただけで予期せず文脈が変わらないようにする。変える場合は事前に知らせる。
- 3.2.6レベル A2.2 新規
一貫したヘルプ
Consistent Help
問い合わせ先やヘルプへの導線を複数ページで提供する場合、各ページで同じ相対的な位置・順序に置く。
- 3.3.1レベル A
エラーの特定
Error Identification
入力エラーを自動検出したら、どこが・何が間違っているかをテキストで具体的に伝える。
- 3.3.2レベル A
ラベル又は説明
Labels or Instructions
フォーム部品には、何を入力すればよいか分かるラベルや説明を付ける。プレースホルダーだけに頼らない。
- 3.3.7レベル A2.2 新規
冗長な入力
Redundant Entry
同じ手続きの中で一度入力した情報を再入力させない。自動入力するか、前に入力した値から選べるようにする。
- 3.3.8レベル AA2.2 新規
アクセシブルな認証(最低限)
Accessible Authentication (Minimum)
ログイン認証で、記憶やパズルのような認知機能テストだけに頼らせない。パスワード管理やコピペ等の代替を妨げない。