WCAG 2.2 の新しい達成基準をざっくりと理解する

この記事は、アクセシビリティ Advent Calendar 2023 の19日目の記事です。

2023年10月5日付で W3C 勧告となった WCAG (Web Content Accessibility Guidelines) 2.2 について、当サイトでは先に、新しく追加された達成基準を取り急ぎの私訳にてご紹介しました (参考記事 : WCAG 2.2 Recommendation (勧告))。正式な日本語訳は、私も招聘専門家として参加しているウェブアクセシビリティ基盤委員会 (WAIC) 翻訳作業部会で別途作業中ですが、この記事では主に WCAG 2.2 になじみのない方向けに、新しい達成基準が求めていることとその理由について、大まかに噛み砕いた形でまとめてみたいと思います。

この記事をまとめるにあたっては、WCAG 2.2 Understanding Docs (解説書) を参考にしました。下記の文中で、達成基準ごとにリンクが設けられていますが、それぞれ該当する Understanding Docs のページを参照できるようになっています。リンク先は英語ですが、これら Understanding Docs についても、WAIC 翻訳作業部会で日本語訳に取り組む予定です。

Focus Not Obscured / 隠されないフォーカス

達成基準 2.4.11 (レベル AA) および 2.4.12 (レベル AAA) にて規定されています。

達成基準が求めていること :
フォーカスが当たっている箇所が、他のコンポーネント (たとえばスティッキーヘッダーやフッター、モードレスダイアログなど) によって覆い隠されることなく、常に視認できるようにする。
  • 達成基準 2.4.11 (レベル AA) では、フォーカス箇所がほんの部分的にでも視認できていれば OK。
  • 達成基準 2.4.12 (レベル AAA) では、フォーカス箇所が一部たりとも覆い隠されることなく、完全に視認できていることが求められる。
その理由 :
キーボード操作に依存するユーザーにとって、何がフォーカスされているかを視認できることが不可欠なため。

Focus Appearance / フォーカスの外観

達成基準 2.4.13 (レベル AAA) にて規定されています。

達成基準が求めていること :
フォーカスされている箇所を視覚的に示すフォーカスインジケーターには、十分な大きさ (基本的には 2 CSS ピクセルの太さの外周) と十分な色のコントラスト比 (非フォーカス時とフォーカス時との間で 3:1 以上の差異) を採用することで、フォーカスが当たっていることを視認しやすくする。
その理由 :
キーボード利用者 (高齢者やロービジョンを含む) にとって、フォーカスインジケーターの変化 (非フォーカス時とフォーカス時との違い) が視覚的に明確でないと、どこにフォーカスが当たっているかを識別することが難しくなるため。

なお、フォーカスインジケーターの色と隣接する背景色とのコントラスト比は、この達成基準の対象ではなく別の達成基準 (1.4.11「比テキストのコントラスト」) で規定されており、こちらも同時に満たす必要があります。

Dragging Movements / ドラッグ動作

達成基準 2.5.7 (レベル AA) にて規定されています。

達成基準が求めていること :
ドラッグ操作で使用する機能に対して、クリック (タップ) など単一のポインタ操作でも利用できるようにする。
その理由 :
マウスを使ってドラッグ操作をすることが困難なユーザー (身体的な障害を抱えている、高齢である、など) の利用を排除しないため。

ドラッグ操作で使用する機能を、キーボード操作でも利用可能にすることは、この達成基準の対象ではなく別の達成基準 (2.1.1「キーボード」および 2.1.3「キーボード (例外なし)」) で規定されています。また、軌跡ベースのジェスチャ (起点と終点だけが問われるドラッグ操作と異なり、起点から終点に至る途中の経路も問われる操作) についても、この達成基準の対象ではなく別の達成基準 (2.5.1「ポインタのジェスチャ」) で規定されています。

Target Size / ターゲットのサイズ

