アクセシビリティは公開直前の検査項目ではなく、情報構造、文字、色、操作、コンテンツを決める段階から扱う品質です。WCAG 2.2をチェックリストとして読むだけでなく、実際に異なる方法で操作します。
最初に確認する10項目
- 見出しと読み順が自然
- 文字と背景のコントラストが十分
- 色だけで意味を伝えない
- キーボードだけで操作できる
- フォーカス位置が見える
- リンクとボタンの目的が分かる
- 画像の代替情報が適切
- フォームのラベルとエラーが分かる
- 文字拡大・リフローで欠けない
- 動きや自動再生を制御できる
文字とコントラスト
WCAG 2.2のレベルAAでは、通常文字は4.5:1以上、大きな文字は3:1以上のコントラスト比が基準です。文字を画像化せず、拡大・色変更・読み上げに対応できるテキストを使います。
キーボード操作
Tab、Shift+Tab、Enter、Space、矢印、Escapeで主要な操作を確認します。モーダルを閉じられない、見えない場所へフォーカスが移る、キーボードトラップがある問題を探します。
マウスホバーだけで情報や操作を表示しません。
フォーカスを消さない
outline: noneで標準フォーカスを消す場合は、十分に見える代替表示が必要です。背景色が変わっても見える輪郭や下線を設計します。
W3Cは、キーボードフォーカスを見つけやすくする目的と、サイズ・コントラストを持つフォーカス表示を説明しています。
タップ領域
WCAG 2.2の最低基準は、例外を除き24×24 CSS pxです。小さい削除アイコンやページネーションは、領域と間隔を確認します。最低値だけでなく、利用者と端末に合わせてより大きな領域を用意します。
画像と図表
代替テキストは画像の見た目をすべて説明するのではなく、その場で伝える目的を書きます。複雑なグラフは本文や表でも内容を提供します。装飾画像にファイル名を読み上げさせません。
フォーム
- 入力欄に常に見えるラベルがある
- 必須を記号だけにしない
- エラー箇所と修正方法が分かる
- 入力済み内容を失わない
- 送信結果が通知される
- 時間制限を避けるか延長できる
プレースホルダーだけをラベルにすると、入力後に項目名が消えます。
自動チェックと手動チェック
自動ツールは代替テキストの欠落、構文、コントラスト候補を見つけられますが、説明が適切か、操作順が自然かは人が確認します。支援技術利用者を含むユーザーテストも検討します。
まとめ
アクセシブルなWebデザインは、文字、色、構造、キーボード、フォーカス、タップ、画像、フォーム、動きを一緒に設計します。自動検査だけで完了せず、実際に異なる入力方法と文字サイズで確認しましょう。
