ボタンやアイコンやナビゲーションなど、クリック・タップ可能な領域のサイズを広くする実装方法のまとめ

サイト構築 -CSS

Post on:2019年10月15日

はじめに

例えば、ボタンやリンクなどの要素をクリック・タップしようとした時に、特定のエリアをクリック・タップするまで反応しなかったことはありませんか？
これはクリック・タップ可能な領域が最小限に実装されているのが原因です。

下記の図をご覧ください。クリック・タップ可能な領域がどうあるべきか、どうあるべきでないのかを解説します。

クリック・タップ可能な領域がどうあるべきか

この記事では、私がよく見かけるさまざまな事例と、それらを適切に解決する実装方法を紹介します。

ユーザーエクスペリエンスの観点

WCAGガイドライン

WCGA 2.1によると、タッチまたはマウスの最小ターゲットは、44x44ピクセルが必要とあります。サイズは固定されておらず、使用ケースによっては変わる可能性があります。ただし、44x44ピクセルから始めることをお勧めします。

フィッツの法則

フィッツの法則は、UXデザインにおいて重要な法則です。簡単に説明すると、タッチまたはクリックのターゲットが大きくなればなるほど近くなればなるほど、ユーザーが操作するのに必要な時間は短くなります。
参考: 心理学の原則に基づいたユーザビリティの改善方法

下記の図では、プライマリボタンに2つ異なるケースを使用しています。
左はボタンが小さく遠くにあるため、ユーザーが操作するのに時間がかかります。
右はボタンのサイズが大きくなり、入力要素に近くなったため、操作がより簡単かつ短時間になります。

右の方が、簡単でより短時間に操作できる

WCAG 2.5.5のターゲットサイズとフィッツの法則を念頭に置いて、実際の例を見てましょう。

ボタンのクリック可能な領域を拡張する

必要な時に、buttonタグを使用して実装することは非常に重要です。以下の例は、私が使用しているオンラインバンクのUIです。

<div class="navig next" onclick="validateLogin()">Next</div>

1	<div class="navig next" onclick="validateLogin()">Next</div>

上記のコードで実装されたボタンをGIFアニメーションにしてみました。
ボタンの上にカーソルを置いても、カーソルはポインタのままです。さらに文字をホバーするとテキストカーソルになり、文字を選択することもできてしまいます。
正しいタグで実装されていれば、この現象は起こりません。

テキストカーソルが表示されてしまう

HTMLの<button>要素を使用すると、以下のものが無料で手に入ります。

マウス、キーボード、またはタッチで、アクセシブル。
キーボードで選択可能。
JavaScriptは必要なし。

正しい要素を使用したら、以下の理由で十分なpaddingを加える必要があります。

タップしやすいように余白を加える。
目立つように大きくする（フィッツの法則）。

右の方が、簡単でより短時間に操作できる

リンクのクリック可能な領域を拡張する

私は過去にこの間違いをしたことがあります。そして、またこの間違いをいろいろなサイトでよく見かけます。ナビゲーションメニューがある場合、paddingは<li>ではなく、<a>に与えるべきです。

<nav>
  <ul>
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><nav href="#">Products</nav></li>
    <li class="nav-item"><a href="#">Store</a></li>
    <li class="nav-item"><a href="#">Team</a></li>
  </ul>
</nav>

<nav>

<ul>

<li class="nav-item"><nav href="#">Products</nav></li>

<li class="nav-item"><a href="#">Store</a></li>

</ul>

</nav>

.nav-item {
  padding: 12px 16px;
}

.nav-item {

padding: 12px 16px;

}

上記のコードで実装されたクリック可能な領域は、テキストのみになります。下記の図で確認してみてください。

li要素にpaddingを定義した場合

このようなリンクのクリック可能な領域を拡張するには、リンク自体にpaddingを加えることです。上下のpaddingはインライン要素では機能しないため、block, inline-element, flexなどをケースに応じて加えます。

.nav-item a {
  display: block;
  padding: 12px 16px;
}

.nav-item a {

display: block;

padding: 12px 16px;

}

上記のように変更すると、リンク全体がクリック・タップ可能な領域になります。

a要素にpaddingを定義した場合

