WCAG 2.2 Working Draft (2020年8月11日版)

W3C が勧告している WCAG (Web Content Accessibility Guidelines) の次期バージョン、WCAG 2.2 の Working Draft が、2020年8月11日に開示されました。9月18日までコメントを受付中です。

以前、『WCAG 2.2 では「フォーカスの可視化」のビジュアル要件が規定されるかも』という記事を書きましたが、それも踏襲する形で9つの新しい達成基準が追加されています。内容的には、キーボードフォーカスの視認性、改ページのナビゲーション、ドラッグ操作の代替、タッチインターフェースのタップ領域、ヘルプ機能へのアクセス、コントロールの常時可視化、認知的な機能によらないユーザー認証、冗長性による入力支援 ... と多岐にわたります。

この記事では、今回の Working Draft で追加されている達成基準をご紹介します。

2020年8月15日追記 :
達成基準 2.5.8 の日本語訳を、よりわかりやすく修正しました。@bakera さん、ご指摘ありがとうございました。

ガイドライン 2.4 Navigable / ナビゲーション可能

2.4.11 Focus Appearance (Minimum) / フォーカスの見た目 (最低限)
[レベル AA]

For the keyboard focus indicator of each User Interface Component, all of the following are true:
各 UI コンポーネントのキーボードフォーカスインジケーターについては、以下のすべてが真である。

Minimum area (最小の領域) :
The focus indication area is greater than or equal to a 1 CSS pixel border of the focused control, or has a thickness of at least 8 CSS pixels along the shortest side of the element.
フォーカス表示領域は、フォーカスされたコントロールの 1 CSS ピクセルの境界線より大きい、または、その要素の最短辺に沿って少なくとも 8 CSS ピクセルの厚さがある。
Change of contrast (コントラストの変化) :
The color change for the focus indication area has a contrast ratio of at least 3:1 with the colors of the unfocused state.
フォーカス表示領域の色の変化は、フォーカスされていない状態と比べて、少なくとも 3:1 のコントラスト比がある。
Adjacent contrast (隣接部分のコントラスト) :
The focus indication area has a contrast ratio of at least 3:1 against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.
フォーカス表示領域は、最小領域またはそれ以上のすべての隣接する色に対して、少なくとも 3:1 のコントラスト比がある、または少なくとも 2 CSS ピクセルの厚さがある。
Unobscured (隠されていない) :
The item with focus is not entirely hidden by author-created content.
フォーカスのある項目が、コンテンツ制作者が作ったコンテンツによって完全に隠されていない。

2.4.12 Focus Appearance (Enhanced) / フォーカスの見た目 (高度)
[レベル AAA]

For the keyboard focus indicator of each User Interface Component, all of the following are true:
各 UI コンポーネントのキーボードフォーカスインジケーターについては、以下のすべてが真である。

Minimum area (最小の領域) :
The focus indication area is greater than or equal to a 2 CSS pixel solid border around the control.
フォーカス表示領域は、コントロールを 2 CSS ピクセルの実線境界線で囲んだのと同じかそれ以上の大きさを持つ。
Change of contrast (コントラストの変化) :
Color changes used to indicate focus have a contrast ratio of at least 4.5:1 with the colors changed from the unfocused control.
フォーカスを示すために用いられる色の変化は、フォーカスされていないコントロールと比べて、少なくとも 4.5:1 のコントラスト比がある。
Unobscured (隠されていない) :
No part of the focus indicator is hidden by author-created content.
フォーカスインジケーターの一部が、コンテンツ制作者が作ったコンテンツによって隠されていない。

2.4.13 Fixed Reference Points / 固定された参照点
[レベル A]

When a web page or set of web pages is an electronic publication with pagebreak locators, a mechanism is available to navigate to each locator and each locator maintains its place in the flow of content, even when the formatting or platform change.
ウェブページまたはウェブページ一式が改ページのロケーターを持つ電子出版物である場合、各ロケーターにナビゲートするためのメカニズムが利用可能であり、かつ、各ロケーターは、フォーマットやプラットフォームが変更されても、コンテンツのフローの中でその場所を保つ。

