🔖
アクセシビリティチェックを行うときの各項目のガイドライン

2025/03/28に公開
以前アクセシビリティでWCAGのAAをチェックしました。

その際に各項目で行う手順や確認時に気をつけることをまとめたので、残しておきます。
解釈の違いやこうした方が良いなどあればコメントいただければ幸いです！

 使うツールaxe DevTools

Accessibility Visualizer

 1.1.1 非テキストコンテンツの達成基準ドキュメントリンク

WCAG 2.1 - 1.1.1 非テキストコンテンツ
概要

ロゴ・イラスト・写真など画像に、その画像が指し示している情報が代替テキストとして記載されている。

 確認方法axe DevToolsで空のaltがないか確認
Accesibility Visualizerで適していないaltの記述がないか確認

 気をつけること装飾的な画像は空のalt属性を設定
コンテンツ的に読み上げが必須な画像には適切な代替テキストを設定
SVGにはaria-labelを適切に設定

 1.2.1 音声だけ及び映像だけ（収録済み）の達成基準ドキュメントリンク

WCAG 2.1 - 1.2.1 音声及び映像のみ（収録済み）
概要

音声または映像コンテンツに、音声または映像以外の代替手段で理解できるコンテンツがある。たとえば、収録済みの音声のみの場合はテキストによる書き起こしが提供されている。収録済みの映像の場合は、テキストによる書き起こしか、映像の内容を説明する音声が提供されている。

 確認方法目視で音声また映像コンテンツを探す
代替コンテンツが提供されているか確認

 気をつけること音声のみの場合は完全な書き起こしを提供
映像のみの場合は音声解説か同等のテキスト説明を提供
代替コンテンツは元のコンテンツと同等の情報を含める

 1.2.2 キャプション（収録済み）の達成基準ドキュメントリンク

WCAG 2.1 - 1.2.2 キャプション（収録済み）
概要

収録済みの音声コンテンツに字幕があり、聴覚障害のある人も内容を理解できる。

 確認方法目視で音声コンテンツがあるか確認
字幕があるか確認

 気をつけること音声情報を完全に文字化
話者の識別情報を含める
効果音なども字幕に含める

 1.2.3 音声解説又はメディアに対する代替コンテンツ(収録済み)の達成基準ドキュメントリンク

WCAG 2.1 - 1.2.3 音声解説又はメディアに対する代替コンテンツ(収録済み)
概要

収録済みの映像に、音声解説（シーンの移り変わりや登場人物の表情などの視覚的な情報を音声で説明したもの）または、テキストによる書き起こし（視覚的な情報、会話や笑い声なども含む）が提供されている。

 確認方法目視で映像コンテンツがあるか確認
代替コンテンツがあるか確認

 気をつけること視覚的な情報を適切に音声で説明
会話や効果音も含めた完全な書き起こし
音声解説のタイミングが適切か確認

 1.2.4 キャプション（ライブ）の達成基準ドキュメントリンク

WCAG 2.1 - 1.2.4 キャプション（ライブ）
概要

リアルタイムに配信する映像や音声にキャプションが提供されている。

 確認方法目視でリアルタイムで配信するコンテンツが有るか確認
キャプションが提供されているか確認

 気をつけることリアルタイムでの字幕表示
適切な遅延時間の設定
音声認識の精度向上

 1.2.5 音声解説(収録済み)の達成基準ドキュメントリンク

WCAG 2.1 - 1.2.5 音声解説(収録済み)
概要

収録済みの映像に、音声解説を含む（利用者がオン・オフできる）音声トラックが付与されているか、映像の音声解説つきバージョンが提供されている。

 確認方法映像コンテンツがあるか確認
音声解説が付与されているか確認

 気をつけること音声解説のオン/オフ切り替え機能
適切な音量バランス
視覚情報の漏れがないこと

 1.3.1 情報及び関係性の達成基準ドキュメントリンク

WCAG 2.1 - 1.3.1 情報及び関係性
概要

ページの情報が適切にHTMLで構造化されている。色、形、配置に依存した情報が、読み上げた場合にもきちんと伝わるようになっている。

 確認方法axe DevToolsでHTML文法が適切か確認
