作成：IILL Editorial · 認証や法的義務の要否は対象組織の最新基準で確認してください。
アクセシビリティは自動検査の点数が緑になれば終わりではありません。マウスを使わずに メニューを開けるか、拡大しても重要な内容が切れないか、入力エラーで直す場所が分かるかを 実際に確認します。ここでは一般的な企業サイトの公開前QAを扱い、特定組織の法的義務や 認証を判断する法律相談は行いません。
四つの原則を確認項目に変える
WCAG 2.2の原則を、チームが観察できる質問に変えます。
| 原則 | 公開前の質問 | 確認例 |
|---|---|---|
| 知覚可能 | 色や画像だけに重要な情報を預けていないか | 代替テキスト、字幕、コントラスト |
| 操作可能 | キーボードや支援技術で主要な流れを使えるか | フォーカス順、スキップ、メニュー、ダイアログ |
| 理解可能 | ラベルとエラーが次の行動を示すか | フォームlabel、形式、エラー位置 |
| 堅牢 | ブラウザーや支援技術が構造を読めるか | 意味のあるHTML、名前・役割・状態 |
まずマウスを置く
Tabでヘッダー、ナビゲーション、本文、フッターを移動します。- 現在のフォーカスが見え、画面外へ消えないことを確認します。
- メニュー、アコーディオン、ダイアログをキーボードで開閉します。
EnterとEscapeが期待どおりに働くか確認します。- 長いナビゲーションを何度も飛ばす必要があれば本文へのスキップリンクを検討します。
フォーカスの枠を消して見た目を整えるのは解決ではありません。ブランドに合う見た目に 整えながら、現在位置と次の行動を見える状態にします。
コンテンツと構造を確認する
- 装飾画像には空の代替テキストを、情報を伝える画像には文脈に合う説明を付けます。
- 見出しは文字の大きさではなく文書構造に合わせます。
- 「詳しく見る」だけを繰り返さず、リンクの目的が文言だけで分かるようにします。
- 必須・エラー・成功を色だけで区別しません。
- 200%まで拡大し、横スクロールなしで重要な内容が読めるか確認します。
自動検査はaltの欠落や低いコントラストを見つけるのに便利です。しかし、代替テキストが 文章の文脈に合うか、見出し順が自然かは人が読みます。WCAGクイックリファレンスを 修正基準に使い、検査の合格を認証のように書かないでください。
フォームはエラー状態まで完成させる
- 入力ごとに見えるlabelと形式の説明がある。
- 空欄、形式違い、長すぎる値、サーバーエラーを分ける。
- エラーが入力と結び付き、何を直すかを伝える。
- 送信中・成功・失敗をキーボードとモバイルで確認する。
- サーバーが受け付けた成功だけを主要コンバージョンにする。
フォーム内容やメールアドレスを計測パラメータに入れない方針は、ランディングページのGA4ガイドと 一緒に確認します。
モバイルと支援技術で実行する
狭い画面でメニューがフォーカスした要素を隠さないか、横スクロールが生じないか、タップ 領域が重ならないかを確認します。可能ならキーボード操作とスクリーンリーダーの主要な 流れを別々に記録します。一つのブラウザーで通った結果をすべての環境の保証にしません。
公開前チェックリスト
- ヘッダー、メニュー、本文、フォーム、フッターをキーボードだけで使える。
- フォーカスが見え、ダイアログ内で迷わない。
- 画像・アイコン・動画に目的に合う代替情報がある。
- 見出し・ランドマーク・リンクが文書の意味と一致する。
- エラー・成功・必須状態を色だけに頼っていない。
- 200%拡大とモバイル幅で内容が切れない。
- 正常・空欄・形式エラー・サーバーエラーを確認した。
- サーバー成功後だけ問い合わせコンバージョンを送る。
- 自動検査と手動確認の結果を分けて記録した。
- 法的・認証に関する表現を担当者が確認した。
IILLへの制作相談で構造と引き継ぎを、保守範囲ガイドで 公開後の確認を続けてください。アクセシビリティは最後に加える点数ではなく、企画・ コンテンツ・開発・QAが繰り返し確認する運用品質です。
NEXT PROJECT
Webサイト制作、何から決めるべきか迷っていませんか？
現在の状況と必要な成果を伺い、制作範囲と次のステップを先に整理します。