WCAG 2.2 ガイドライン「2.5.5 ターゲットサイズ（強化）」Level AAA について
はじめに
WCAG 2.2の「2.5.5 ターゲットサイズ（強化）」は、ポインター（例: マウスや指）で操作するターゲットのサイズが少なくとも44×44 CSSピクセルであることを求めています。この基準は、小さなターゲットが操作しづらい状況を改善し、特にモバイルデバイスやタッチスクリーンでの操作性を向上させることを目的としています。
1. 基準の概要
要件
ポインター操作が必要なターゲット（例: ボタン、リンクなど）は、少なくとも44×44 CSSピクセルのサイズを確保する必要があります。
例外
以下のケースでは例外が認められます：
- リンクがインラインに配置されている場合
（例: 段落内のリンク）。 - ターゲットが等価な代替手段を提供している場合
（例: 同じ操作を他の方法で実行可能）。 - ターゲットが不可欠な制約によって小さい場合
（例: ピクセルサイズが制限される特定のレイアウト）。 - ターゲットがユーザーエージェントに依存している場合
（例: ブラウザのコントロール）。
2. 実装方法
a. ターゲットサイズを44×44 CSSピクセル以上にする
ターゲットの大きさを明確に指定し、指やポインターで操作しやすくします。
例: ボタンのサイズを確保
HTML
<button>送信</button>
CSS
button {
width: 44px;
height: 44px;
padding: 10px;
font-size: 16px;
}
b. インラインリンクの操作性を向上させる
段落内のインラインリンクは小さくなりがちですが、周囲に余白を加えることで操作しやすくします。
例: インラインリンクの余白を確保
HTML
<p>詳しくは<a href="#">こちら</a>をご覧ください。</p>
CSS
a {
padding: 10px;
}
c. 間隔を調整してターゲットの重複を防ぐ
複数のターゲットが密接している場合、適切な間隔を確保します。
例: ターゲット間のスペースを確保
HTML
<div>
<button>前へ</button>
<button>次へ</button>
</div>
CSS
button {
margin: 10px;
}
d. レスポンシブデザインでターゲットサイズを適応
画面サイズに応じてターゲットサイズを調整します。
例: メディアクエリを使用
CSS
@media (max-width: 600px) {
button {
width: 60px;
height: 60px;
}
}
3. よくある失敗例とその改善策
a. ターゲットが小さすぎる
失敗例
<button style="width: 30px; height: 30px;">クリック</button>
問題点
- 44×44 CSSピクセル未満であり、特にタッチ操作が難しい。
改善策
<button style="width: 44px; height: 44px;">クリック</button>
b. 複数のターゲットが密集
失敗例
- ボタンやリンクが近すぎて、誤操作のリスクが高い。
改善策
- ターゲット間に十分なスペースを確保。
4. アクセシビリティのメリット
a. タッチデバイスでの操作性向上
- タッチスクリーンでの操作ミスが減少します。
b. ユーザー体験の向上
- 視覚障害や運動障害のあるユーザーも、操作が容易になります。
c. デザインの一貫性
- 明確で一貫性のあるインターフェースを提供できます。
5. テスト方法
a. 手動テスト
- 各ターゲットのサイズを測定し、44×44 CSSピクセル以上であることを確認。
- ターゲット間の間隔をチェックし、誤操作が発生しにくいか確認。
b. 自動テストツール
- AxeやWAVEを使用してターゲットサイズを検証。
まとめ
WCAG 2.2の「2.5.5 ターゲットサイズ（強化）」は、ポインターで操作するターゲットが44×44 CSSピクセル以上のサイズを持つことを保証することで、操作性を向上させることを目的としています。
実装ポイント
- ターゲットサイズを44×44 CSSピクセル以上に設定する。
- ターゲット間の間隔を調整して誤操作を防ぐ。
- レスポンシブデザインを活用して、デバイスに応じた最適なサイズを提供する。
これにより、すべてのユーザーが快適に操作できるウェブコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。