見出しが適切につけられているか確認
テーブルやリストなど、適切なマークアップタグでマークアップできているか確認
フォームでラベルと入力欄が適切に紐づけられているか確認
コンテンツで色や形、配置に依存した情報が読み上げ時に適切に伝えられる内容か確認

 気をつけること"色のみに関する情報"は1.4.1でチェックする
"コンテンツで色や形、配置に依存した情報が読み上げ時に適切に伝えられる内容"は、1.3.3と被るがこちらは読み上げ対応できているかを確認

 1.3.2 意味のある順序の達成基準ドキュメントリンク

WCAG 2.1 - 1.3.2 意味のある順序
概要

コンテンツが意味の通る順序で並べられている。見た目の読み順とHTMLの記述順が一致している。

 確認方法目視でコンテンツが意味のある順序になっているか確認
HTMLの記述順が一致しているか確認

 1.3.3 感覚的な特徴の達成基準ドキュメントリンク

WCAG 2.1 - 1.3.3 感覚的な特徴
概要

「右の写真」「丸いボタン」など位置関係や形に依存した表現をしない。

 確認方法目視で位置関係や形に依存したコンテンツがないか確認

 気をつけること必要なテキストの場合、全盲やロービジョンの方でもわかるように補足情報で補完するように

 1.4.1 色の使用の達成基準ドキュメントリンク

WCAG 2.1 - 1.4.1 色の使用
概要

赤字など、色の違いだけで、情報を伝えていない。白黒に変換しても理解できる。

 確認方法目視で色の違いだけで情報を伝えていないか確認
cssでbodyにfilter: grayscale(100%)を設定して白黒に変換しても情報が読み取れるか確認

 気をつけることリンクを色の違いだけで提供していないか
フォームの必須を色の違いだけで必須を表現していないか

 1.4.2 音声の制御の達成基準ドキュメントリンク

WCAG 2.1 - 1.4.2 音声の制御
概要

自動再生する音声は3秒以内に収める。自動再生が3秒以上続く場合はユーザーが止められるようする。

 確認方法目視で自動再生音声があるか確認
自動再生音声が3秒以内に収まっているか確認
自動再生音声が3秒以上続く場合はユーザーが止められるようになっているか確認

 1.4.3 コントラスト(最低限レベル)の達成基準ドキュメントリンク

WCAG 2.1 - 1.4.3 コントラスト(最低限レベル)
概要

テキストのコントラスト比を4.5:1以上にする。大きなテキスト（22ポイント(29px)以上、太字かつ18ポイント(24px)以上）の場合は、コントラスト比を3:1以上にする。

 確認方法axe DevToolsでコントラスト比が4.5:1以上か確認
画像の上にオーバーレイされているテキストがあれば手動で確認

 気をつけること背景画像との組み合わせ

 1.4.4 テキストのサイズ変更の達成基準ドキュメントリンク

WCAG 2.1 - 1.4.4 テキストのサイズ変更
概要

ブラウザの機能だけを用いて文字を200%まで拡大でき、文字が重なったり画面から見切れたりしない。

 確認方法ブラウザの機能で文字を200%まで拡大できるか確認
目視で拡大した文字が重なったり画面から見切れたりしないか確認

 1.4.5 文字画像の達成基準ドキュメントリンク

WCAG 2.1 - 1.4.5 文字画像
概要

装飾目的で、テキストを画像で作っていない。

 確認方法目視でテキストが画像で作られていないか確認

 2.1.1 キーボードの達成基準ドキュメントリンク

WCAG 2.1 - 2.1.1 キーボード
概要

キーボード操作だけで、ウェブページやウェブサービスを利用することができる。

 確認方法手動でキーボード操作を行う

 気をつけることすべての機能をキーボードで操作可能に
適切なフォーカス順序
ショートカットキーの提供

 2.1.2 キーボードトラップなしの達成基準ドキュメントリンク

WCAG 2.1 - 2.1.2 キーボードトラップなし
概要

一度フォーカスしたら抜け出せないコンテンツを作らない。モーダルダイアログや動画プレーヤーで起きやすい。

 確認方法モーダルや動画プレイヤーなどの特別なUIがないか目視確認
手動でキーボード操作を行う

 気をつけることモーダルダイアログの確認
動画プレーヤーの確認

 2.2.1 タイミング調整可能の達成基準ドキュメントリンク

WCAG 2.1 - 2.2.1 タイミング調整可能
概要

キーボード操作やコンテンツの利用時に制限時間を設けるときは、解除するか10倍以上に延長できるようにする。

 確認方法コンテンツの利用で制限時間があるものがないか目視確認

 気をつけることフォームなどに該当する

 2.2.2 一時停止，停止及び非表示の達成基準ドキュメントリンク

WCAG 2.1 - 2.2.2 一時停止，停止及び非表示
概要

自動再生するコンテンツは5秒以内に止まるかユーザーが止められるようになっている。

 確認方法目視で自動再生コンテンツがあるか確認
停止のUIがあるか確認

 気をつけることカルーセルや動画が該当

 2.3.1 3 回のせん(閃)光，又はしきい(閾)値以下の達成基準ドキュメントリンク

WCAG 2.1 - 2.3.1 3 回のせん(閃)光，又はしきい(閾)値以下
概要

画面の4分の1以上の面積で1秒に3回以上点滅させない。

 確認方法目視で閃光のコンテンツがないか確認

 2.4.1 ブロックスキップの達成基準ドキュメントリンク

WCAG 2.1 - 2.4.1 ブロックスキップ
概要

ページ中の各セクションに見出しかランドマークを設置してショートカットできる。

 確認方法Accesibility Visualizerでランドマークや見出しが適切か確認
ページの先頭にメインコンテンツへのリンクが有るか確認

 気をつけること各ブロックをスキップできるようにする
ヘッダーやサイドバーなどページをまたいで繰り返し表示されるブロックをスキップできるようにする

 2.4.2 ページタイトルの達成基準ドキュメントリンク

WCAG 2.1 - 2.4.2 ページタイトル
概要

ウェブページのタイトルが「ページ単体の内容｜サイト名」のように、内容を具体的に把握できる記述になっている。

 確認方法Accesibility Visualizerでタイトルが適切か確認

 2.4.3 フォーカス順序の達成基準ドキュメントリンク

WCAG 2.1 - 2.4.3 フォーカス順序
概要

意味が通じる、適切な順序でフォーカス位置を変更していける。

 確認方法手動でフォーカス順序を確認

 気をつけることモーダルやタブUIなどで適切なフォーカスが実施されているか

 2.4.4 リンクの目的(コンテキスト内)の達成基準ドキュメントリンク

WCAG 2.1 - 2.4.4 リンクの目的(コンテキスト内)
概要

リンクテキストを読むか、または前後の文脈から明確にリンク先の内容を推測できる。

 確認方法Accesibility Visualizerでリンクテキストが適切か確認

 2.4.5 複数の手段の達成基準ドキュメントリンク

WCAG 2.1 - 2.4.5 複数の手段
概要

サイトマップなど、目的のページを見つけるための複数のナビゲーション手段がある。

 確認方法目視でヘッダーやフッター、ナビゲーションが複数あるか確認

 2.4.6 見出し及びラベルの達成基準ドキュメントリンク

WCAG 2.1 - 2.4.6 見出し及びラベル
概要

見出しは、コンテンツの主題を説明している。ラベルは、入力内容や目的、形式、入力必須かどうかなどが理解できるように説明をしている。

 確認方法Accesibility Visualizerで見出しやラベルが適切か確認
フォームでラベル内容が適切であるか目視確認

 2.4.7 フォーカスの可視化の達成基準ドキュメントリンク

WCAG 2.1 - 2.4.7 フォーカスの可視化
概要

フォーカスインジケーターが表示されている。

 確認方法手動でフォーカスを移動してフォーカスインジケーターが表示されるか確認

 気をつけること明確なフォーカス表示
適切なコントラスト

 3.1.1 ページの言語の達成基準ドキュメントリンク

WCAG 2.1 - 3.1.1 ページの言語
概要

ページの言語が、明示的に指定されている（HTMLのlang属性で言語が指定されている）。

 確認方法Accesibility Visualizerでページの言語が適切か確認

 3.1.2 一部分の言語の達成基準ドキュメントリンク

