WCAG 2.2 では「フォーカスの可視化」のビジュアル要件が規定されるかも

W3C が勧告している WCAG (Web Content Accessibility Guidelines) の次期バージョン 2.2 について、W3C Editor's Draft が出ています。Working Draft 発行前の非公式な文書なので、ここからさらに様々な改変が加えられてゆくものと思われますが、本記事の執筆時点 (2020年2月14日版) では、「フォーカスの可視化」について変更が加えられています。

新達成基準「フォーカスの可視化 (高度)」

現時点での Editor's Draft では、新達成基準「2.4.11 Focus Visible (Enhanced)」(日本語に訳すと「フォーカスの可視化 (高度)」) が追加されています。既存の WCAG 達成基準「2.4.7 Focus Visible (フォーカスの可視化)」では、キーボード操作が可能なユーザーインタフェースに対して、フォーカスが視覚的に見えるようにすることが規定されていますが、新達成基準ではさらに踏み込んで、具体的なビジュアル要件 (フォーカスインジケーターの大きさや配色) が定められています。

2.4.11 Focus Visible (Enhanced)

(Level AA) [New]

When a User Interface Component displays a visible keyboard focus, all of the following are true: (UI コンポーネントにおいて、視認できるキーボードフォーカスが表示される場合は、次のすべてを満たす。)

Minimum area (最小の領域) :
The focus indication area is greater than or equal to the longest side of the bounding rectangle of the focused control, times 2 CSS pixels.
(フォーカス表示領域は、フォーカスされたコントロールの境界矩形の最長辺の長さに対して、2 CSS ピクセルを掛けた値以上であること。)
Focus contrast (フォーカスのコントラスト) :
Color changes used to indicate focus have at least a 3:1 contrast ratio with the colors changed from the unfocused control.
(フォーカスを表示するために用いられる色の変化は、フォーカスされていないコントロールの色に対して少なくとも 3:1 のコントラスト比があること。)
Contrast or thickness (コントラストまたは厚さ) :
The focus indication area has a 3:1 contrast ratio against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.
(上述の最小 (またはそれ以上) のフォーカス表示領域は、隣接する色に対して 3:1 のコントロラスト比があること。または少なくとも 2 CSS ピクセルの厚みがあること。)
出典 : Success Criterion 2.4.11 Focus Visible (Enhanced) - Web Content Accessibility Guidelines (WCAG) 2.2 / W3C Editor's Draft 14 February 2020

ひとつめの「Minimum area」の意味がややわかりにくいかもしれませんが、要はフォーカス表示領域の要件を面積の数値で示したものです。解説書のドラフトを併せ読むと達成基準の言わんとしていることがわかるかと思いますが、テスタブル (試験可能) であるために、様々なケース (フォーカス表示の形状) を想定した達成基準になっていることが見て取れます。

既存の達成基準「フォーカスの可視化」のレベル変更

上述の新達成基準 2.4.11 がレベル AA として追加されているのを受けて、今回の Editor's Draft では、既存の達成基準「2.4.7 Focus Visible (フォーカスの可視化)」のレベルが AA から A に変更されています。

個人的にはこのレベル変更は妥当だと思います (達成基準 2.4.7 が満たされない状態というのは、ブラウザ標準のフォーカスリングすら表示されない状態なので、目が見えるキーボード利用者にとってはコンテンツ利用が著しく阻害されてしまうからです) が、その一方で、既存の WCAG 2.1 との後方互換性という観点でどうなの?という議論が巻き起こっています。(ご参考 : Changing the level of SC 2.4.7 in WCAG 2.2 Issue #1041 · w3c/wcag)


あくまでも Editor's Draft というステータスなので、今後また変わってゆく可能性はありますが、キーボード操作におけるフォーカスの可視化について、最低限ブラウザ標準のフォーカスリングが表示できていればよしとするのに留まらず、より積極的に、フォーカス箇所を視認しやすくデザインするための具体的な数値基準を設けるところまで踏み込んでいるのは、とてもよいことだと思います。