アクセシビリティ

WCAG 2.2 レベル AA を目安とした基準、ページ全体で守るルール、自動チェックと手動での確認方法

視覚・聴覚・運動・認知などに制約のある利用者も、同じ情報にたどり着いて同じ操作ができるように制作します。 基準は WCAG 2.2 のレベル AA を目安とします。

要素ごとの書き方は、次のページにまとめています。

• 要素の使い分け: ランドマーク、ボタンとリンク、フォーム、ダイアログ
• 見出しタグ: 見出しの階層構造
• パスとリンク: 固定ヘッダーとページ内リンク、別タブで開くリンク
• 画像・メディアのアクセシビリティ: alt 属性、アイコンボタン、SVG、動画・アニメーション

ページ全体で守るルール

特定の要素ではなく、ページやサイト全体の作りで決まるルールです。デザインの段階で決まるものが多いため、デザイナーとも共有してください。

キーボード操作とフォーカス

• すべての操作を、キーボードだけで行えるようにします。マウスホバーでしか開かないメニューや、クリックイベントを付けた div はキーボードで操作できません。
• フォーカス中の要素が見えるようにします。outline: none でフォーカスリングを消す場合は、:focus-visible で代わりの表示を必ず用意してください。
• 固定ヘッダーやバナーの下に、フォーカス中の要素が完全に隠れないようにします（WCAG 2.4.11）。
• Tab キーで移動する順序は、見た目の順序と揃えます。CSS の order や position で見た目だけを並べ替えると、順序がずれます。

色とサイズ

• テキストのコントラスト比は 4.5 以上、大きな文字（24px 以上、または 18.66px 以上の太字）は 3 以上にします。
• ボタンの境界やフォーカス表示、意味を持つアイコンなどの UI 部品は、隣接する色と 3 以上にします。
• 色だけで情報を伝えません。必須項目やエラーは、色に加えてテキストやアイコンでも示します。
• クリック・タップの対象は 24 × 24px 以上にするか、隣の対象と十分な間隔を空けます（WCAG 2.5.8）。

拡大と表示幅

• <meta name="viewport"> に user-scalable=no や maximum-scale=1 を指定せず、ピンチ操作での拡大を妨げないようにします。
• 文字サイズを 200% に拡大しても、テキストが切れたり重なったりしないようにします（WCAG 1.4.4）。
• 幅 320px 相当の表示でも、横スクロールなしで読めるようにします（WCAG 1.4.10）。ブラウザの表示倍率を 400% にすると、幅 1280px の画面で確認できます。

動き

• 自動で動き、5 秒以上続くアニメーションやカルーセルには、一時停止・停止の手段を用意します（WCAG 2.2.2）。
• OS の「視差効果を減らす」などの設定が有効な場合は、prefers-reduced-motion でアニメーションを抑えます。

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

確認方法

自動チェックで見つかるのは、問題の一部です。「キーボードで操作できるか」「alt の内容が適切か」などは、人が確認しないと分かりません。自動チェックと手動の確認を組み合わせてください。

自動チェック

• axe DevTools（ブラウザ拡張機能）: 開発中にページ単位で確認します。
• Lighthouse の Accessibility: 公開前の確認に使います。スコアが 100 でも、問題がないことは保証されません。
• markuplint: 開発環境テンプレートで、HTML の書き方の誤りをコミット時に検出します。

手動での確認

公開前に、主要なテンプレート（トップページ、一覧、詳細、フォームなど）ごとに次を確認します。

• キーボード: マウスを使わず、Tab・Shift + Tab・Enter・Space・Esc だけで全ての操作ができるか。フォーカスが見えなくなる場所や、抜け出せなくなる場所はないか
• 拡大: ブラウザの表示倍率を 200%・400% にして、表示が崩れないか
• スクリーンリーダー: macOS・iOS の VoiceOver や、Windows の NVDA で、見出し・ランドマーク・フォームのラベルが正しく読み上げられるか

参考リソース

• WCAG 2.2 解説書（日本語訳）
• ウェブアクセシビリティ導入ガイドブック（デジタル庁）