アクセシビリティについての取り組み

WCAG 2.2 AAA に向けて

アクセシビリティとは

アクセシビリティとは、年齢や障害の有無、利用環境の違いに関わらず、誰もが情報やサービスを支障なく利用できることです。たとえば「画面が見えなくても読み上げで内容がわかる」「マウスが使えなくてもキーボードだけで操作できる」「明るい屋外でも文字がはっきり読める」── こうした配慮は障害のある方だけでなく、高齢の方や一時的にケガをしている方を含む、すべての利用者の使いやすさにつながります。

方針

relay Design System は WCAG 2.2 Level AA を目指す設計です。下の表で、各達成基準を「デザインシステムが担保する項目」と「プロダクト側で実装が必要な項目」に切り分けて把握できます。

試験について

試験は WAIC「JIS X 8341-3:2016 試験実施ガイドライン」 に従って行います。下表は各達成基準への対応内容と、デザインシステム側での担保状況を示します。

デザインシステム（DS）担保 列: ✓ = コンポーネント / トークンで担保 ・ △ = デザインシステムが下地を提供（プロダクトが正しく使う）・ — = プロダクト側 / コンテンツ次第。

Perceivable (知覚可能)

1.x — 全 29 基準

達成基準
レベル
DS 担保
具体的な対応内容
1.1.1 非テキストコンテンツ A — 画像に alt、装飾は alt=""、アイコンボタンに aria-label、グラフ・図に内容説明
1.2.1 音声のみ・映像のみ（収録済） A — 音声のみに書き起こし、映像のみに音声解説またはテキスト説明
1.2.2 キャプション（収録済） A — 収録済み動画に同期字幕（セリフ＋話者＋効果音）
1.2.3 音声解説/メディア代替（収録済） A — 動画の視覚情報を音声解説、または全文テキスト代替を提供
1.2.4 キャプション（ライブ） AA — ライブ配信にリアルタイム字幕
1.2.5 音声解説（収録済） AA — 収録済み動画に音声解説トラックを追加
1.2.6 手話（収録済） AAA — 収録済み動画に手話通訳（ワイプ等）を提供
1.2.7 拡張音声解説（収録済） AAA — 通常の音声解説で不足する場合、再生を止めて拡張音声解説
1.2.8 メディアに対する代替（収録済） AAA — 視覚情報も含む全文書き起こしを用意
1.2.9 音声のみ（ライブ） AAA — ライブ音声に同時文字起こし（キャプション）
1.3.1 情報及び関係性 A △ 見出し・リスト・表を適切な HTML セマンティクスで表現
1.3.2 意味のある順序 A △ DOM 順序＝読み上げ順序を保つ
1.3.3 感覚的特徴 A — 形・位置・色・音だけに依存しない説明
1.3.4 表示の向き AA — 縦横どちらの向きでも利用可能（固定しない）
1.3.5 入力目的の特定 AA △ 入力欄に autocomplete 属性
1.3.6 目的の特定 AAA △ UI 部品の目的を ARIA ランドマーク / role で判別可能に
1.4.1 色の使用 A △ エラー・リンク・必須を色だけで示さない
1.4.2 音声の制御 A — 3 秒超の自動再生音声に停止・音量手段
1.4.3 最低限のコントラスト AA ✓ 通常テキスト 4.5:1、大きい文字（24px / 太字 18.66px）3:1
1.4.4 テキストのサイズ変更 AA △ ブラウザ 200% 拡大で情報・機能が失われない（rem 等を使用）
1.4.5 文字画像 AA ✓ 文字は画像でなくテキストで表現（ロゴ等の例外を除く）
1.4.6 高度なコントラスト AAA ✓ 通常テキスト 7:1（text-fg-high / text-fg-middle）、大きい文字 4.5:1
1.4.7 小さな背景音 AAA — 収録済み音声の背景音は前景より 20dB 以上小さく、または無し
1.4.8 視覚的提示 AAA △ 段落幅・行間 1.5・両端揃え無し・配色変更・200% 対応
1.4.9 文字画像（例外なし） AAA — ロゴ以外はテキストを画像化しない（例外なし）
1.4.10 リフロー AA △ 幅 320px 相当（400% 拡大）で二次元スクロールなし
1.4.11 非テキストのコントラスト AA △ UI 部品・図形を背景と 3:1 以上
1.4.12 テキストの間隔 AA △ 行間 1.5 倍・段落間 2 倍・文字間 0.12em・単語間 0.16em に調整しても破綻しない
1.4.13 ホバー/フォーカスで表示 AA — ツールチップ等は消去可能・ホバー維持可能・離脱まで表示継続

Operable (操作可能)

2.x — 全 34 基準（2.2 で 5 基準追加）