達成基準 2.5.8 (レベル AA) および 2.5.5 (レベル AAA) で規定されています。

達成基準が求めていること :
クリック (タップ) できるボタンなどのオブジェクトには、十分な大きさを確保する。
  • 達成基準 2.5.8 (レベル AA) では、最低限の要件として、24 × 24 CSS ピクセル相当以上が求められる。
  • 達成基準 2.5.5 (レベル AAA) では、主に指を用いたタッチ操作を想定して、44 × 44 CSS ピクセル以上が求められる。
その理由 :
精緻なクリック (タップ) 操作をすることが困難なユーザー (運動能力に制約がある、高齢である、モバイル環境で指によるタッチを用いている、など) の利用をサポートするため。

なお、達成基準 2.5.5 (レベル AAA) は、既に WCAG 2.1 から存在しています。

Consistent Help / 一貫したヘルプ

達成基準 3.2.6 (レベル A) で規定されています。

達成基準が求めていること :
ヘルプ機能 (FAQ やユーザーサポートなど) へのアクセス手段は、同一サイトのどのページにおいても、同じ場所にあるように配置して、見つけやすくする。
その理由 :
認知や記憶に制約があるユーザーが、困ったときにスムーズにヘルプ機能にたどり着けるようにするため。

Redundant Entry / 冗長な入力

達成基準 3.3.7 (レベル A) で規定されています。

達成基準が求めていること :
同一セッションにおいて、ユーザーが一度入力した情報は、以後、自動的に再入力できる、あるいは選択によって再入力できるようにする。
  • 自動的な再入力は、あくまでもウェブサイト側に保存された情報を用いる。ブラウザ側の autocomplete では、この達成基準を満たすことにはならない。
  • 選択による再入力の例としては、ドロップダウンからの選択、EC 決済の「請求先住所は配送先と同じ」にチェックを入れる/入れないの選択、同じページ上にある入力済情報 (テキスト) を選択してのコピー＆ペースト入力、などがある。
その理由 :
認知や記憶に制約があるユーザーにとって、一度入力した情報を繰り返し正確に思い出して、同じ内容で再入力するのは、負荷が高いため。

なおこの達成基準は、身体的な障害によって音声入力やスイッチコントロールに依存するユーザーにとっても、入力操作の負荷軽減につながります。

Accessible Authentication / アクセシブルな認証

達成基準 3.3.8 (レベル AA) および 3.3.9 (レベル AAA) で規定されています。

達成基準が求めていること :
ログインなどの認証において、ユーザーに認知負荷がかかる「思い出す」「解く」「書き写す」を要求しないようにする。たとえば :
  • パスワードは、パスワードマネージャーからのコピー＆ペーストを受け入れるようにする。
  • ワンタイムパスワードは、手動で「書き写す」ことなく、コピー＆ペーストや自動入力などができるようにする。
  • ユーザーの電子メールや SMS にマジックリンク (1回限り有効なリンク) を送信し、それをクリックして認証できるようにする。
  • CAPTCHA のように「(問題を) 解く」ような作業は、解かなくても済むような代替手段を提供する。
  • WebAuthn や OAuth を介して認証できるようにする。
その理由 :
認知や記憶に制約があるユーザーの中には、何かを記憶して正確に思い出す、見て記憶したものを「書き写す」ように手入力する、パズルなどを解く、といった行為が困難な人がいるため。

なお、達成基準 3.3.8 (レベル AA) では、一般的になじみのある、あるいはユーザー個人が提供する、画像、音声、動画などを用いて認証することを可としています。達成基準 3.3.9 (レベル AAA) では、これを可とはしていません。

以上です。WCAG 2.2 は勧告されてから日が浅く、関連文書を含めてこれから日本語訳が整備されてゆくという段階で、「あることは知っているけれど、実際に読んだことはない」という方がほとんどではないかと思います。この記事が WCAG 2.2 を理解するための第一歩として、お役に立てれば幸いです。

関連記事