クリックできる範囲を広げましょう

クリックしてみてください

※クリックするとアラートが出ます。

See the Pen Untitled by 1kita (@1kita) on CodePen.

これが何故良くないのか

• アイコン自体が小さく、クリックできる範囲がアイコンの大きさ分しかない
• アイコンの間隔も狭いため操作に正確性が求められる
• 結果として、誤操作や操作ストレスにつながりやすい

WCAG2.2においてはターゲットのサイズは、
推奨44x44(ピクセル)、最低限24x24(ピクセル)
が望ましいとされているため、この実装では基準を満たしていません。
また、間隔も狭いため基準を満たしていません。

達成基準 2.5.5 ターゲットのサイズ (高度)
https://waic.jp/translations/WCAG22/#target-size-enhanced

達成基準 2.5.8 ターゲットのサイズ (最低限)
https://waic.jp/translations/WCAG22/#target-size-minimum

クリック範囲を広げる

• アイコンのサイズを24pxの最低限のサイズに変更
• 間隔をクリックの範囲が被らない程度に調整
• クリック範囲をグレーの背景色で明示
• 更にグレーの範囲もクリックできるようにすることで多少カーソル位置がズレてもクリックできるように

See the Pen good by 1kita (@1kita) on CodePen.

ポイント：疑似要素でクリック範囲を広げる

更にクリック範囲を広げるためにはアイコンを大きくするだけでいいですが、デザイナー等々からこれ以上大きくしたくないと言われるかもしれません。

そのようなケースでは疑似要素でクリック範囲を拡張することでクリック範囲を確保することができます。
パディングでも増やせますが擬似要素の方がホバーのインタラクションを付けやすいです。

&::after {
    content: "";
    position: absolute;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
}

設定範囲はクリックできる想像の範疇に収め、
誤操作に繋がらないように気を付けましょう。

その他のケース

メニューリンクの押せる範囲が狭い

上下の線の範囲をクリックできそうに見えても、テキストの周辺部分だけしかクリック範囲がない

See the Pen Untitled by 1kita (@1kita) on CodePen.

 

GOOD　テキストのないエリアもクリックすることができる

See the Pen Untitled by 1kita (@1kita) on CodePen.

アコーディオンやモーダルでアイコンだけしか押せない

全体押せそうなのにアイコンだけしか押せない

See the Pen Untitled by 1kita (@1kita) on CodePen.

 

GOOD　アイコン以外の部分もクリックすることができる

アイコンのクリック範囲を広げても良いです。

See the Pen Untitled by 1kita (@1kita) on CodePen.

テキスト部分しかクリックできないリンクカード

タイトルだけリンク設定されていて他はクリックできない

See the Pen Untitled by 1kita (@1kita) on CodePen.

 

GOOD　タイトル以外の部分もクリックすることができる

See the Pen Untitled by 1kita (@1kita) on CodePen.

 

カテゴリ付きの場合

カードのタイプはカテゴリやタグなどが内包されている場合もあります。
しかし、a要素内にa要素は内包できません。

このようなケースでは全体のリンク判定のみ絶対配置で被せ、
カテゴリやタグはその上に配置することで実現可能です。

<article class="card">
  <a href="/article/1" class="card__main-link"></a>
  ...

.card__main-link {
  position: absolute;
  z-index: 1;
  inset: 0;
}

See the Pen Untitled by 1kita (@1kita) on CodePen.

まとめ

紹介したケース以外にもクリック範囲の配慮が必要なシーンは多々あります。
（ハンバーガーメニューの三、チェックボックス・ラジオボタンの判定など）

また、対応方法についてはただ広げれば良いわけでもないので、適宜適切か判断の上で調整しましょう。

※ 本記事ではユーザビリティ観点のみ考慮しております