WCAG 2.1 に対する私的解釈 (その3) : 達成基準 2.5.5 Target Size

今年は、W3C の WCAG (Web Content Accessibility Guidelines) の新バージョンである WCAG 2.1 が、正式な Recommendation (勧告) になりました。

私も参加しているウェブアクセシビリティ基盤委員会 (WAIC) 翻訳ワーキンググループ (WG4) にて、鋭意日本語翻訳中です。(作業中ドラフト : Web Content Accessibility Guidelines (WCAG) 2.1 (日本語訳))

バージョンが 2.1 になり、ロービジョン、モバイル、認知/学習障害への配慮が強化され、より進化したガイドラインになったのは事実ですが、個人的には若干もやもやする箇所がいくつかあります。そこで当サイトでは、「WCAG 2.1 ではこう規定されているが、本当はこう考えたほうがもっとよいのでは?」という私的な解釈を加えてみたいと思います。

今回取り上げるのは、達成基準 2.5.5 Target Size (ターゲットのサイズ) (レベル AAA) です。

The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when: (ポインター入力のターゲットのサイズが 44 × 44 CSS ピクセル以上である。ただし、以下の場合は例外とする。)

Equivalent (同等のものが存在する)
The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels; (そのターゲットと同等のリンクまたはコントロールが同じページに 44 × 44 CSS ピクセル以上のサイズで存在する。)
Inline (インラインである)
The target is in a sentence or block of text; (そのターゲットが文またはテキストブロック内に存在する。)
User Agent Control (ユーザーエージェントのコントロールである)
The size of the target is determined 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. (そのターゲットを特定の方法で提示することが、情報伝達にとって必要不可欠である。)
出典 : WCAG 2.1 Success Criterion 2.5.5 Target Size (Level AAA)

この達成基準の意図

この達成基準は、モバイルデバイス (タッチインターフェースによって操作するスマートフォンやタブレットなど) を用いてウェブを利用するユーザーに向けた配慮です。人間の指は、マウスポインターに比べて精緻なポインティングが苦手で、いわゆる「fat finger (太った指)」という問題が生じます (参照 : 「fat finger」の度合いを可視化する)。この問題を解決し、誤操作 (ボタンの押し間違いなど) を防ぐために、ポインティングする対象となる UI コンポーネントには、それなりのサイズを確保しましょう、というのがこの達成基準の意図です。

この達成基準で規定されている「44 × 44 CSS ピクセル以上」というサイズは、W3Cの「Understanding WCAG 2.1 (WCAG 2.1 解説書)」によると、各社 (Apple、Google、Microsoft) の UI ガイドラインや研究論文を参考にして割り出されたもののようです (参照 : 「Understanding Success Criterion 2.5.5: Target Size」の「Related Resources」の項)。

この 44 × 44 CSS ピクセルという基準値は、Knowbility の記事 (Exploring WCAG 2.1 — 2.5.5 Target Size) によると「一般的なモバイルデバイスにおいて9ミリメートル四方に相当する大きさ」とのことです。デバイスによってはもう少し小さい実寸値になるかもしれませんが (私の手元の iPhone だと、8ミリメートル四方くらいに見えます)、Luke Wroblewski 氏の2010年の記事「Touch Target Sizes (LukeW)」を見ると、タッチターゲットのサイズは総じて (物理的な実寸で) 8ミリメートルから10ミリメートルくらいが目安と言えそうなので、その意味では妥当な基準値と言えると思います。

なぜレベル AAA なのだろう?

タッチターゲットのサイズの基準は、これまでモバイル OS を提供する各社の UI ガイドラインにのみ存在し、ネイティブアプリ開発には影響を与えていたものの、ウェブデザインにおいて明示的な基準はありませんでした。今回の WCAG 2.1 で、ウェブコンテンツに対してもこうした基準が明示されたというのは、意義深いことだと思います。

ところで、なぜこの達成基準はレベル AAA なのでしょうか?もともと WCAG 2.1 のワーキングドラフトの段階までは、レベル AA として「44 × 22 CSS ピクセル以上」という達成基準があったのですが、勧告候補まで進んだところで削除され、レベル AAA として併存していた達成基準「44 × 44 CSS ピクセル以上」だけがそのまま残った、という経緯によるものと思われます。個人的には、ワーキングドラフトに対してパブリックコメントを出したように、iOS Human Interface Guidelines では "Provide ample touch targets for interactive elements" として 44pt x 44pt をミニマムのタッチターゲットサイズとしていること (参照 : General Layout Considerations (Adaptivity and Layout - Visual Design - iOS Human Interface Guidelines))、また Android の UI ガイドラインでは 48dp x 48dp をミニマムのタッチターゲットサイズとしていること (参照 : Touch and click target (Spacing methods - Material Design) を鑑みて、ウェブデザインにおいても「44 × 44 CSS ピクセル以上」という達成基準をミニマムサイズとして (レベル AA まで下げて) よいのでは?と思っています。

WCAG では、「コンテンツの中には、レベル AAA 達成基準のすべてを満たすことのできないものもあるため、サイト全体の一般的な方針としてレベル AAA での適合を要件とすることは推奨されない。」とされています (参照 : 「適合要件 1 を理解する」の注記 2 (WCAG 2.0 への適合を理解する mdash; WCAG 2.0 解説書))。このためレベル AAA は、各ウェブサイトで目指したい適合レベルとしては意識されにくく、この記事で取り上げているタッチターゲットのサイズに関する達成基準 2.5.5 も、せっかくの意義深い基準でありながら無視されやすい位置づけになりそうで、もったいな...というのが正直な想いです。

この達成基準には例外事項もあるので、文中のテキストリンクやデフォルトのフォーム要素 (チェックボックスやラジオボタンなど) は必ずしも1辺が 44 ピクセルに満たなくてもよいと解釈できます。テキストリンクのみで構成されるナビゲーションメニューのように、あるテキストブロック内のテキストがすべてリンクである場合、例外事項の「Inline (インラインである)」に含めることができるか、という議論はもしかしたらあるかもしれませんが (私は例外に含めてよいと考えますが)、それ以外は、デザイン上さほど無理のない基準かなと思います。ボタンやメニューなど CSS でサイズを調整できる UI コンポーネントについては、基本的に 44 × 44 CSS ピクセル以上を最低限のサイズと意識してデザインしたいな、というのが私自身のこの達成基準に対する捉えかたです。