スマホのボタンは見えていても、押しやすいとは限らない

スマートフォンでは、ボタンやリンクが小さい、隣と近い、スクロール中に動くと誤操作が起きます。WCAG 2.2の基準を踏まえ、問い合わせや予約導線を実機で確認する方法を解説します。

見える大きさと、押せる範囲は別

文字やアイコンが見えていても、実際に反応する領域がその周囲まで広がっているとは限りません。小さなアイコンだけがリンクだと、指で正確に押せず、隣の操作を誤って選びます。

CSSの見た目だけでなく、リンクやbutton要素のクリック可能領域を開発者ツールと実機で確認します。

WCAG 2.2の達成基準2.5.8では、ポインター入力の対象を原則24×24 CSSピクセル以上とし、小さい場合は間隔などの例外条件を定めています。強化基準2.5.5では44×44 CSSピクセル以上です。

24pxを満たせば常に使いやすいという意味ではありません。重要な問い合わせ、予約、送信ボタンは、端末や利用状況を考えて余裕を持たせます。

文字サイズだけを大きくせず、上下左右のpaddingを確保します。アイコンボタンには視覚的な大きさとアクセシブルな名前を用意します。

インラインの文章リンクは例外がありますが、メニュー、閉じるボタン、ページ送りなど操作部品は、隣との間隔も確認します。

button, .button-link {
  min-height: 44px;
  padding: 10px 16px;
}

.icon-button {
  width: 44px;
  height: 44px;
}

スマートフォンを片手で持ち、入力、確認、送信まで行います。画面キーボードが開いた状態でボタンが隠れないか、エラー後に修正箇所へ戻れるかを確認します。

制作担当者の新しい大型端末だけでなく、小さい画面や文字拡大でも試します。問い合わせ導線は見た目の確認だけで終わらせません。

クリック数が多くても、誤タップや戻る操作が含まれることがあります。ヒートマップを使う場合も個人情報を扱わない設定を確認し、実機テストと問い合わせ担当の声を合わせます。

ボタンを大きくした後は、完了率、エラー率、二重送信、途中離脱を比較します。

スマホのボタンは、見えることと押しやすいことを分けて確認します。最低サイズと間隔を守り、固定表示、画面キーボード、読み込み後の移動まで含め、実際の問い合わせ操作を最後まで試します。