達成基準
レベル
DS 担保
具体的な対応内容
2.1.1 キーボード A ✓ 全機能をキーボードのみで操作可能
2.1.2 キーボードトラップなし A ✓ フォーカスが特定要素から抜け出せる（モーダルは Esc 等）
2.1.3 キーボード（例外なし） AAA ✓ タイミング依存もなくキーボードで全操作
2.1.4 文字キーショートカット A — 単一文字ショートカットは無効化 / 修飾キー併用 / フォーカス時のみ
2.2.1 タイミング調整可能 A — 制限時間をオフ / 10 倍延長 / 事前警告で延長可
2.2.2 一時停止・停止・非表示 A — 自動の動き・点滅・自動更新を止める手段
2.2.3 タイミング非依存 AAA — 利用にタイミングを要求しない
2.2.4 割り込み AAA — 通知・割り込みを延期 / 抑止できる
2.2.5 再認証 AAA — セッション切れ後の再認証でデータを失わない
2.2.6 タイムアウト AAA — データ損失を伴うタイムアウトの 20 秒以上前に警告
2.3.1 3 回の閃光、又は閾値以下 A ✓ 1 秒に 3 回以上の閃光を含めない
2.3.2 3 回の閃光 AAA ✓ どのコンテンツにも閃光を含めない
2.3.3 インタラクションによるアニメーション AAA △ prefers-reduced-motion でモーションを無効化
2.4.1 ブロックスキップ A — 「本文へスキップ」リンクを冒頭に配置
2.4.2 ページタイトル A — 各ページに固有で説明的な <title>
2.4.3 フォーカス順序 A △ Tab 順序が意味と操作可能性を保つ（tabindex 正値を避ける）
2.4.4 リンクの目的（コンテキスト内） A △ リンク文言＋周辺文脈で目的が分かる
2.4.5 複数の手段 AA — ナビ / 検索 / サイトマップ等 2 つ以上の導線
2.4.6 見出し及びラベル AA △ セクション見出し・フォームラベルを明確に
2.4.7 フォーカスの可視化 AA ✓ フォーカス時に視覚的な focus ring（--shadow-focus-ring）
2.4.8 現在位置 AAA — パンくず・aria-current="page" で現在位置を提示
2.4.9 リンクの目的（リンクのみ） AAA △ リンク文言単独で目的が分かる（「こちら」を避ける）
2.4.10 セクション見出し AAA △ 各セクションに見出しを付与
2.4.11 フォーカスの非遮蔽（最低限） AA — フォーカス中の要素が固定ヘッダー等に完全には隠れない
2.4.12 フォーカスの非遮蔽（高度） AAA — フォーカス中の要素が全く隠れない
2.4.13 フォーカスの外観 AAA △ フォーカスリングが十分な面積＋3:1 のコントラスト（--shadow-focus-ring）
2.5.1 ポインタジェスチャ A — マルチポイント / 軌跡ジェスチャに単一ポインタ代替
2.5.2 ポインタのキャンセル A ✓ click(mouseup) で発火し誤操作をキャンセル可能
2.5.3 名前のラベル A △ 視覚ラベルの文言をアクセシブル名に含める
2.5.4 動きによる起動 A — デバイスの動き起動に UI 代替＋無効化
2.5.5 ターゲットのサイズ（高度） AAA △ ポインタ対象 44×44px 以上（lg サイズを使う）
2.5.6 入力メカニズムの共存 AAA ✓ キーボード / マウス / タッチを併用可能
2.5.7 ドラッグ動作 AA — ドラッグ操作に単一ポインタ（タップ等）の代替を用意
2.5.8 ターゲットのサイズ（最低限） AA △ ポインタ対象 24×24px 以上（ボタン / 入力系は最小 sm でも 32px。checkbox / radio / switch の sm はラベル併用か間隔で確保）

Understandable (理解可能)

3.x — 全 21 基準（2.2 で 4 基準追加）

達成基準
レベル
DS 担保
具体的な対応内容
3.1.1 ページの言語 A — <html lang="ja"> を設定
3.1.2 一部分の言語 AA — 異なる言語部分に lang 属性
3.1.3 一般的でない用語 AAA — 専門用語に <abbr> / <dfn> や用語集
3.1.4 略語 AAA — 略語に <abbr title> や略語集
3.1.5 読解レベル AAA — 難解な文章に要約・図解を併記
3.1.6 発音 AAA — 多義語・固有名詞に <ruby> / 発音表記
3.2.1 フォーカス時 A ✓ フォーカスしただけで文脈を変えない
3.2.2 入力時 A ✓ 入力・選択で勝手に送信 / 遷移しない
3.2.3 一貫したナビゲーション AA — 繰り返すナビを同じ相対順序で配置
3.2.4 一貫した識別性 AA △ 同機能を同じラベル・アイコンで識別
3.2.5 要求による変化 AAA △ 文脈変化はユーザーの明示操作でのみ
3.2.6 一貫したヘルプ A — ヘルプ（問い合わせ・チャット等）を各ページで同じ相対順序に配置
3.3.1 エラーの特定 A △ エラー項目をテキストで特定（aria-invalid / aria-describedby）
3.3.2 ラベル又は説明文 A △ 入力欄にラベル・説明（placeholder のみは不可）
3.3.3 エラー修正の提案 AA △ 具体的な修正候補を提示
3.3.4 エラー回避（法的・金融・データ） AA — 重要操作に確認 / 取消 / 送信前検証
3.3.5 ヘルプ AAA △ 文脈に応じたヘルプを提供
3.3.6 誤り防止（すべて） AAA — すべての送信に確認 / 取消 / 検証
3.3.7 冗長な入力 A — 同一プロセスで既出情報の再入力を求めない（自動入力・選択可）
3.3.8 アクセシブルな認証（最低限） AA — 認知機能テスト（パズル等）に頼らない認証（コピペ・パスキー許可）
3.3.9 アクセシブルな認証（高度） AAA — 認知機能テストを一切課さない認証

Robust (堅牢)

4.x — 全 2 基準（4.1.1 は 2.2 で廃止）

達成基準
レベル
DS 担保
具体的な対応内容
4.1.2 名前・役割・値 A ✓ UI 部品の名前・役割・状態をプログラム的に提供（ネイティブ要素＋ARIA）
4.1.3 ステータスメッセージ AA △ 動的メッセージを role="status" / aria-live で通知