クリックやタップができる領域を広くする
UIデザイン実装
概要
この基準では、ボタンやリンクなどのクリック・タップ可能な要素のターゲット領域が十分な大きさであることを確認してください。 拡大鏡を使用しているユーザーは、小さなターゲットを正確に操作することが困難な場合があります。 ターゲット領域を広くすることで、操作のしやすさが向上するだけでなく、視認性が向上します。 ただし、文章中のテキストリンクは行の高さによってクリック領域の高さが制約されるため、この基準の対象外です。
メリット
- 拡大鏡を使用しているユーザーが、ターゲットを見つけやすく、正確に操作しやすくなります。
- 端末の画面が小さい場合でも、ユーザーがターゲットを操作しやすくなります。
達成方法
- 24px×24px以上のターゲット領域を確保:
- クリック・タップ可能な要素の最低サイズを24px×24px以上にします。
- 可能であれば、44px×44px以上のターゲット領域を確保することが推奨されます。
- ラベルや余白の追加:
- アイコンボタンなど視覚的に小さい要素は、
Paddingなどを追加するなどしてクリック可能な領域が24px×24px以上になるように拡張します。 - ラベルテキストを追加できるスペースがある場合は、ラベルテキストを追加してクリック可能な領域を拡張します。
- アイコンボタンなど視覚的に小さい要素は、
- 余白の確保:
- デザインの都合上どうしてもクリック領域を24px×24px以上に拡張できない場合は、クリック可能な要素の周囲に十分な余白を確保します。クリック領域が小さい要素の隣接を避け、余白を含めた領域が24×24px以上になるようにデザインします。
テスト方法
実装後の画面の確認:
- 実装後の画面で、検証ツールなどを使用して、ボタン、リンク、フォームコントロールなどのクリック・タップ可能な要素の大きさが24px×24px以上であることを確認します。
- 「24px×24px以上である」とは、クリック・タップできる要素の高さ・横幅の両方が、24px×24pxの枠より大きい状態を指します。