今日の問い
「見やすく配慮した画面」は、何を根拠に確かめますか。
30秒でつかむ
WCAGは、Web Content Accessibility Guidelinesの略です。Webコンテンツを、障害のある人にも利用しやすくするための国際的な標準です。
入口になるのが、知覚可能、操作可能、理解可能、堅牢という四原則です。英語の頭文字からPOURと呼ばれます。ただし、四原則へ分類しただけでは適合を判定できません。実装は、該当する成功基準まで下りて確認します。
30秒図解 · LESSON 25
中心モデル
POURで失敗の種類を見分ける
知覚、操作、理解、堅牢性のどこで妨げているかを分類します。
アクセス可能な体験
- 知覚可能
- 操作可能
- 理解可能
- 堅牢
CLUE · 見抜く手掛かり
誰が何の操作で止まるかを言えるか
TRAP · ありがちな罠
達成基準を点数表だけにする
原則
知覚可能とは、必要な情報を一つの感覚だけに依存させないことです。画像の代替テキストや、色だけに頼らないエラー表示が該当します。
操作可能とは、利用者がインターフェースを動かせることです。キーボードで到達できるか、現在のフォーカスが分かるか、時間制限を調整できるかを見ます。
理解可能とは、情報と操作が予測できることです。ラベル、エラーの理由、修正方法が一貫しているかを確かめます。
堅牢とは、ブラウザーや支援技術が内容を解釈できることです。見た目を似せた独自部品より、役割や状態がコードで伝わるHTMLを優先します。
WCAG 2.2には、四原則の下に13のガイドラインと、検証可能な成功基準があります。成功基準の水準はA、AA、AAAです。POURは問題を見つける索引、成功基準は確認項目と考えると扱いやすくなります。
一つのデモで数項目を満たしても、ページ全体や一連の手続きがWCAGに適合したとは言えません。適合を述べるには、対象範囲と水準を決め、該当する成功基準を漏れなく評価する必要があります。
POURの四原則、13のガイドライン、検証可能な成功基準、適合要件を定めるW3C Recommendation。
良い例と惜しい例
アクセシビリティ確認の粒度
予約変更画面で確認済みの条件だけを選び、未確認項目を残してください。
予約変更画面で確認済みの条件だけを選び、未確認項目を残してください。
チェックはこのデモ内で条件を有効にした状態を示します。
4項目中0項目を満たしています（このデモ内の状態であり、WCAG適合判定ではありません）
AIへの指示例
目的: 予約変更フローのアクセシビリティ上の懸念を洗い出す
制約: デモや自動検査だけでWCAG適合と結論しない。未確認項目は未確認と書く
参照: screens/、primary-flow.md、component-states.md、WCAG 2.2
受入条件: accessibility-audit.mdに対象画面、POUR分類、対応する成功基準、確認方法、結果、未確認事項を記す
確認問題
セルフチェック
1. 予約変更画面をPOURで分類し、四項目のデモを確認しました。次に取るべき行動はどれですか。
最終制作へ反映する
accessibility-audit.mdの監査範囲を作る
主要フローをPOURで見渡し、懸念、対応する成功基準、確認方法、結果、未確認事項をaccessibility-audit.mdへ記す。
Acceptance criteria
- 主要フローの全画面が監査対象に含まれ、対象外にした範囲には理由がある
- 結果が合格、問題あり、未確認に分かれ、デモだけを根拠に適合を宣言していない
今日のまとめ
- POURは、知覚可能、操作可能、理解可能、堅牢の四原則
- 実装確認は、懸念を該当する成功基準まで具体化して行う
- 次は、キーボード、フォーカス、ラベルを実際の操作で確かめる