テストページに関する注意
このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。
これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。
このページは Accessibility Visualizer 拡張機能と併用することで、開発者がアクセシビリティの問題を発見・理解するのを支援する目的で作られています。
ターゲットサイズ
ボタンやリンクなどの操作ターゲットは、タッチやポインターで快適に操作できるよう、十分な大きさと間隔が必要です。WCAG 2.5.8（AA）は最小 24×24 CSS ピクセルを求め、WCAG 2.5.5（AAA）は 44×44 CSS ピクセル以上を推奨しています。小さいターゲットでも、周囲に十分な間隔があれば要件を満たせます。以下はボタンを使ってターゲットサイズと間隔のパターンを示します。
単体のターゲットサイズ
十分な大きさのボタン（44×44px）
✅ 44×44 CSS ピクセル以上のボタン。AAA の推奨（WCAG 2.5.5）を満たし、タッチやポインターでも操作しやすい大きさです。
最小サイズのボタン（24×24px）
⚠️ 24×24 CSS ピクセルのボタンは AA の最小要件（WCAG 2.5.8）を満たしますが、ぎりぎりの大きさです。快適な操作のためには 44×44px 以上を推奨します。
小さすぎるボタン（16×16px）
❌ 16×16 CSS ピクセルのボタンは最小の 24×24px を下回っています。正確にタップしづらく、WCAG 2.5.8 を満たしません。
ターゲット間の間隔
小さすぎるボタンが密集した状態
❌ 小さすぎるボタンを間隔なく並べたもの。ターゲットが小さいうえに隣接しているため、誤って隣を押しやすくなります。
大きなボタンと小さなボタンが隣接した状態
❌ 大きなボタンの隣に小さなボタンを間隔なく配置したもの。片方が大きくても、小さいほうはサイズ不足のうえ近すぎるため、意図しないボタンを押しやすくなります。
小さいターゲットの間隔を確保した状態
✅ 同じ小さいボタンでも、各ターゲットを中心とした直径 24px の円が隣と重ならないだけの間隔を空けたもの。WCAG 2.5.8 の間隔に関する例外を満たします。ターゲット自体を 44×44px にできればより望ましいです。