CSSでより良いクリックターゲットサイズを設計する

 (ishadeed.com)
36 ポイント 投稿者 xguru 2024-01-17 | 1件のコメント | WhatsAppで共有
  • ボタン/リンク/カードを、よりクリック/タッチ/タップしやすく、誤って押しにくいサイズにする
  • 「ターゲットサイズ」の呼び方はさまざま：Apple は hit target、Google Material は Touch target、WAI は target size、Google Lighthouse は Tap Target、デザインコミュニティでは Clickable Area
  • WCAG 基準では、ターゲットサイズは少なくとも 44 x 44 CSS ピクセル以上であるべき（Android は 48x48）
    • それより小さいと、タッチサークルが重なって誤クリックが発生する可能性がある
  • Google Design for Driving では最小 76dp x 76dp
  • 視覚的なターゲットフィードバックを与えるのが望ましい（要素に境界線または背景の反転）
  • 24x24 より小さいターゲットの場合は、十分な間隔を確保する必要がある（Line Height: 1.4、Padding: 1rem など）
  • ProgressBar も Height を大きくして、十分なタッチ領域を与えるのがよい
  • 同じアクションを持つオブジェクト同士の間では Dead Target Area をなくす
  • :before と :after のような Pseudo 要素を使ってターゲットサイズをより大きくする
  • label には必ず for を付けてターゲットサイズを拡張する
  • チェックボックスは padding-block を使ってターゲットサイズを大きくする
  • ボタン/テキストリンクにも padding を付ける
  • リストアイテムには padding と display:flex でアイテム全体のサイズまで拡張する
  • ターゲットサイズのテスト方法：DevTools の利用、CSS Outline の適用、Polypane ブラウザーの使用

関連記事

1件のコメント

 
hohpark 2024-01-26

すばらしい内容なので著者を見ると Ahmad Shadeed でした。この方が書いた記事を見ると、本当に感嘆せずにはいられません。