WCAGの構造
目指すのは AA です。A は最低限、AAA は全部を満たすものではありません。迷ったら達成基準の番号で話します。
図の中身を文字で読む
- POUR 情報が届くまでの4段階
- P 知覚できる O 操作できる U 理解できる R 堅牢
- 代替テキスト・字幕 キーボード操作 平易な言葉 妥当なマークアップ
- 十分なコントラスト 十分な時間・押せる大きさ 予測できる挙動・入力の支援 名前・役割・値を伝える
- どれか1つが欠けても、情報は届かない。
- 適合レベル A 満たさないと利用できなくなる（代替テキスト・キーボード操作）
- AA 実務の目標 コントラスト4.5:1・リフロー・フォーカス可視。法令や調達もここ
- AAA 全体での達成は W3C 自身が推奨していない
ひと目で#
- アクセシビリティ
- そもそも使えるかどうか。使いやすさの程度であるユーザビリティとは別
- WCAG
- 国際的なガイドライン。4原則、13ガイドライン、87の達成基準
- POUR
- 知覚できる、操作できる、理解できる、堅牢。どれか1つ欠けても届かない
- 適合レベル
- A（必須）／ AA（実務の目標） ／ AAA
- JIS X 8341-3
- 国内規格。現行版は WCAG 2.0 と一致
使い分け#
| こういうとき | 参照するもの |
|---|---|
| 適合を宣言する。法令や調達に対応する | WCAG 2.2 の AA |
| 国内の公的機関向け | JIS X 8341-3。AA 準拠 |
| どの段階に問題があるか整理したい | POUR の4原則 |
| 個別に判定する | 達成基準の番号。例: 1.4.3 |
対象は障害のある利用者だけではない#
恒久的（片腕がない）、一時的（骨折している）、状況的（子どもを抱いている）。片手で操作できるように作れば、3つすべてに効きます。
図の中身を文字で読む
- 恒久的 一時的 状況的
- 片腕がない 骨折している 子どもを抱いている
- ○ 片手で使える作りが、3つの場面すべてに効く
- 主要な操作を片手で届く範囲に置く。両手の同時押しや細かい長押しを前提にしない。
対象を絞って考えると、対応は特別な追加作業に見えます。同じ作りが誰の何を助けるかで考えると、優先順位が決まります。
間違えやすいところ#
- AAA をすべて満たそうとするW3C 自身が、全体での達成は勧めていない
- 自動チェックツールで終わらせる機械で検証できるのは一部の基準だけ
- 一部の基準だけ満たして「準拠」と書くそのレベルのすべてを満たす必要がある
- 最後に対応する構造に関わるので、あと付けは難しく高くつく
ariaを足せば解決すると考える正しい HTML を使うほうが確実- AA を満たせば使いやすいと考える最低限の要件であって、使いやすさは別
よく参照する達成基準#
| 番号 | 内容 | レベル |
|---|---|---|
| 1.1.1 | 非テキストコンテンツの代替 | A |
| 1.3.1 | 情報及び関係性 | A |
| 1.4.3 | コントラスト（最低限）4.5:1 | AA |
| 1.4.10 | リフロー（320px相当で横スクロールなし） | AA |
| 2.1.1 | キーボード操作 | A |
| 2.4.7 | フォーカスの可視化 | AA |
| 2.5.8 | ターゲットのサイズ 24×24 | AA |
| 4.1.2 | 名前・役割・値 | A |
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
例として、受注した5ページのサイトで、先方の要望書に「アクセシビリティ対応」とだけ書かれています。この一言のままでは、見積もりも検収もできません。何を、どのページで、どこまで満たすのかを決めるところから始めます。
決め方は3つです。レベルを1つ選ぶ、必須にする達成基準を挙げる、外すページと理由を書く。今回は AA を目標にして、1.4.3 コントラスト（AA）、2.1.1 キーボード（A）、2.4.7 フォーカスの可視化（AA）を必須にしました。会員向けの管理画面は納品範囲の外なので、除外として明記します。
外す判断そのものは責められません。書かずに黙って外すと、あとから「対応と言ったはずだ」という話になります。番号で書いておけば、双方が同じものを指せます。
自動検査に任せられるのは一部です。機械が判定できるのは、alt 属性の有無やコントラストの数値のような、形の決まったものに限られます。alt の中身が役に立つか、Tab の順が意味に沿っているかは、人が見るしかありません。検査ツールが0件と出した状態は、出発点であって到達点ではないという前提で工程を組みます。
確認する#
- 目標レベルが A・AA・AAA のどれか、1つに決まっている
- 除外するページと、外す理由が番号つきで書かれている
- 機械で見る項目と、人が見る項目が分かれている
このページで扱う語#
このページで扱う語を並べる本文では太字3 語
語の名前から引くなら用語索引へ。
- 達成基準
- WCAG において、満たしているかどうかを検証できる形で書かれた個々の要件。
- インクルーシブデザイン
- 多様な人が使えるよう、排除されている人を出発点に設計する考え方。
- ユニバーサルデザイン
- 年齢や能力にかかわらず、できるだけ多くの人がそのまま使えるように設計する考え方。
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
WCAG 2.2 の AA を目標にする。まずコントラスト・キーボード・見出し・代替テキストの4つ。
目標: WCAG 2.2 AA。コントラスト・キーボード・見出し・alt
この場面のほかの困り事と、そのまま貼れる部品は誰でも使えるようにするにまとめてある。逆引きには全188件。
達成基準で確かめる#
達成基準のうち、制作の現場で確認する頻度が高い27を選びました。レベルと担当で絞り込めます。
担当は主として確かめる人の目安。チェックはこの端末に残ります。
知覚できる
操作できる
理解できる
堅牢
この道具は JavaScript で動きます。無効の場合は、上の「よく参照する達成基準」の表を使ってください。