2.5.8 ターゲットのサイズ (最低限) レベルAA 原則2 操作可能
小さすぎるボタン
「いいね」を押したつもりが「削除」だった。小さなボタンがくっついて並んでいると、指ではねらった方だけを押すのが難しくなります。手がふるえる人、片手で持っている人、揺れる電車の中のあなたも。
さわってみよう
スマートフォンの画面の「いいね」(ハートの印)だけを、指で押すつもりでクリックしてみよう。
写真部
文化祭の展示の写真を公開しました。
指で押すとどうなる?
チェックを入れると、クリックした点を中心に直径44pxの円を出し、円にかかったボタンを全部太い枠で囲み、いくつにふれたかを文字でも出します。円は指先が画面にふれる広さのおおまかな目安です(実際の指の大きさは人によって違います)。
ボタンの大きさは 12 × 12px、2つの間はたった 2px です。
直してみよう
ボタンの大きさ(と間隔)をスライダーで変えて、達成基準 2.5.8 を満たそう。
写真部
文化祭の展示の写真を公開しました。
青い点線の円:それぞれのボタンの中心に置いた直径24pxの円
- 24×24px 以上
- —
- 24pxの円
- —
- 44×44px 以上
- —
分かったこと
- マウスや指で押すもの(ターゲット)は、24 × 24 CSSピクセル以上にする(2.5.8、レベルAA)。
- 小さいボタンでも、それぞれの中心に置いた直径24pxの円が、となりのボタンにもとなりの円にも重ならないだけ離れていれば、例外として認められる(「間隔」の例外)。
- ほかにも例外がある。文章の中のリンク、同じ働きをする24px以上のボタンが同じページにある場合、ブラウザが決めた見た目のままの部品などは対象外。
- 24pxは「最低限」。44 × 44px 以上はより高いレベルの基準 2.5.5(AAA)の値で、デジタル庁のデザインシステムでも押しやすい大きさとして勧められている。やってみた通り、24pxでも指の円はとなりにかかることがある。
例外のくわしい条件は、WCAG 2.2 の日本語訳で確かめよう。