ガイドライン 2.5 Input Modalities / 入力モダリティ

2.5.7 Dragging / ドラッグ操作
[レベル AA]

All functionality that uses a dragging movement for operation can be operated by a single pointer without dragging, unless dragging is essential.
ドラッグ動作を使って操作する機能はすべて、ドラッグなしのシングルポインタで操作することができる。ただしドラッグが必要不可欠である場合は例外とする。

2.5.8 Pointer Target Spacing / ポインタのターゲットの間隔
[レベル AA]

For each target, there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets, except when:
各ターゲットに対して、そのターゲットを含み、その他のターゲットが存在しない、幅と高さが少なくとも 44 CSS ピクセルの領域がある。ただし、以下の場合は例外とする。

Enlarge (拡大できる) :
A mechanism is available to change the CSS pixel size of each target, or its spacing, so there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets;
各ターゲットの CSS ピクセルのサイズ、またはその間隔を変更するためのメカニズムが利用可能であり、それによって、そのターゲットを含む幅と高さが少なくとも 44 CSS ピクセルの領域があり、それ以外のターゲットが存在しない。
Inline (インラインである) :
The target is in a sentence or block of text;
そのターゲットが文中、又はテキストブロック内に存在する。
User agent (ユーザーエージェントのコントロールである) :
The size of the target is controlled by the user agent and is not modified by the author;
ターゲットのサイズがユーザーエージェントによって制御されてており、かつコンテンツ制作者が変更していない。
Essential (必要不可欠) :
A particular presentation of the target is essential to the information being conveyed.
そのターゲットを特定の方法で提示することが、情報伝達にとって必要不可欠である。

ガイドライン 3.2 Predictable / 予測可能

3.2.6 Findable Help / 発見可能なヘルプ
[レベル A]

For single page Web applications or any set of Web pages, if one of the following is available, then access to at least one option is included in the same relative order on each page:
シングルページのウェブアプリケーションまたはウェブページ一式で、以下のいずれかが利用可能な場合、少なくとも1つのオプションへのアクセスは、各ページにおいて相対的に同じ順序で含まれる。

3.2.7 Hidden Controls / 隠されたコントロール
[レベル A]

Controls needed to progress or complete a process are visible at the time they are needed without requiring pointer hover or keyboard focus, or a mechanism is available to make them persistently visible.
プロセスの進行や完了に必要なコントロールは、ポインタホバーまたはキーボードフォーカスなしに、必要なときに見ることができる。または、それらを見える状態に保つためのメカニズムが利用可能である。

ガイドライン 3.3 Input Assistance / 入力支援

3.3.7 Accessible Authentication / アクセシブルな認証
[レベル A]

If an authentication process relies on a cognitive function test, at least one other method must also be available that does not rely on a cognitive function test.
認証プロセスが利用者の認知機能を試す形に依存している場合、認知機能に依存しない少なくとも1つの他の方法も、併せて利用可能でなければならない。

3.3.8 Redundant Entry / 冗長な入力
[レベル A]

For steps in a process, information previously entered by or provided to the user that is required on subsequent steps is either:
プロセスの手順において、後続の手順で必要となる、以前に入力された情報または利用者に提供された情報は、以下のいずれかである。

Exception: When re-entering the information is essential.
例外 : 再入力が必要不可欠の場合。

なお、今回の Working Draft では、既存の達成基準 2.4.7「Focus Visible (フォーカスの可視化)」が、文面変更なしで、レベルが AA から A に変更されています。上述の達成基準「Focus Appearance (フォーカスの見た目)」の新設に伴っての措置と思われますが、個人的にはこのレベル変更は妥当だと思います。達成基準 2.4.7 が満たされない状態というのは、ブラウザ標準のフォーカスリングすら表示されない状態なので、目が見えるキーボード利用者にとってはコンテンツ利用が著しく阻害されてしまうからです。

今後も WCAG 2.2 は最終的な勧告に向けてブラッシュアップされてゆくと思われますが、引き続き、ウォッチしてゆきたいと思います。

関連記事