WCAGでボタンのサイズは44px以上推奨

スマホサイトを作る時、ボタンサイズはどれくらいが良いか、アクセシビリティガイドライン(WCAG)やApple、Googleサイトを参考に考えます。44px以上、無理がなければ48px以上で良さそうです。

WCAG関係なく44px以上がおすすめ

WCAG2.1(英語)日本語解説では、「ターゲットは少なくとも 44 × 44 CSS ピクセルである必要がある」という基準があります。

Level AAAの達成基準といのは、公共サイトの法定基準や企業サイトの努力目標のAAを超えています。そのため、アクセシビリティ検証では意識する機会が少ないと思います。

ただ、ボタンの押しやすくすることで、多くのスマホユーザーのストレスを軽減できるメリットがあります。

アクセシビリティ基準値関係なしに44px以上のリンク範囲を確保すると良いでしょう。

無理がなければ48px以上

スマホ、ブラウザを作っているAppleとGoogle。どちらもアクセシビリティの意識が高い企業です。

この2つのサイトも参考に見てみます。

Apple、Googleのボタンは、それぞれ、48×48px、56×51pxとなっていました。

余裕があればボタンのサイズを48px以上、確保しても良いでしょう。

日本の場合、Apple、Googleほどシンプルに設計するのが難しく、ぎゅうぎゅうに詰め込むことも多い思うので、本当に設計に余裕があれば。

デザインに迷わない

ボタン最小サイズは44px、可能であれば48px。

アクセシビリティ基準の魅力は、デザインを定量化できるところです。

タップ可能な範囲を44pxと意識していれば、ボタンサイズ、アイコンサイズ、余白が決まってくるので迷いません。

ボタンを押しやすくなるだけではなく、デザインの効率化も図れます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)