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

## これはなに？

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

https://waic.jp/translations/WCAG21/Understanding/target-size.html

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

## 対象読者

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

## 概要

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

### freee株式会社の事例

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

https://a11y-guidelines.freee.co.jp/explanations/target-size.html

- デスクトップ向け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です。

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

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

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

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

ファーストビュー|ページ下部
---|---
![Qiitaの記事ページのファーストビューに表示されるユーザーアイコンの事例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/96fe9e72-8618-4cc4-e7d5-c4cdebb2f2fd.png)|![Qiitaの記事ページの下部に表示されるユーザーアイコンの事例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/dacf034e-cc3f-a661-bcb6-f736757ee6bf.png)


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

これは **inline要素の例** です。

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

|テキストリンクの例|
|---|
|![Qiita Zineの記事内にあるテキストリンクの事例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/45a5375f-59e1-6ee7-e65b-fb5cee621d72.png)|
|参照 https://zine.qiita.com/event/202106-uzabase/|

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

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

ちなみにQiitaでいうと脚注はこのように付きます[^1] 。
[^1]:この`1`とついているやつです。

#### 例:Safariのリロードボタン

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

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

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

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

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

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

先程紹介したfreeeさんの [freeeアクセシビリティー・ガイドライン](https://a11y-guidelines.freee.co.jp/explanations/target-size.html#id79)に44x44pxの四角形を表示するブックマークレットがありました。
大変簡単に確認できるので、ブックマークレットに保存して使ってみると良ろしいかと思います。

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

|ブックマークレットの表示|
|---|
|![freee株式会社のターゲットサイズを確認するためのブックマークレットの表示例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/46290a53-7991-f0a6-ff5e-dfd12080bc1d.png)|


## 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ピクセルの参考

https://www.w3.org/TR/css3-values/#reference-pixel

https://d-fount.com/about-resolution/#outline_4_2

https://www.mpipidesign.com/website/css/2020/10/csspixel/

## まとめ

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

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

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

## 参考

- [達成基準 2.5.5: ターゲットのサイズを理解する](https://waic.jp/docs/WCAG21/Understanding/target-size.html)
- [クリックやタッチのターゲット・サイズに関連する問題とターゲット・サイズの確認方法 — freeeアクセシビリティー・ガイドライン Ver. 202311.1](https://a11y-guidelines.freee.co.jp/explanations/target-size.html)
- [CSS Values and Units Module Level 3](https://www.w3.org/TR/css3-values/#reference-pixel)
- https://d-fount.com/about-resolution/#outline_4_2
- https://www.mpipidesign.com/website/css/2020/10/csspixel/