理解のためのカタログ
WCAG 2.2 達成基準
WCAG 2.2 は「アクセシブルとは何を満たすことか」を定めた基準です。ここでは各達成基準をやさしい日本語の要約でまとめ、本サイトで実装を学べるAPG パターンと結びつけています。
規範本文は waic.jp の日本語訳(新しいタブで開きます) をご参照ください。
現在 86 件の達成基準を収録(うち WCAG 2.2 新規 9 件)。本サイトの APG パターンに関係する基準から順に拡充しています。
知覚可能
- 1.1.1レベル A
非テキストコンテンツ
Non-text Content
画像・アイコン・図など文字でないコンテンツには、同じ目的を果たす代替テキストを用意する。スクリーンリーダーや点字ディスプレイなど文字ベースの支援技術でも内容を伝えられるようにするためで、装飾だけの要素は逆に支援技術から隠す。CAPTCHAやテストのように代替が成立しない場合は、目的が分かる程度の説明で足りる。
- 1.2.1レベル A
音声だけ及び映像だけ
Audio-only and Video-only (Prerecorded)
収録済みの音声だけのコンテンツには、内容を伝えるテキストの代替(書き起こしなど)を用意する。映像だけのコンテンツは、テキスト代替の代わりに音声トラックで説明する方法でもよい。音声や映像がテキストの代替として明示されている場合はこの基準の対象外となる。
- 1.2.2レベル A
キャプション
Captions (Prerecorded)
動画(同期したメディア)に含まれる収録済みの音声には、セリフだけでなく、話者の識別や重要な効果音も文字で示すキャプションを付ける。聴覚に障害がある利用者が音声なしでも内容を追えるようにするための基準で、音声だけ・映像だけのコンテンツは対象外。
- 1.2.3レベル A
音声解説、又はメディアに対する代替
Audio Description or Media Alternative (Prerecorded)
収録済みの動画には、セリフの合間に映像だけで伝わる情報(画面上の文字や登場人物の動作など)を説明する音声解説を追加するか、見聞きできる内容をすべて文字にしたメディア代替のどちらかを用意する。視覚に障害がある利用者が映像情報を取りこぼさないための基準。
- 1.2.4レベル AA
キャプション
Captions (Live)
ニュース速報やライブ配信など生放送の音声にも、収録済みコンテンツと同じようにリアルタイムでキャプションを付ける。多少の遅延は避けられないが、聴覚障害のある利用者が生放送の情報を取り残されないようにする基準。
- 1.2.5レベル AA
音声解説
Audio Description (Prerecorded)
収録済みの動画には、セリフの合間に映像だけで伝わる情報を説明する音声解説を必ず用意する。1.2.3のようにメディア代替で代用することはできない、より厳しい基準。音声だけで映像の情報が十分伝わる動画(会話が中心のインタビューなど)は追加の解説が不要。
- 1.2.6レベル AAA
手話
Sign Language (Prerecorded)
収録済みの動画に含まれる音声内容全体に、手話通訳の映像を付ける。手話を第一言語とする利用者にとっては、字幕の文字よりも手話の方が理解しやすい場合があるための基準。最高難度のレベルAAAで、法令等で必須とされる場面は少ない。
- 1.2.7レベル AAA
拡張音声解説
Extended Audio Description (Prerecorded)
セリフの合間の音声解説だけでは映像の説明が足りない動画では、必要に応じて再生を一時停止してでも詳しい拡張音声解説を入れる。操作手順を示す動画など、視覚情報が密で通常の間では説明しきれない場合に有効。1.2.5より踏み込んだレベルAAAの基準。
- 1.2.8レベル AAA
メディアに対する代替
Media Alternative (Prerecorded)
収録済みの動画や映像だけのコンテンツすべてに、見聞きできる内容をすべて文字にしたメディア代替を用意する。点字ディスプレイでも読めるテキストの形で提供することで、盲ろうの利用者などにも内容を届けられる。1.2.3では選択肢の一つだったメディア代替を、必須にする厳格な基準。
- 1.2.9レベル AAA
音声だけ
Audio-only (Live)
生放送のラジオや音声だけのライブ配信にも、内容を文字で伝えるテキスト代替(リアルタイム字幕など)を用意する。動画を伴う生放送を対象とする1.2.4とは異なり、音声のみのライブコンテンツを対象にした、レベルAAAの基準。
- 1.3.1レベル A
情報及び関係性
Info and Relationships
見た目で伝えている構造や関係(見出し・リスト・表の対応・ラベルと入力欄の結びつき)を、HTML のマークアップや ARIA でプログラムにも伝わる形にする。スクリーンリーダー利用者は視覚的なレイアウトを見られないため、色や余白だけで表現された構造は伝わらない。色や太字だけで見出しに見せかける実装はこの基準に抵触する典型例。
- 1.3.2レベル A
意味をなすシーケンス
Meaningful Sequence
段組みやCSSでの配置により見た目の並び順が変わっても、意味が通る正しい読み上げ順序をプログラムで判定できるようにする。スクリーンリーダーやキーボード操作はDOM上の順序をたどるため、CSSだけで視覚順を入れ替えるとDOM順とずれて意味が通らなくなることがある。
- 1.3.3レベル A
感覚による特性
Sensory Characteristics
「右上の緑のボタン」のように色・形・位置・音などの感覚的特徴だけで操作方法を説明せず、テキストラベルなど別の手がかりも併せて示す。色覚特性や視覚障害のある利用者は、こうした感覚的特徴だけの手がかりを認識できないため。色や形自体を使うのは問題なく、文字による説明を併記していれば基準を満たす。
- 1.3.4レベル AA
向き
Orientation
縦向き・横向きのどちらか一方の画面の向きだけに表示や操作を固定しない。車椅子や機材にスマートフォンを固定して使う利用者は端末を回転できないことがあるため。ピアノ鍵盤アプリや小切手のスキャンのように、特定の向きが機能上本質的に必要な場合は例外となる。
- 1.3.5レベル AA
入力目的の特定
Identify Input Purpose
氏名・住所・生年月日などユーザー情報を集める入力欄は、autocomplete属性などでその目的をプログラムに伝え、自動入力やアイコン表示による支援を可能にする。対象はWCAGで定義された入力目的のリストに限られる。記憶や読み書きに困難がある利用者にとっても、繰り返し同じ情報を手入力する負担を減らせる。
- 1.3.6レベル AAA
目的の特定
Identify Purpose
UIコンポーネント・アイコン・ページ内の領域(ナビゲーションなど)の目的を、ランドマークや適切な要素・属性でプログラムに伝える。目的が判別できれば、利用者になじみのある記号や簡易な表示への置き換え、翻訳支援などが可能になる。マークアップ言語で実装されたコンテンツに適用されるAAA基準。
- 1.4.1レベル A
色の用途
Use of Color
色の違いだけで情報を伝えたり、操作を指示したり、視覚要素を区別させたりしない。エラー箇所を赤色だけで示すのではなく、アイコンやテキストも併用するなど、色覚に個人差があっても伝わる手段を用意する。色を使うこと自体は問題なく、色以外の手がかりを追加することが求められる。
- 1.4.2レベル A
音声の制御
Audio Control
3秒より長く自動再生される音声には、一時停止・停止できる仕組みか、システム全体の音量とは別に音量を調整できる仕組みのどちらかを用意する。自動再生音声はスクリーンリーダーの読み上げ音声と衝突し操作を妨げるため、利用者がすぐに止められることが重要。
- 1.4.3レベル AA
コントラスト
Contrast (Minimum)
文字と背景の明暗の差(コントラスト比)を、通常の文字で 4.5:1 以上、大きな文字(18ポイント以上又は14ポイント太字以上)で 3:1 以上にする。装飾目的の文字やロゴ・ブランド名の一部の文字、非アクティブな部品の文字には適用されない。
- 1.4.4レベル AA
テキストのサイズ変更
Resize Text
テキストは、支援技術を使わなくてもブラウザの機能だけで200%まで拡大でき、拡大しても内容や機能が失われないようにする。低視力の利用者がブラウザズームだけで読めることが目的で、キャプションや文字画像は対象外。
- 1.4.5レベル AA
文字画像
Images of Text
文字は画像化せずテキストで表示する。ただし、フォントや色などを利用者が調整できるよう作られている場合や、ロゴのように見た目自体が意味を持ち必要不可欠な場合は例外とする。テキストであれば拡大や配色変更、読み上げに柔軟に対応できる。
- 1.4.6レベル AAA
コントラスト
Contrast (Enhanced)
文字と背景の明暗の差(コントラスト比)を、通常の文字で 7:1 以上、大きな文字(18ポイント以上又は14ポイント太字以上)で 4.5:1 以上にする。1.4.3(AA)より厳しい基準で、装飾文字やロゴ、非アクティブな部品には同様に適用されない。
- 1.4.7レベル AAA
背景音の小さい又はない音声
Low or No Background Audio
発話が中心の収録音声(CAPTCHAや音のロゴ、音楽表現を意図したものは除く)は、背景音をなくすか、消せるようにするか、発話より 20dB 以上小さくする。20dBの差はおおむね発話の4分の1程度の音量に相当する。
- 1.4.8レベル AAA
視覚的提示
Visual Presentation
長い文章のブロックには、前景色と背景色を選べる、幅を80文字(全角40字)までにできる、両端揃えにしない、行送りをフォントサイズの1.5倍以上・段落間隔をその1.5倍以上取れる、200%拡大しても横スクロールが不要、という表示に利用者が切り替えられるようにする。既定でこの見た目にする必要はない。
- 1.4.9レベル AAA
文字画像
Images of Text (No Exception)
文字画像は、純粋な装飾目的か、ロゴのように見た目自体が伝達内容にとって必要不可欠な場合を除いて一切使わない。同じ文字画像を扱うAA基準の1.4.5と異なり、利用者が見た目を調整できるという理由だけでは例外にならない、より厳しいAAA基準。
- 1.4.10レベル AA
リフロー
Reflow
幅320CSSピクセル(縦スクロールのコンテンツ)・高さ256CSSピクセル(横スクロールのコンテンツ)まで狭めても、内容や機能を失わず二次元スクロールなしで使えるようにする。1280×1024のビューポートを400%拡大した状態に相当し、地図や表など二次元配置が本質的なコンテンツは例外とする。
- 1.4.11レベル AA
非テキストのコントラスト
Non-text Contrast
ボタンの境界やフォーム部品、フォーカスやホバーなどの状態を示すアイコンなど、操作や理解に必要な見た目の要素は、隣接する色と 3:1 以上のコントラストを確保する。非アクティブな部品や、制作者が変更していないブラウザ標準の見た目、写真など特定の外観自体が必須なグラフィックは対象外。
- 1.4.12レベル AA
テキストの間隔
Text Spacing
行の高さをフォントサイズの1.5倍以上、段落の間隔を2倍以上、文字間隔を0.12倍以上、単語の間隔を0.16倍以上に利用者が広げても、テキストが欠けたり機能が失われたりしないようにする。該当するプロパティが存在しない言語・文字体系の組み合わせは、その基準値の対象外となる。
- 1.4.13レベル AA
ホバー時又はフォーカス時のコンテンツ
Content on Hover or Focus
ホバーやフォーカスで表示される追加コンテンツ(ツールチップ等)は、ポインタを動かさず Esc などで消せる、ポインタを追加コンテンツ上に重ねても消えない、ホバーやフォーカスを外すかユーザーが消すまで表示され続ける、の3条件を満たす。ブラウザ標準の title 属性ツールチップなど、UA制御の表示は対象外。
操作可能
- 2.1.1レベル A
キーボード
Keyboard
すべての機能を、個々のキー操作に特定のタイミングを要求せずキーボードだけで操作できるようにする。マウス前提の独自部品でも、Tab で到達し Enter/Space/矢印などで操作できること。例外は自由手書きの署名のように機能そのものが軌跡入力を必要とする場合のみで、単に手書き入力を採用したという理由だけでは例外にならない。
- 2.1.2レベル A
キーボードトラップなし
No Keyboard Trap
キーボードで入った場所からキーボードだけで抜け出せるようにする。モーダル内やカスタムウィジェットでフォーカスが閉じ込められたまま戻れない状態を作らない。キーボード操作しかできない利用者には抜け出す代わりの手段がないため、Escキー等の標準的な方法で抜けられないなら、抜け方を利用者に明示する。
- 2.1.3レベル AAA
キーボード
Keyboard (No Exception)
すべての操作をキーボードだけで行えるようにする。2.1.1と異なり、自由に線を描く操作のように軌跡や個々のキーストロークのタイミングに依存する機能であっても例外を認めない、より厳格な基準。達成が難しく、AAAの中でも適用場面が限られる基準の一つ。
- 2.1.4レベル A
文字キーによるショートカット
Character Key Shortcuts
1文字だけで発動するショートカットキー(例: 「s」で検索欄にフォーカス)を実装する場合、無効化・別のキーへの再割り当て・そのUI要素にフォーカスがある時だけ有効、のいずれかを用意する。音声入力ユーザーが話した言葉で誤ってショートカットが実行されるのを防ぐほか、手の震えなどで誤操作しやすい利用者の保護にもなる。
- 2.2.1レベル A
期限調節可能
Timing Adjustable
自動ログアウトなど制限時間のある処理には、解除・少なくとも10倍への調整・警告と20秒以上の猶予を伴う延長、のいずれかをユーザーに提供する。認知障害や運動障害のある利用者は読解や入力に時間がかかりやすいため。リアルタイムのイベントや制限時間そのものが本質的に必要な場合(オークション等)、20時間を超える制限時間は例外。
- 2.2.2レベル A
一時停止・停止・非表示
Pause, Stop, Hide
5秒以上自動的に始まり、他のコンテンツと並行して表示される動き・点滅・スクロール(カルーセル等)は、ユーザーが一時停止・停止・非表示にできるようにする。自動更新するコンテンツは、更新頻度を調整できる手段でもよい。動きが本質的に必要な場合は例外。読解や集中の妨げになりやすい利用者への配慮のための基準。
- 2.2.3レベル AAA
期限なし
No Timing
コンテンツを操作するのに制限時間を設けない。ただし、同期メディア(動画など)やリアルタイムのイベントには適用しない。解除・調整・延長のいずれかの手段があれば足りる2.2.1とは違い、そもそも制限時間を課さないことを求める、より厳格なAAA基準。
- 2.2.4レベル AAA
割込み
Interruptions
通知やポップアップなどの割り込みを、ユーザーが後回しにしたり止めたりできるようにする。作業中に強制的に注意をそらされると、記憶や集中の持続に困難のある利用者は元の作業に戻れなくなりやすいため。安全に関わる緊急の警告など、即座の対応が必要な割り込みは例外。
- 2.2.5レベル AAA
再認証
Re-authenticating
ログインセッションが期限切れになっても、再ログイン後に入力していたデータを失わずに作業を続けられるようにする。スクリーンリーダー利用者や運動障害のある利用者は入力に時間がかかりやすく、セキュリティ目的のタイムアウトで直前の作業を失うと不利益が大きいため。
- 2.2.6レベル AAA
タイムアウト
Timeouts
無操作が続くとデータが失われる可能性がある場合、その残り時間をあらかじめ利用者に伝える。記憶や注意の持続に困難のある利用者が、気づかないうちに入力内容を失わずに済むようにするため。ただし20時間以上データが保持される場合は対象外。
- 2.3.1レベル A
3 回の閃光、又は閾値以下
Three Flashes or Below Threshold
1秒間に3回を超えて点滅する要素を置かない。置く場合は、一般閃光閾値・赤色閃光閾値を下回る強さに抑える。光過敏性発作の誘発を防ぐためで、動画に限らずアニメーションや点滅する広告など、ページ内のあらゆるコンテンツが対象になる。
- 2.3.2レベル AAA
3 回の閃光
Three Flashes
1秒間に3回を超えて点滅する要素を、閾値に関わらず一切含めない。2.3.1と異なり、閃光の強さや色を抑えても免除されない、例外のない厳格な基準。動画かアニメーションかを問わず、ページ全体のコンテンツに適用される。
- 2.3.3レベル AAA
インタラクションによるアニメーション
Animation from Interactions
スクロールやクリックなどの操作によって引き起こされる装飾的なアニメーション(パララックス効果等)を、無効にできるようにする。前庭障害のある利用者は、こうした動きでめまいや吐き気などの体調不良を起こすことがあるため。データの可視化などアニメーション自体が伝える情報に不可欠な場合は対象外。
- 2.4.1レベル A
ブロックのバイパス
Bypass Blocks
ナビゲーションメニューなど複数ページで繰り返されるブロックを読み飛ばし、本文へ直接移動できる手段(スキップリンク・ランドマーク・見出し構造など)を用意する。キーボードやスクリーンリーダーの利用者は、ページを開くたびに同じメニューを辿らされると本文にたどり着くまでの負担が大きいため。
- 2.4.2レベル A
ページタイトル
Page Titled
各ページに、内容や目的が分かるタイトル(title要素)を付ける。スクリーンリーダー利用者はページを開いた瞬間に読み上げられるタイトルで内容を把握するため、タブがたくさん並んだ状態でもページを区別できるようにする役割も果たす。
- 2.4.3レベル A
フォーカス順序
Focus Order
フォーカスが移る順番を、意味と操作が通じる自然な順序にする。ダイアログを開いたら中へ、閉じたら元の位置へ、といった移動も含む。ページ全体を一度に見渡せないスクリーンリーダー利用者にとって、視覚的な並びと異なる予測不能な順序は特に混乱を招きやすい。
- 2.4.4レベル A
リンクの目的
Link Purpose (In Context)
リンクの行き先が、リンクテキスト単体か、その前後の文脈(周辺の文章や見出しなど)と合わせれば分かるようにする。「こちら」のようなリンクテキストでも、文脈から目的が判断できれば許容される。ただし文脈は見た目の近さではなく、プログラムで関連付けられた情報である必要がある。
- 2.4.5レベル AA
複数の経路
Multiple Ways
サイト内のあるページに到達する方法を、サイト内検索・サイトマップ・ナビゲーションメニューなど複数用意する。ユーザーによって得意な探し方が異なるため、経路を1つに絞らないことが目的。手続きの途中のステップやその結果のページなど、経路が1つしかないのが自然なページは対象外。
- 2.4.6レベル AA
見出し及びラベル
Headings and Labels
見出しやフォームのラベルは、内容や目的が一目で伝わる具体的な文言にする。「詳細」ではなく「配送先住所の詳細」のように。曖昧なラベルはスクリーンリーダー利用者が各セクションや入力欄の役割を素早く把握する妨げになる。
- 2.4.7レベル AA
フォーカスの可視化
Focus Visible
キーボードで操作している今どこにフォーカスがあるかが、見て分かるようにする。フォーカスリングを消したままにしない。少なくとも1つの操作モードで見えていればよく、すべてのモードで常時表示されている必要はない。
- 2.4.8レベル AAA
現在位置
Location
パンくずリストやサイトマップのハイライトなどで、サイト内の今どこにいるかをユーザーに伝える。ページ数の多いサイトや階層の深いナビゲーションで道に迷うのを防ぐのが狙いで、単一ページの単純なサイトでは重要度が下がる。
- 2.4.9レベル AAA
リンクの目的
Link Purpose (Link Only)
リンクテキスト単独だけで行き先が分かるようにする。2.4.4と違い周辺の文脈に頼らず、スクリーンリーダーのリンク一覧機能で拾い読みしても意味が通ることを求める、より厳しい基準。ただし健常者が読んでも目的が分からないリンクは対象外。
- 2.4.10レベル AAA
セクション見出し
Section Headings
長いページのコンテンツを、見出しを使って意味のあるまとまり(セクション)に整理する。見出しは文書構造を示すものであり、ボタンやタブなどのUIコンポーネントのラベル付けとは別の基準(4.1.2)で扱われる点に注意。
- 2.4.11レベル AA2.2 新規
隠されないフォーカス
Focus Not Obscured (Minimum)
キーボードでフォーカスした要素が、固定ヘッダーやダイアログなどコンテンツ制作者が作成した要素に完全に隠れて見えなくならないようにする。ユーザー自身が開いたパネルなどによる重なりは対象外で、フォーカス移動なしに要素を再表示できれば許容される。
解説あり
- 2.4.12レベル AAA2.2 新規
隠されないフォーカス
Focus Not Obscured (Enhanced)
キーボードでフォーカスした要素は、固定ヘッダーやダイアログなどコンテンツ制作者が作成した要素に一部たりとも隠れないようにする。「完全には隠れない」ことを求める2.4.11より厳しく、部分的な重なりも許さない。
- 2.4.13レベル AAA2.2 新規
フォーカスの外観
Focus Appearance
フォーカスインジケーターを、十分な大きさ(太さ2CSSピクセル相当以上の外周)とコントラスト(フォーカス時と非フォーカス時で3:1以上)で表示する。細い枠線の色がわずかに変わる程度では、低視力者には気づきにくいため。ブラウザ標準の表示を制作者が変更していない場合は例外。
- 2.5.1レベル A
ポインタジェスチャ
Pointer Gestures
ピンチズームやスワイプなど複数指・軌跡ベースのジェスチャーで行う操作には、単一の指やクリックだけでできる代替手段(拡大縮小ボタンや前後ボタンなど)も用意する。震えなど手の動きが安定しない人には複雑な軌跡操作が難しいため。署名入力のように軌跡そのものが本質的に必要な場合は例外。
- 2.5.2レベル A
ポインタキャンセル
Pointer Cancellation
ボタンなどの操作は、指を離した瞬間(アップイベント)で確定させ、押した瞬間(ダウンイベント)で即座に実行しない。押し間違えても、離す前に指をずらせば操作をキャンセルできるようにする。誤操作が確定してしまうと運動機能に障害のある人ほど取り消しが難しいため。
- 2.5.3レベル A
ラベルを含む名前
Label in Name
ボタンやリンクに見た目のテキスト(例: 「送信」ボタン)がある場合、そのテキストを支援技術に伝わる名前(accessible name)にも含める。音声操作ユーザーが画面の文字を読み上げて操作できるようにするため。ラベルのテキストは名前の先頭に置くのが望ましい。
- 2.5.4レベル A
動きによる起動
Motion Actuation
端末を振る・傾けるなどの動作で操作できる機能には、通常のボタン等でも操作できる代替手段を用意し、動きへの反応を無効化できるようにする。端末を固定して使う人や、意図せず動かしてしまう人が誤作動に悩まされないようにするため。歩数計のように動きの検出自体が機能の本質である場合は例外。
- 2.5.5レベル AAA
ターゲットのサイズ
Target Size (Enhanced)
クリック・タップできる対象を、44×44 CSSピクセル以上にする。2.5.8(24×24px以上)より大きなサイズを求める、より厳しい基準で、手が震える人や指の太い人でも狙って押しやすくするのが目的。文中のインラインリンクや、ブラウザ標準サイズのままの要素などは例外。
- 2.5.6レベル AAA
入力メカニズムの共存
Concurrent Input Mechanisms
タッチ操作専用に固定するなど、そのプラットフォームで使える入力方法(キーボード・マウス・タッチ等)を制限しない。手の震えなど特定の入力方法に頼らざるを得ない利用者が、状況に応じて使いやすい方法を選べるようにする。機能上必要・セキュリティ上必要な制限や、利用者自身が選んだ設定は例外として認められる。
- 2.5.7レベル AA2.2 新規
ドラッグ動作
Dragging Movements
ドラッグで行う操作(スライダーのつまみ移動・並べ替え・ペイン境界のリサイズなど)には、単一クリックやボタンなどドラッグを使わない代替手段も用意する。手が震える人やスイッチデバイスの利用者は、押しながら正確に動かす操作が難しいか不可能なため。お絵かきアプリの手書きのようにドラッグの軌跡自体が機能の本質である場合は例外となる。
解説あり
- 2.5.8レベル AA2.2 新規
ターゲットのサイズ
Target Size (Minimum)
クリック・タップできる対象は原則 24×24 CSSピクセル以上にするか、隣接ターゲットとの間に十分な間隔(オフセット円が重ならない距離)を空ける。手が震える人や運動機能に障害がある人が誤操作なく押せるようにするため。文中のインラインリンクや、スタイル未変更のブラウザ標準UI、同一ページ内に同等の大きい代替操作がある場合は例外となる。
解説あり
理解可能
- 3.1.1レベル A
ページの言語
Language of Page
ページ全体のデフォルトの言語(例: 日本語なら lang="ja")を html 要素に指定し、プログラムが自動的に識別できるようにする。スクリーンリーダーが正しい発音・イントネーションで読み上げるために欠かせない情報であり、指定がないと誤った言語で読まれたり機械翻訳の精度が落ちたりする。
- 3.1.2レベル AA
一部分の言語
Language of Parts
ページ内で一部だけ別の言語(英語の引用など)になっている箇所には、その部分に lang 属性を指定する。スクリーンリーダーがその部分だけ発音ルールを切り替えて正しく読み上げられるようにするために必要。固有名詞・専門用語・言語が特定できない語・周辺の文章に溶け込んだ外来語は対象外。
- 3.1.3レベル AAA
一般的ではない用語
Unusual Words
慣用句や専門用語、通常と異なる意味で使われている語句など一般的でない言い回しには、用語集・インライン注記・辞書へのリンクなど、意味を確認できる手段を用意する。認知障害や学習障害のある人、非母語話者など幅広い利用者の理解を助ける。
- 3.1.4レベル AAA
略語
Abbreviations
略語(頭字語・頭文字語を含む、単語や語句を短縮した表現)には、正式名称や意味が分かる説明(abbr要素や用語集、初出時の展開表記など)を用意する。読み手が意味を推測できない場合に確認できる手段を用意するための基準。すでに一般語として定着した略語(レーザー等)は対象外。
- 3.1.5レベル AAA
読解レベル
Reading Level
固有名詞や題名を除いた本文が、日本で言う中学校卒業程度を超える読解力を必要とする場合、内容を補足する説明、または平易に書き直した版のどちらかを用意する。認知障害や学習に困難のある人が主要な情報にアクセスできるようにするための基準。
- 3.1.6レベル AAA
発音
Pronunciation
同じ表記でも読み方によって意味が変わる語(同形異音語や複数の読み方がある漢字など)には、文脈だけでは判断できない場合に正しい発音を示す手段を用意する。ふりがな(ルビ)、音声での読み上げ、発音を説明するリンク先などが実装例として挙げられる。
- 3.2.1レベル A
フォーカス時
On Focus
フォームやボタンなどの要素にフォーカスしただけで、ページ遷移やモーダル表示、フォームの自動送信といった文脈の変化が勝手に起こらないようにする。キーボード操作やスクリーンリーダー利用者はTabキーで次々に要素を移動するため、フォーカスだけで画面が変わると現在地を見失いやすい。
- 3.2.2レベル A
入力時
On Input
チェックボックスの選択や入力欄への文字入力、セレクトボックスの選択といった操作だけで、予期せずページ遷移や自動送信などの文脈の変化が起こらないようにする。変化を起こす場合は、操作する前にその挙動を利用者へ明確に知らせておく。
- 3.2.3レベル AA
一貫したナビゲーション
Consistent Navigation
サイト内の複数ページで繰り返し使うナビゲーション(ヘッダーメニューなど)は、ページが変わっても項目の相対的な並び順を変えずに配置する。利用者がメニューの順序を毎回覚え直さずに、次に探す場所を予測できるようにするための基準。利用者自身が並び順をカスタマイズした場合は対象外。
- 3.2.4レベル AA
一貫した識別性
Consistent Identification
同じ機能を持つボタン・リンク・アイコンには、ページが変わっても同じラベルや名前を一貫して使う。検索ボタンを「検索」「探す」のようにページごとに呼び方を変えない。認知障害のある人やスクリーンリーダー利用者が、名前を頼りに機能を素早く見分けられるようにするための基準。
- 3.2.5レベル AAA
要求による変化
Change on Request
フォーカス移動や入力に反応して新しいウィンドウが開く・自動送信される・自動リダイレクトされるといった文脈の変化は、利用者が明示的に求めた時だけ起こすか、その変化を止める手段を用意する。ページ全体を一度に見渡せないスクリーンリーダー利用者ほど、予期しない変化で混乱しやすいための基準。
- 3.2.6レベル A2.2 新規
一貫したヘルプ
Consistent Help
問い合わせ先・チャット・FAQなどのヘルプ機構を複数ページで提供する場合、各ページで同じ相対的な位置・順序に置く。認知障害のある人や初めてサイトを訪れる人が、困ったときに探し直さずヘルプへたどり着けるようにするための基準。利用者自身が位置をカスタマイズした場合は対象外。
解説あり
- 3.3.1レベル A
エラーの特定
Error Identification
入力エラーを自動検出した場合、どこが・どう間違っているかをテキストで具体的に利用者へ伝える。色や記号の変化だけで済ませると、色を判別しにくい人やスクリーンリーダー利用者に伝わらない。なお自動検出そのものは必須ではなく、検出する仕組みを備えた場合にのみ適用される基準である。
- 3.3.2レベル A
ラベル又は指示
Labels or Instructions
入力を求めるすべてのフォーム部品に、何を入力すればよいか分かるラベルや説明を付ける。プレースホルダーは入力を始めると消えたり支援技術に伝わらなかったりするため、単独の代替にはできない。必須項目や特定の入力形式(例:西暦4桁)を求める場合は、その旨も明示する。
- 3.3.3レベル AA
エラーの修正提案
Error Suggestion
入力エラーを自動検出し、修正方法が推測できる場合は「日付はYYYY-MM-DD形式で」のように具体的な提案を示す。3.3.1が「どこが誤りか」を伝えるのに対し、この基準は「どう直せばよいか」まで踏み込む。ただし正解を示すとセキュリティや目的を損なう場合(パスワード欄など)は対象外。
- 3.3.4レベル AA
誤り防止
Error Prevention (Legal, Financial, Data)
契約の締結・支払いの確定、ユーザーが管理するデータの削除や変更、試験の解答送信など取り返しのつかない操作では、「取り消せる」「入力を自動チェックする」「送信前に確認できる」のいずれか1つを用意すればよい。3つすべては不要で、代表的な実装は送信前の確認画面である。
- 3.3.5レベル AAA
ヘルプ
Help
入力中のフィールドや操作に紐づく、その場に応じたヘルプ(説明文や問い合わせ手段)を提供し、利用者が作業を中断してヘルプページを探し回らずに済むようにする。サイト全体の汎用FAQへのリンクだけでは満たしたことにならない。認知・学習に困難のある利用者に特に効果が大きい、レベルAAAの基準。
- 3.3.6レベル AAA
誤り防止
Error Prevention (All)
利用者が情報を送信するページ全般で、3.3.4 と同じく「取り消せる」「自動チェック」「送信前の確認」のいずれかを用意する。法的・金融・データ操作に限らず、コメント投稿やメルマガ登録のような一見リスクの低いフォームも対象になる。レベルAAAのため必須ではないが、誤送信の被害を全体的に減らせる。
- 3.3.7レベル A2.2 新規
冗長な入力項目
Redundant Entry
同じ一連の手続きの中で一度入力した情報は、自動入力するか前の値から選択できるようにし、利用者に再入力させない。同じ情報を繰り返し打ち直す負担は、認知・記憶や運動機能に困難がある人ほど大きい。ただしパスワード確認欄のように再入力自体に意味がある場合やセキュリティ上の理由、情報が失効した場合は例外となる。
解説あり
- 3.3.8レベル AA2.2 新規
アクセシブルな認証
Accessible Authentication (Minimum)
ログイン等の認証手順で、パスワードの暗記や画像の書き写しのように記憶・転記を要求する認知機能テストだけに頼らせない。貼り付け禁止(onpaste無効化)やパスワードマネージャーを妨げる実装は避ける。物体認識CAPTCHA(写真から選ぶ)や本人が登録したコンテンツの識別は、このレベルでは例外として認められる。
解説あり
- 3.3.9レベル AAA2.2 新規
アクセシブルな認証
Accessible Authentication (Enhanced)
ログイン等の認証手順の各ステップで、記憶・計算・パズルなどの認知機能テストを必須にしない。3.3.8では認められていた物体認識型CAPTCHAや本人コンテンツの識別も、このレベルでは例外にならない。実質的にパスキーや生体認証など、認知負荷のない代替手段を用意することが求められる。
堅牢
- 4.1.1削除済み
構文解析
Parsing
この達成基準は WCAG 2.2 で削除されました。
- 4.1.2レベル A
名前 (name)・役割 (role)・値
Name, Role, Value
すべてのUI部品について、名前・役割・状態や値が支援技術にプログラム的に伝わるようにし、値や状態が変化した際もその変更が通知される必要がある。標準のHTML要素(button、inputなど)は基本的にこの基準を満たしており、divやspanで自作したカスタム部品にARIA属性で補うことが主な対応となる。
- 4.1.3レベル AA
ステータスメッセージ
Status Messages
「保存しました」「3件ヒット」のような状態変化を、利用者のフォーカスを移動させずに支援技術へ伝える。live region(aria-live や role="status" 等)を使うのが代表的な実装で、要素をあらかじめDOM上に用意しておきそこにメッセージを追加すると、多くの環境で確実に読み上げられる。ページ全体の遷移のような「コンテキストの変化」を伴う通知はこの基準の対象外。