[improvement] アクセシビリティ(WCAG 2.2 AA) 対応

[Andyou007]

Subject

アクセシビリティの国際基準を自動判定してくれるソフトウェアが公開されていたので、使ってみる。自動実行(Github Actions)するので、都度判定結果を確認し、必要な個所はOKになるように調整する。

目標は WCAG 2.2 A+AAグレードの達成。達成には、自動判定だけでなく、手動チェックリストも必要。

手動チェックリスト

• チェックリスト

各項目の説明文どおりなら OK、そうでなければ NG。(一部自動) は axe が拾えない部分だけ目視で確認する。

Level A

• 1.2.1 音声のみ・映像のみ(収録済) — 音声のみ/映像のみのコンテンツに、内容が同等の代替(テキスト等)が用意されている
• 1.2.2 キャプション(収録済) — 収録済み動画に、話者・効果音まで正確なキャプションが付いている
• 1.2.3 音声解説またはメディア代替(収録済) — 収録済み動画に、音声解説かテキスト台本のどちらかがある
• 1.3.2 意味のあるシーケンス(一部自動) — スクリーンリーダーで読み上げた順序が、見た目の意図どおりで意味が通る
• 1.3.3 感覚的な特徴 — 「右のボタン」「丸いアイコン」など、形・位置・色・音だけに頼った説明をしていない
• 1.4.1 色の使用 — リンク・必須項目・エラーなどを、色だけでなくテキストや記号でも区別している
• 2.1.1 キーボード(一部自動) — マウスなしで、すべての機能をキーボードだけで操作できる
• 2.1.2 キーボードトラップなし — Tab で入った要素から、Tab や Esc で外に抜けられる(閉じ込められない)
• 2.1.4 文字キーのショートカット — 1文字キーのショートカットがある場合、無効化・再割当・フォーカス時のみ有効のいずれかができる(なければ該当なし=OK)
• 2.2.1 調整可能な時間制限 — 制限時間がある場合、解除・延長・調整のいずれかができる(制限がなければ該当なし=OK)
• 2.2.2 一時停止・停止・非表示(一部自動) — 5秒以上続く自動的な動き・点滅・自動更新を、止める/隠す手段がある(該当要素がなければOK)
• 2.3.1 3回の閃光 — 1秒間に3回を超える閃光がない(該当する激しい点滅コンテンツがなければOK)
• 2.4.3 フォーカス順序(一部自動) — Tab で移動する順序が、見た目・操作の流れと一致している
• 2.4.4 リンクの目的(コンテキスト内)(一部自動) — リンク文言だけ、または前後の文脈から、リンク先が何か分かる
• 2.5.1 ポインタのジェスチャ — ピンチ・スワイプなど複雑な操作に、タップ等の単純な代替手段がある
• 2.5.2 ポインタのキャンセル — 押した指を離す/外にずらすことで、誤操作を取り消せる(押した瞬間に実行されない)
• 2.5.3 ラベルを含む名前(一部自動) — ボタン等の見た目のラベル文字が、アクセシブル名(読み上げ名)にそのまま含まれる
• 2.5.4 動きによる起動 — 端末を振る・傾けるなどの操作に代替手段があり、かつ無効化できる(なければ該当なし=OK)
• 3.2.1 フォーカス時 — 要素にフォーカスしただけでは、ページ移動・送信など予期せぬ変化が起きない
• 3.2.2 入力時 — 値の入力・選択だけでは、予期せぬ変化が起きない(起きるなら事前に説明がある)
• 3.3.1 エラーの特定(一部自動) — 入力エラーの箇所と内容が、テキストで具体的に示される
• 3.3.2 ラベルまたは説明(一部自動) — 各入力欄に、何を入れるか分かるラベルまたは説明がある
• 3.2.6 一貫したヘルプ(2.2新規) — 問い合わせ先やヘルプへの導線が、全ページで同じ位置にある
• 3.3.7 冗長な入力(2.2新規) — 同じ手続きの中で、一度入力した情報の再入力を求めていない(自動補完/選択で済む)

Level AA

• 1.2.4 キャプション(ライブ) — ライブ配信の音声に、リアルタイムのキャプションが付いている
• 1.2.5 音声解説(収録済) — 収録済み動画に、音声解説が付いている
• 1.3.4 表示の向き(一部自動) — 縦・横どちらの向きでも表示・操作できる(片方に固定していない)
• 1.3.5 入力目的の特定(一部自動) — 氏名・メール等の欄に適切な autocomplete が設定され、意図に合っている
• 1.4.5 文字画像 — 文字は原則テキストで表現し、画像化していない(ロゴ等は例外=OK)
• 1.4.10 リフロー — 幅320px相当で、横スクロールなしに読める
• 1.4.13 ホバー/フォーカスで表示されるコンテンツ — ホバー/フォーカスで出る要素が、消せる・ホバーを維持できる・自動で消えない、の3条件を満たす
• 2.4.5 複数の到達手段 — 各ページに、ナビ・検索・サイトマップ等、2通り以上の到達手段がある(手続きの途中ページは例外=OK)
• 2.4.6 見出し及びラベル(一部自動) — 見出しとラベルが、内容や目的を的確に表している
• 2.4.7 フォーカスの可視化(一部自動) — キーボード操作中、今どこにフォーカスがあるか見て分かる
• 2.4.11 フォーカスの非遮蔽(最低限)(2.2新規) — フォーカス中の要素が、固定ヘッダ等で完全に隠れない
• 2.5.7 ドラッグ動作(2.2新規) — ドラッグ操作に、単純なクリック/タップの代替がある(なければ該当なし=OK)
• 2.5.8 ターゲットサイズ(最低限)(2.2新規)(一部自動) — クリック対象が24×24px以上、または十分な間隔がある(axeの警告に対し例外の妥当性を目視確認)
• 3.1.2 一部分の言語(一部自動) — 本文と異なる言語の語句に、lang 属性が正しく指定されている
• 3.2.3 一貫したナビゲーション — 共通のナビゲーションが、全ページで同じ順序で並んでいる
• 3.2.4 一貫した識別性 — 同じ機能のアイコン・ボタンが、全ページで同じ名前・表示になっている
• 3.3.3 エラー修正の提案 — 入力エラー時に、修正方法の具体的な提案が示される(提案可能な場合)
• 3.3.4 エラー回避(法的・金融・データ) — 送信内容を、取消・確認・修正のいずれかで見直せる
• 3.3.8 アクセシブルな認証(最低限)(2.2新規) — ログイン時にパズルや暗記など認知テストを課していない(パスワード貼付け・自動補完を許可)
• 4.1.3 ステータスメッセージ — 「保存しました」「3件ヒット」等の状態通知が、フォーカスを移さずスクリーンリーダーに伝わる(role="status"/aria-live 等)

[Andyou007]

Created Github Actions. Still I have to adjust paths to root dir.

[Andyou007]

Actions works both in light and dark modes.