アクセシビリティ_ターゲットサイズの推奨は44 x 44 css px #アクセシビリティ

これはなに？

WCAG2.1のアクセシビリティの「操作可能」の中で入力モダリティの ターゲットサイズに関するの項目です。
このアクセシビリティはレベルAAAです。

もともとこの記事は、Qiitaのデザイナーがレビューをするときに、「クリック範囲」とか「paddingで要素を広げて」とお願いすることがあり、社内向けに書いた記事でした。
ですが、なにかお役に立てればと思い、Qiitaの記事にしてみました。

対象読者

HTMLやCSSをコーディングするデザイナーやエンジニア

概要

クリック/タッチのターゲット範囲は 44 x 44 cssピクセル以上

freee株式会社の事例

freeeさんは下記で定めているようです。

デスクトップ向けWebでは最低24 x 24 cssピクセル、可能であれば44 x 44 cssピクセル以上
モバイル向けは44 x 44 cssピクセル以上

iOSとAndroidのガイドライン

iOSのユーザーインターフェイス	Abdroid
44 x 44ポイント以上	48dp x 48dp
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/#general-layout-considerations	https://material.io/design/layout/spacing-methods.html#touch-targets

例外

下記の場合、44 x 44 cssピクセルでなくてもOKです。

そのターゲットと同等のリンク又はコントロールが同じページに 44 × 44 cssピクセル以上のサイズで存在する
文中などのinline要素である
ターゲットのサイズがユーザエージェントによって定められており、かつコンテンツ制作者が変更していない
そのターゲットを特定の方法で提示することが、情報伝達にとって必要不可欠である

例: Qiitaの記事ページのユーザーアイコンのリンク

これは そのターゲットと同等のリンク又はコントロールが同じページに 44 × 44 cssピクセル以上のサイズで存在するの例 です。

ファーストビューのユーザーアイコンは24 x 24 cssピクセルです。
ですが、ページ下部に64x 64 cssピクセルのユーザーアイコンがあるのでOKです。

ファーストビュー	ページ下部

例：Qiita Zineの記事ページにある文中のテキストリンク

これは inline要素の例 です。

例えば下記の記事にテキストリンクがあります。

テキストリンクの例

参照 https://zine.qiita.com/event/202106-uzabase/

例外となる理由としては、テキストおよび段落の間隔より大きくすることができないからです。
大きくした場合、ターゲットが他の行と重なる可能性があるので、それはそれで可読性が損なわれてしまいます。

他にも文末の脚注リンクや、文末のヘルプアイコンは文の一部とみなされるので 44 x 44 cssピクセル未満でもOKです。

ちなみにQiitaでいうと脚注はこのように付きます¹ 。

例:Safariのリロードボタン

ターゲットのサイズがユーザエージェントによって定められており、かつコンテンツ制作者が変更していない の例です。

CSS 又はその他のサイズプロパティを用いてコンテンツ制作者がターゲットのサイズを変更しない場合、ターゲットは 44 × 44 CSS ピクセルのターゲットのサイズを満たす必要はありません。

なぜこのアクセシビリティが必要なのか

このアクセシビリティはこのような状態を解消するために、定められています。

細かい操作が苦手なユーザーは、ターゲットが小さいとクリック/タッチがしづらい
ロービジョンのユーザーは、ターゲットが小さいと見つけづらい
指の大きなスマホユーザーは、ターゲットが小さいと操作がしづらい
片手で操作するときに、ターゲットが小さいと操作がしづらい
電車やバスに乗っているときに、ターゲットが小さいと操作しづらい

クリック/タッチのターゲット・サイズの確認方法

先程紹介したfreeeさんの freeeアクセシビリティー・ガイドラインに44x44pxの四角形を表示するブックマークレットがありました。
大変簡単に確認できるので、ブックマークレットに保存して使ってみると良ろしいかと思います。

1辺が44pxの赤枠の正方形の内側に、1辺が24pxの青枠の正方形をマウスに追従する形で表示することができます。

ブックマークレットの表示

cssピクセルとは

その名前の通り、 css（カスケーディング・スタイル・シート）に記述するピクセルの値はcssピクセルでの値 です。

擬似的なピクセル＝cssピクセル（論理ピクセル）
実際の物理的なピクセル＝デバイスピクセル（物理ピクセル）
デバイスピクセル／cssピクセル＝デバイス・ピクセル比

どういうことかというとiPhoneを例にすると…

デバイス	デバイスサイズ	cssピクセル	デバイス・ピクセル比
15 / 15Pro	1,179 × 2,556	393 x 852	2.16
14Pro	1,179 × 2,556	390 × 844	3
12 / 12Pro / 13 / 13Pro / 14	1,170 × 2,532	390 × 844	3
X / XS / 11Pro / 13mini	1,125 × 2,436	375 × 812	3
6/ 6s / 7 / 8 / SE(2)	750 × 1,334	375 × 667	2

QiitaではデザイナーがFigmaでデザインするときはcssピクセルでデザインを行っています。
高画質ディスプレイ向けに画像は、cssピクセルで作成した画像を2倍で書き出しています。

Androidのdpも、厳密には違う仕組みですがほぼ同義です。

cssピクセルの参考

まとめ

Webサービス系だと、私はターゲットサイズの推奨は44 x 44 css pxが良いのではないかと考えています。
もちろん、サービスや対象OSのアプリケーションによって従うガイドラインも変わってきます。

アクセシビリティは特別な対応ではないと思います。
片手で操作するときや、電車やバスに乗っているときなどの日常の行動の中でも出てくる「使いにくい」を解決するものではないでしょうか。

この記事が誰かのお役に立てれば幸いです。

参考

この1とついているやつです。 ↩