アイコンのクリック可能な領域を拡張する

ハンバーガーメニューは主にタッチデバイスで使用されるため、クリック可能な領域を増やすことが重要です。

クリック可能な領域が下記のようにぎりぎりだとどう思いますか？

クリック可能な領域はアイコンと同じサイズ

上記は適切ではなく、指やマウスをスクリーン上の小さなターゲットに合わせるのが難しくなります。下記のように、クリック可能な領域をアイコンより大きくすると、より簡単に操作ができます。

クリック可能な領域はアイコンより大きいサイズ

クリック可能な領域を拡張したデモをCodePenで実際にご覧ください。

Codepen

チェックボックスとラジオボタンのクリック可能な領域を拡張する

チェックボックスやラジオボタンは、その要素に関連付けされたラベルをクリックしてアクティブ・非アクティブにできます。

下記の図では、クリック可能な領域はその要素のみに関連付けされています。そのため、ラベルをクリックしても、アクティブ・非アクティブにすることはできません。

その要素のみがクリック可能な領域

これはユーザーエクスペリエンスの観点からもアクセシブルではありません。HTMLでlabel要素にfor属性を加えて、ラベルに関連付けできます。

<input type="checkbox" id="option1">
<label for="option1">Option 1</label>

1 2	<input type="checkbox" id="option1"> <label for="option1">Option 1</label>

または、label要素内にinput要素を配置します。

<label for="option1">
    Option 1
    <input type="checkbox" id="option1">
</label>

Option 1

</label>

さらに、<label>要素にpaddingを追加して、クリック可能な領域を大きくするのもよいでしょう。これで下記のようにチェックボックやラジオボタン全体がクリック可能になります。

チェックボックやラジオボタン全体がクリック可能に

サイドバーのクリック可能な領域を拡張する

サイドバーでは例えば、リストのリンクが親の幅いっぱいに拡張されていないことがあります。つまり、クリック可能な領域はテキストのみです。

クリック可能な領域はテキストのみ

これを修正するには、2つのポイントがあります。

<li>要素からpaddingを削除し、代わりに<a>要素にpaddingを加える（これについてはリンクのクリック可能な領域を拡張するを参照）。
display: block;を加えて、リンクが親の幅いっぱいになるようにする。

.nav-item a {
    /*Other styles*/
    padding: 12px 16px;
    display: block;
}

.nav-item a {

/*Other styles*/

padding: 12px 16px;

display: block;

}

CSSの小さな変更で、クリック可能領域が拡張されます。

クリック可能な領域が広くなった

参考

Twitterの最近のアップデートで、ナビゲーションのクリック可能な領域のサイズに問題がありました。当初は下記のようにテキストのみがクリック可能でしたが、フィードバックを受けて修正されました。

Twitterのナビゲーション、修正前と修正後

セクションヘッダのクリック可能な領域を拡張する

場合によっては、セクションヘッダの反対側に「もっと見る」ボタンや矢印を追加することがあります。下記の例では、矢印に偽りの円を使用して正しく中央に配置できるようにしました。

通常、矢印の周辺のスペースはpadding、またはwidthとheightで加えることができます。ケースに合わせて、選んでください。

矢印のクリック可能な領域を拡張

疑似要素を使用してクリック可能な領域を拡張する

要素にpaddingを加えたり、widthとheightを変更しただけでは、クリック可能な領域を拡張できるとは限りません。そこで、疑似要素の出番です！

クリック可能な領域を拡張する疑似要素の使い方

疑似要素は親に属しているため、特定のwidthとheightを持つ疑似要素を作成すると、疑似要素は親のクリック・タッチ・ホバー領域として機能します。

どのように使用するか実際に見てましょう。

ハンバーガーメニューに疑似要素でクリック可能な領域を拡張

ハンバーガーメニューに:after疑似要素を使用して、クリック可能な領域を拡張します。CSSは下記の通りです。

説明用に、left: 55px;で疑似要素をずらして配置しています。実際に使用する時はハンバーガーメニューと重なるように配置してください。

.menu-2:after {
  content: "";
  position: absolute;
  left: 55px;
  top: 0;
  width: 50px;
  height: 50px;
  background: #e83474;
  /*Other styles*/
}