---
title: アクセシビリティ
description: WCAG 2.2 レベル AA を目安とした基準、ページ全体で守るルール、自動チェックと手動での確認方法
---

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

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

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

## ページ全体で守るルール

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

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

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

### 色とサイズ

- テキストのコントラスト比は 4.5:1 以上、大きな文字（24px 以上、または 18.66px 以上の太字）は 3:1 以上にします。
- ボタンの境界やフォーカス表示、意味を持つアイコンなどの UI 部品は、隣接する色と 3:1 以上にします。
- 色だけで情報を伝えません。必須項目やエラーは、色に加えてテキストやアイコンでも示します。
- クリック・タップの対象は 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` でアニメーションを抑えます。

```css
@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;
  }
}
```

:::note
動きを完全に止める必要はありません。フェードのような小さな変化は残し、視差効果や大きく移動するアニメーションを止めるなど、デザインに合わせて調整してください。
:::

## 確認方法

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

### 自動チェック

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

### 手動での確認

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

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

:::tip[スクリーンリーダーの確認範囲]
すべてのページを読み上げで確認する必要はありません。見出しやランドマークの一覧で移動できるか、フォームやモーダル、タブなど動きのある部品が正しく伝わるかを重点的に確認してください。
:::

## 参考リソース

- [WCAG 2.2 解説書（日本語訳）](https://waic.jp/translations/WCAG22/Understanding/)
- [ウェブアクセシビリティ導入ガイドブック（デジタル庁）](https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook)