スマホのボタンサイズは何px？WCAGの24px・44pxと操作範囲の違い

アイコンの周囲に押せる範囲を確保

ここで見るのは、絵柄そのものの幅だけではなく、操作を受け付ける対象の範囲です。小さなアイコンの周囲に余白を設ける設計も考えられます。ただし、隣のボタンと操作範囲が重なれば、押し間違いの原因になります。

スマホでの押しやすさとキーボード操作を確認

確認では、スマホで隣の項目を誤って押さないか、画面の端で操作しづらくないかを試します。キーボードで位置がわかることや、ボタンの名前が伝わることなど、サイズ以外の条件も別に必要です。

一つの数字でサイト全体のアクセシビリティを判定できるわけではありません。まず操作範囲と間隔を見直し、目的の項目へ迷わず届くかを確認する。装飾の完成後に、このひと手間を入れたいですね！

CSSピクセルと画像・画面の画素数を区別

ここでの24や44は、画像ファイルを何ピクセルで書き出すかという数字ではありません。CSS上で操作対象が占める大きさを確認します。端末の高精細な画面の物理ピクセル数を、そのまま同じ基準として数えないようにしましょう。

実装を確かめるときは、アイコンの外側にあるクリック可能な領域と、隣の対象までの距離を見ます。例外を利用して最低限を満たすことだけを目的にせず、よく使う操作や取り消しにくい操作ほど押しやすい配置にしたいですね。