アクセシビリティチェックの具体的なチェックの流れ
アクセシビリティチェックを行う時に、チェック項目が被っていたりツールを往復する事があったので、自分なりに効率的なチェック方法を確立したので流れを示します。
下準備
以下の内容を決めます
- WCAGのバージョン
- 達成基準
- 対象URL
検査結果を記述するとき一般的にはチェック項目ごとですが、チェック時には愚直にページとチェック項目をすべて記載したスプレッドシートなどを使うと良いです。
必要なツール
axe DevTools
Accessibility Visualizer
検査の流れ
ざっくり以下の流れでチェックしていきます
検査項目が多岐にわたるので、同じUIでも行ったり来たりしますが以下の流れが効率が良かったです。
- 登場機会が少なくすぐにチェックできるもの
- ページのメインのコンテンツチェック
- ページのメインのHTML構造チェック
- よく登場する特殊なUIのチェック
- キーボード操作チェック
また、基本的に各項目の理解が必須です。最初は項目を逐一見ながらチェックすることをおすすめします
1. 音声や動画の代替コンテンツのチェック
チェックの流れ
まず、登場することの少ない映像や音声のコンテンツの有無をチェックします。
ほとんどの場合適合なしということでスキップします。適合する場合はチェック項目を確認します。
チェックする項目
- 音声・映像コンテンツに代替手段がある (1.2.1 - 知覚可能性: 代替テキスト)
- 収録済み音声コンテンツに字幕がある (1.2.2 - 知覚可能性: 時間依存メディアの代替コンテンツ)
- 収録済み映像に音声解説またはテキストによる説明がある (1.2.3 - 知覚可能性: 時間依存メディアの代替コンテンツ)
- ライブ配信にキャプションがある (1.2.4 - 知覚可能性: 時間依存メディアの代替コンテンツ)
- 収録済み映像に音声解説トラックがある (1.2.5 - 知覚可能性: 時間依存メディアの代替コンテンツ)
- 音声の自動再生は3秒以内または制御可能 (1.4.2 - 知覚可能性: 判別可能)
2. 自動再生コンテンツのチェック
チェックの流れ
主にカルーセルや動画などの自動再生コンテンツの有無をチェックします。
カルーセルは頻繁に登場し他のチェック項目がありますが、自動再生についてのチェックのみを行い次の項目に進みます。
チェックする項目
- 自動再生コンテンツは制御可能 (2.2.2 - 操作可能: キーボード)
3. その他特殊UIや機能の確認
チェックの流れ
下記のコンテンツがあるか確認します。
ほとんどの場合適合なしということでスキップします。適合する場合はチェック項目を確認します。
チェックする項目
- 時間制限の調整が可能である (2.2.1 - 操作可能: 十分な時間)
- 3回の閃光、または閃光の基準値を下回る (2.3.1 - 操作可能: 発作の防止)
4. フォントサイズをブラウザの機能で確認
チェックの流れ
ブラウザの機能でフォントサイズを200%に変更し、コンテンツの崩れがないか確認します。
チェックする項目
- フォントサイズを200%に拡大しても情報や機能が失われない (1.4.4 - 判別可能: フォントサイズ)
5. コンテンツの確認
チェックの流れ
ここからメインのチェックになります。
目視で項目に沿ってコンテンツ内容を確認します。
チェックする項目
- 意味のある順序 (1.3.2 - 適切なシーケンス)
- 感覚的な特徴 (1.3.3 - 感覚的な特徴)
- 色の使用 (1.4.1 - 色の使用)
- 文字画像 (1.4.5 - 文字画像)
- リンクの目的（コンテキスト内） (2.4.4 - リンクの目的（コンテキスト内）)
- 複数の手段 (2.4.5 - 複数の手段)
- 見出しとラベル (2.4.6 - 見出しとラベル)
- 一貫したナビゲーション (3.2.3 - 一貫したナビゲーション)
- 一貫した識別性 (3.2.4 - 一貫した識別性)
6. コントラストの確認
チェックの流れ
axe DevToolsでチェックします。背景画像等があるときは手動でコントラストの検査します。
チェックする項目
- テキストや文字画像のコントラストを確保する (1.4.3 - 判別可能: コントラスト)
7. ページのlang属性とtitleの確認
チェックの流れ
Accessibility Visualizerで目視確認します。
チェックする項目
- ページに適切なタイトルがある (2.4.2 - 判別可能: コンテンツの提示順序)
- ページの言語が指定されている (3.1.1 - 判別可能: 言語)
8. HTML構造の確認
チェックの流れ
最初にaxe DevToolsでベースのチェックを行い内容を確認します。
その上でAccessibility Visualizerで目視確認します。
チェックする項目
- 画像に代替テキストを提供する (1.1.1 - 判別可能: テキストの代替)
- 情報や関係性を適切にマークアップする (1.3.1 - 理解可能: コンテンツの提示順序)
- 一部分の言語を指定する (3.1.2 - 判別可能: 言語)
- ページ内を案内する情報を提供する (2.4.1 - 判別可能: コンテンツの提示順序)
- HTMLの文法に準拠する (4.1.1 - 判別可能: コンテンツの提示順序)
9. カルーセル、モーダル、アコーディオンなど特殊なUI
チェックの流れ
カルーセル、モーダル、アコーディオン、入力フォームなどの特殊なUIがあるかチェックします。
ここではWAI-ARIA対応が行われているかのみ確認します。
チェックする項目
- HTMLで表現できるUIは独自に作らない。必要な場合はWAI-ARIA使用 (4.1.2 - 判別可能: コンテンツの提示順序)
10. 入力フォーム
チェックの流れ
入力フォームがあれば、手動で動作を確認します。
チェックする項目
- 見出しとラベルが適切 (2.4.6 - 判別可能: コンテンツの提示順序)
- エラー発生箇所と説明が明確 (3.3.1 - 判別可能: コンテンツの提示順序)
- 入力フォームに適切なラベルと説明がある (3.3.2 - 判別可能: コンテンツの提示順序)
- エラーの回避方法が具体的に示されている (3.3.3 - 判別可能: コンテンツの提示順序)
- 重要な操作に確認・チェック・取り消しの仕組みがある (3.3.4 - 判別可能: コンテンツの提示順序)
11. キーボード操作チェック
チェックの流れ
キーボードだけで操作可能か手動で確認します。
特にカルーセル、モーダル、アコーディオンなど特殊なUIは入念に確認します。
チェックする項目
- キーボードだけで操作可能 (2.1.1 - 操作可能: キーボード)
- キーボードトラップがない (2.1.2 - 操作可能: キーボード)
- 適切なフォーカス順序 (2.4.3 - 判別可能: コンテンツの提示順序)
- フォーカスが可視化されている (2.4.7 - 判別可能: コンテンツの提示順序)
- フォーカス時の予期しない動作がない (3.2.1 - 判別可能: コンテンツの提示順序)
- 入力中の予期しないページ移動や送信がない (3.2.2 - 判別可能: コンテンツの提示順序)
Discussion