WCAG 2.2 ガイドライン「2.5.8 ターゲットサイズ（最小）」Level AA について
はじめに
WCAG 2.2の「2.5.8 ターゲットサイズ（最小）」は、ポインター入力用のターゲット（例: ボタンやリンク）のサイズが少なくとも24×24 CSSピクセルであることを求めています。この基準は、ユーザーが正確に操作できるターゲットを確保し、特にタッチスクリーンや小さなデバイスでの誤操作を防ぐことを目的としています。
1. 基準の概要
要件
ポインター入力用のターゲットは、少なくとも24×24 CSSピクセルのサイズを確保する必要があります。ただし、以下の場合は例外が認められます：
- リンクがインラインテキスト内にある場合
（例: 段落内のリンク）。 - ターゲットが同じ機能を提供する他のターゲットと重なっている場合
（例: クリック可能なアイコンが重複している）。 - ターゲットのサイズが制約のために小さい場合
（例: 必要なスペースが確保できないデザイン）。 - ターゲットがユーザーエージェントに依存する場合
（例: ブラウザで提供されるデフォルトのコントロール）。
2. 実装方法
a. 最小サイズを設定する
ターゲットが小さくなりすぎないよう、min-heightおよびmin-widthを使用してサイズを確保します。
例: ボタンの最小サイズを設定
HTML
<button>送信</button>
CSS
button {
min-width: 24px;
min-height: 24px;
padding: 8px;
}
- この設定により、ボタンが24×24ピクセル以上のサイズになります。
b. ターゲット間の間隔を確保する
ターゲット同士が近すぎると誤操作の原因になります。十分な間隔を確保しましょう。
例: ターゲット間のスペースを確保
HTML
<div>
<button>前へ</button>
<button>次へ</button>
</div>
CSS
button {
margin: 12px; /* ボタン間にスペースを確保 */
}
c. レスポンシブデザインでターゲットを調整
デバイスや画面サイズに応じて、ターゲットサイズを動的に調整します。
例: 小さい画面でのターゲットサイズ
CSS
@media (max-width: 600px) {
button {
min-width: 30px;
min-height: 30px;
}
}
d. インラインリンクを適切にデザイン
インラインリンクが小さくなるのを防ぐため、周囲に余白を追加します。
例: インラインリンクの操作性向上
HTML
<p>詳しくは<a href="#">こちら</a>をご覧ください。</p>
CSS
a {
padding: 5px; /* クリックしやすい領域を拡大 */
}
3. よくある失敗例とその改善策
a. ターゲットが小さすぎる
失敗例
button {
width: 20px;
height: 20px;
}
問題点
- ターゲットが24×24 CSSピクセル未満であり、誤操作のリスクが高い。
改善策
button {
min-width: 24px;
min-height: 24px;
}
b. ターゲットが密集している
失敗例
- 複数のボタンやリンクが近接して配置されている。
改善策
- ターゲット間に十分なスペースを追加。
4. アクセシビリティのメリット
a. 誤操作の軽減
- ターゲットが適切なサイズで配置されていれば、特にタッチデバイスでの誤操作を防ぎます。
b. 操作のしやすさ向上
- 手や指の大きさに関係なく、すべてのユーザーが簡単に操作できます。
c. ユーザー体験の向上
- 明確で操作しやすいデザインは、ユーザーに安心感を与えます。
5. テスト方法
a. 手動テスト
- 各ターゲットのサイズが24×24 CSSピクセル以上であることを確認。
- ターゲット間の間隔が十分で、誤操作が発生しにくいことをチェック。
b. 自動テストツール
- AxeやWAVEなどを使用して、ターゲットサイズが基準を満たしているか検証。
まとめ
WCAG 2.2の「2.5.8 ターゲットサイズ（最小）」は、すべてのポインター入力ターゲットが少なくとも24×24 CSSピクセル以上のサイズを持つことを保証することで、操作性を向上させることを目的としています。
実装ポイント
- ターゲットの最小サイズを24×24 CSSピクセルに設定する。
- ターゲット間の間隔を調整して誤操作を防ぐ。
- レスポンシブデザインを活用して、すべてのデバイスで操作しやすいターゲットを提供する。
これにより、すべてのユーザーが操作しやすく、使いやすいウェブコンテンツを実現できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。