WCAG 2.1 基準
19.1.1. 準拠レベル
TQS フロントエンド規格は WCAG (Web Content Accessibility Guidelines) 2.1 の AA レベル準拠を必須 として要求します。
| レベル | 説明 | TQS 要求事項 |
|---|---|---|
| A | 最低レベルのアクセシビリティ。すべてのユーザーがコンテンツにアクセスできる基本要件 | 必須 |
| AA | 一般的なレベルのアクセシビリティ。大部分の障害タイプに対するアクセシビリティ保証 | 必須 |
| AAA | 最高レベルのアクセシビリティ。特殊な状況まで包括する強化された基準 | 推奨 |
- A レベルと AA レベルのすべての達成基準を満たさなければなりません。
- AAA レベルはプロジェクトの特性に応じて選択的に適用することができます。
- 新規プロジェクトは初期設計段階から AA レベルを反映しなければなりません。
19.1.2. 4大原則
WCAG 2.1 は以下の4大原則に基づいています。各原則の主要ガイドライン項目を遵守しなければなりません。
知覚可能(Perceivable)
- すべての非テキストコンテンツ（画像、アイコンなど）に代替テキストを提供しなければなりません。
- マルチメディアコンテンツには字幕またはトランスクリプトを提供しなければなりません。
- コンテンツは構造と関係をプログラム的に決定できなければなりません。
- 色だけで情報を伝達してはなりません。
操作可能(Operable)
- すべての機能はキーボードのみで操作できなければなりません。
- 時間制限のあるコンテンツはユーザーが時間を調整できなければなりません。
- 1秒あたり3回以上点滅するコンテンツを使用してはなりません。
- ユーザーがコンテンツを探索し、現在位置を把握できる手段を提供しなければなりません。
理解可能(Understandable)
- ページの言語を
<html lang="ko">のように明示しなければなりません。 - 入力エラーを自動的に検知し、エラー内容をテキストで案内しなければなりません。
- 一貫したナビゲーションと一貫した識別方式を維持しなければなりません。
- ユーザーの意図と異なるコンテキスト変更が自動的に発生してはなりません。
堅牢(Robust)
- 有効な HTML マークアップを使用しなければなりません。開始/終了タグ、一意の
id属性などを遵守します。 - すべての UI コンポーネントの名前と役割を支援技術が認識できなければなりません。
- ステータスメッセージはフォーカスを移動せずに支援技術に伝達されなければなりません。
19.1.3. 色のコントラスト
テキストと背景間の色のコントラスト比は以下の基準を満たさなければなりません。
| 対象 | 最小コントラスト比 | 備考 |
|---|---|---|
| 通常テキスト（18px 未満） | 4.5:1 | AA レベル必須 |
| 大型テキスト（18px 以上または 14px 以上ボールド） | 3:1 | AA レベル必須 |
| UI コンポーネントおよびグラフィック要素 | 3:1 | ボタンのボーダー、アイコンなどを含む |
- 非アクティブ状態の UI コンポーネントと純粋な装飾要素はコントラスト基準から除外されます。
- ロゴおよびブランドテキストはコントラスト基準から除外されます。
- コントラスト比は検証ツールを使用して数値で確認しなければなりません。
- ダークモードとライトモードそれぞれでコントラスト基準を満たさなければなりません。
19.1.4. 検証ツール
アクセシビリティ準拠の可否は以下のツールを使用して自動検証します。
| ツール | 用途 | 適用時点 |
|---|---|---|
| axe-core | ランタイムアクセシビリティ自動検査 | 開発および CI/CD |
| Lighthouse アクセシビリティ監査 | ビルド成果物のアクセシビリティスコア測定 | CI/CD |
| eslint-plugin-vuejs-accessibility | Vue テンプレートのアクセシビリティリントルール | コード作成時 |
- axe-core はユニットテストおよび E2E テストに統合して実行します。
@axe-core/playwrightまたはvitest-axeを使用することを推奨します。 - Lighthouse アクセシビリティ監査スコアは 90点以上 を維持しなければなりません。CI パイプラインで自動測定します。
- eslint-plugin-vuejs-accessibility は ESLint 設定に含めて、コード作成時点でアクセシビリティ違反を検知します。
bash
# eslint-plugin-vuejs-accessibility のインストール
npm install --save-dev eslint-plugin-vuejs-accessibility- 自動検証ツールだけではすべてのアクセシビリティ問題を検出できません。スクリーンリーダー（NVDA、VoiceOver）を使用した手動テストを併用することを推奨します。