WCAG 2.1 - 3.1.2 一部分の言語
概要

一部分に用いられている他の言語が、どんな言語なのかブラウザが理解できる（lang属性で言語が指定されている）。

 確認方法目視で他の言語が使われていないか確認

 気をつけること装飾目的ならaria-hiddenで排除
単語レベルなどであればそのままでもOK 参考

 3.2.1 フォーカス時の達成基準ドキュメントリンク

WCAG 2.1 - 3.2.1 フォーカス時
概要

フォーカスがキャンセルされたり、フォーカスした瞬間になにかが動作することがない。

 確認方法手動でフォーカスを操作して確認

 気をつけることドロップダウンメニューを確認

 3.2.2 入力時の達成基準ドキュメントリンク

WCAG 2.1 - 3.2.2 入力時
概要

文字や情報を入力している時に予告なくページを移動したり情報を送信したりしない。

 確認方法目視でフォームの入力時に予告なくページを移動したり情報を送信したりしないか確認

 3.2.3 一貫したナビゲーションの達成基準ドキュメントリンク

WCAG 2.1 - 3.2.3 一貫したナビゲーション
概要

ナビゲーション要素は、毎回同じ順序、表記で実装されている。

 確認方法目視でナビゲーション要素が同じ順序、表記で実装されているか確認

 3.2.4 一貫した識別性の達成基準ドキュメントリンク

WCAG 2.1 - 3.2.4 一貫した識別性
概要

サービスの中で同じ機能は、同じ表現になっている。

 確認方法目視で同じ機能は同じ表現になっているか確認

 気をつけること特にボタンやアイコンを伴うものを確認

 3.3.1 エラーの特定の達成基準ドキュメントリンク

WCAG 2.1 - 3.3.1 エラーの特定
概要

エラー発生時に、エラー発生箇所が明示され、適切な説明がある。

 確認方法目視でフォームなどのエラーを確認

 気をつけること明確なエラー表示ができているか

 3.3.2 ラベル又は説明の達成基準ドキュメントリンク

WCAG 2.1 - 3.3.2 ラベル又は説明
概要

入力フォームには、入力内容や形式、入力必須かどうかなどを利用者が理解できるようなラベルまたは説明がある。

 確認方法目視でフォームのラベルや説明が適切か確認

 3.3.3 エラー修正の提案の達成基準ドキュメントリンク

WCAG 2.1 - 3.3.3 エラー修正の提案
概要

エラーの回避方法が具体的に示されている。

 確認方法目視でエラーの回避方法が具体的に示されているか確認

 3.3.4 エラー回避(法的，金融及びデータ)の達成基準ドキュメントリンク

WCAG 2.1 - 3.3.4 エラー回避(法的，金融及びデータ)
概要

法的な手続やデータの削除をする場合の基準。送信の確認・チェック・取り消しができる。

 確認方法目視で重要なデータ(法的や金融などのデータ)の送信が行われているか確認
フォームなどで送信の確認・チェック・取り消しができるか確認

 4.1.1 構文解析の達成基準ドキュメントリンク

WCAG 2.1 - 4.1.1 構文解析
概要

HTMLの文法に沿ったマークアップを行う。

 確認方法HTML構文の確認
バリデーション
ブラウザ互換性の確認

 気をつけること正しいHTML構文
適切な要素の使用
互換性の確保

 4.1.2 名前(name)，役割(role)及び値(value)の達成基準ドキュメントリンク

WCAG 2.1 - 4.1.2 名前(name)，役割(role)及び値(value)
概要

HTMLで表現できるUIは独自に作らない。カルーセルやタブなどHTMLにないUIを作るときはWAI-ARIAを使って作る。

 確認方法目視でカルーセルやタブなどのUIがないか確認
適切にWAI-ARIAを使っているか確認

 気をつけること適切なWAI-ARIAの使用 (可視のラベルが提供できない場合、aria-label, aria-labelledby, aria-describedbyなどで提供されているか)
ランドマークに適切な名前があるか
住所や電話番号のような複数のフィールドがある場合