スマホでボタンを押したつもりが、隣のリンクが開いた。押せる大きさに決まりがあった

自分のサイトを、走った先の道の駅でスマホから開いた。

スポットの絞り込みを閉じようとして「閉じる」を押したら、そのすぐ下にあった別のリンクが開いた。
もう一度やっても同じだった。三回目でやっと閉じた。

僕の指が太いせいだと思っていた。
家に帰ってパソコンで開くと、その「閉じる」はちゃんと押せる。押せないのはスマホのときだけだった。

押せる範囲は、見えている四角とは限らない

調べてみたら、あの「閉じる」はただの文字リンクだった。

まわりに枠を描いてボタンらしく見せてはいたが、枠はその外側の箱に付けたもので、押せるのは中の文字だけ。
文字は12pxで、二文字。
押せる範囲は、横がだいたい24px、縦は行の高さぶんで17pxくらいしかなかった。

見た目は40px四方のボタンで、実際に反応するのは真ん中の小さな面積だけ。
指の腹はその外側に着地していた。
押せていなかったのではなく、押していた場所が押せる場所ではなかった。

24という数字がある

この「押せる大きさ」には、はっきりした目安がある。

Webのアクセシビリティの決まりであるWCAG 2.2に、2.5.8 ターゲットのサイズ（最低限）という項目がある。
押す対象の大きさを、24×24 CSSピクセル以上にすること。適合レベルはAA、つまり「守るべき」とされている側だ。

ただし例外が五つ書かれていて、そこがおもしろかった。

ひとつ、まわりに十分な間隔があいていて、24pxの円を描いても隣の対象とぶつからない場合。
ひとつ、同じ働きをする別のボタンがそのページにあって、そちらが条件を満たしている場合。
ひとつ、文の中に混ざっているリンク。文章中のリンクは行の高さで決まってしまうので対象外になる。
ひとつ、ブラウザが用意した部品をそのまま使っている場合。
ひとつ、その大きさであること自体に意味がある場合。地図のピンなどがこれにあたる。

僕が書いた「閉じる」は、文の中のリンクではなく、独立したボタンのつもりで置いたものだった。
間隔もあいていなかった。
例外のどれにも入らない。

もっと厳しい項目もあって、2.5.5 ターゲットのサイズ（高度）は44×44を求めている。適合レベルはAAAなので必須ではないが、指で押すものはこのくらい欲しい、というのが実感に近い。
アップルの指針が44、Androidの指針が48。数字が近いのは偶然ではなく、どちらも人の指の接地面から出ている。

直したのは三か所だけだった

やったことは大きく三つ。

ひとつめ。文字リンクを、文字ではなく箱として押せるようにした。

リンクは、そのままだと文字の分しか場所を取らない。
表示のしかたをブロック寄りに変えて、上下左右に余白を持たせて、最小の高さと幅を指定する。
見た目は前と同じで、押せる範囲だけが枠いっぱいに広がった。

ふたつめ。縦に並ぶリンクの間隔を、行の高さではなく余白でつけた。

フッターのリンクが縦に六つ並んでいて、間隔を行の高さで稼いでいた。
行の高さで空けると、見た目の隙間は広がるのに、押せる範囲は文字の高さのまま変わらない。
見えている隙間と、押せる範囲がずれる。ここは余白でやるべきところだった。

みっつめ。どうしても見た目を変えたくないところは、当たり判定だけを広げた。

記事の右上に置いた小さな共有アイコンがそれで、大きくすると邪魔になる。
こういうときは、要素に見えない疑似要素を重ねて、それを上下左右にはみ出させる。
画面上の大きさは変わらないまま、反応する範囲だけが広がる。
ただしこれは隣のボタンの上に覆いかぶさることがあるので、並べて使う場所ではやらないほうがいい。

数えてみたら、よく押されるものほど小さかった

ついでに、うちのサイト全体を見て回った。

僕が押しにくいと感じたのは、あとから足したものばかりだった。
最初に作ったボタンは大きい。困って追加した「閉じる」「もっと見る」「並び替え」は、既存の隙間に押し込んだので小さい。

そして、その小さいほうがよく押される。
絞り込みの開け閉めは、スポット一覧を見ている人が何度も触る場所だ。
いちばん触られるところが、いちばん雑だった。

以前、リンクの下線を消して誰も押さなくなった話を書いた。
あのときは「押せると分かるか」の話で、今回は「押せる大きさがあるか」の話。
押してもらうまでには、気づいてもらう段と、届く段の二つがある。片方だけ直しても通らない。

スマホで自分のサイトを触るのは、月に何度かある。
そのたびに小さな不便に気づいて、たいてい「あとで」と思って忘れる。
今回は道の駅の駐車場で三回押し直したのが悔しくて、その場でメモした。
直すのに要ったのは、家に帰ってからの三十分だった。