最初の一周を3点に絞る理由
アクセシビリティには多くの要件があります。最初から全部を暗記するのではなく、いまある1ページで「文字と背景」「画像」「構造」の3点を確認します。迷ったら、本文のコントラストから始めます。
たとえるなら、駅のスロープのようなものです。ある人の移動に必要な設備が、荷物を持つ人などにも役立つことがあります。ただし、この比喩が示すのは、ある配慮がほかの人にも役立つ関係だけです。障害のある人それぞれの利用条件を、便利さの話だけで一括りにはできません。
この3点は入口であり、対応完了のチェックリストではありません。動画の字幕、フォームのラベル、エラーの伝え方、キーボード操作など、ページの内容に応じて別の確認が必要です。全体像はW3CのWCAG 2.2を参照します。
最初の点検では、ページにある要素を短く棚卸しすると見落としを減らせます。全部の達成基準をその場で判定するのではなく、次の担当と確認方法を決めるための表です。
| ページにあるもの | 入口で見る点 | 次に必要な確認 |
|---|---|---|
| 本文・見出し | 背景との差、見出し階層 | 拡大時の折り返し、読み上げ順 |
| 写真・図表 | 画像の役割、代替の有無 | 複雑な図の詳しい説明 |
| リンク・ボタン | 名前、Tab順、フォーカス | 押せる範囲、状態の通知 |
| フォーム | ラベル、入力順、エラー文 | 支援技術での入力と修正 |
| 動画・音声 | 字幕や文字情報の有無 | 操作、音声解説、同期 |
たとえば文章と写真だけの読み物なら、3点から始めやすい一方、予約フォームではラベルとエラーが中心課題になります。「3点を先に見る」は、すべてのページへ同じ優先順位を押しつける意味ではありません。
身近な例で見る、文字と背景の差
「見た目で読める」だけで終えず、コントラスト比を測ります。WCAG 2.2では、通常の文字は背景との比率4.5:1以上、大きな文字は3:1以上が原則です。写真上の文字やボタンは、状態が変わる場面も含めて確認します。
迷ったら、明るい背景に暗い本文から直します。測り方と色ペアの選び方は、背景色と文字色の読みやすい組み合わせで詳しく確認できます。
本文だけでなく、リンク、画像上の文字、入力欄のプレースホルダー、エラー表示も別々に見ます。通常時に読めても、選択後や無効時に薄くなることがあるためです。実際のページをスマホで開き、明るい場所と暗い場所の両方で読むと、計測だけでは見えない細い文字や写真の揺らぎにも気づけます。
2つ目は、画像の役割に合う代替
画像には、すべて同じ説明文を付ければよいわけではありません。内容を伝える写真や図には、画像が見えなくても目的が分かる短い代替テキストを用意します。隣の文章と同じことを繰り返すだけの装飾画像は、読み上げを増やさないよう空の代替テキストにする場合があります。
文字を画像として載せているなら、その文字情報を本文にも用意します。図表の内容が複雑なら、一言の代替だけで済ませず、近くに説明やデータを置きます。W3Cの画像アクセシビリティ・チュートリアルには、役割別の考え方があります。
3つ目は、見出しと操作の順番
見た目の位置だけでなく、見出し構造とHTMLの順番を確認します。ページタイトルの次に大見出し、その下に小見出し、と階層を飛ばさずに組みます。CSSで位置を動かしても、読み上げやキーボードではソース順が使われることがあります。
Tabキーで操作し、フォーカスが見えるか、順番が内容と合うか、キーボードだけで主要な操作を完了できるかを確かめます。視線の順番だけを整えても、操作順がずれていれば十分ではありません。
リンクやボタンが多いページでは、「予約を確定する」のように移動先や結果が分かる名前も確認します。見た目の合図はボタンが押せそうに見える仕組みで、大きさと間隔はスマホのボタンの大きさの目安で分けて点検できます。
3点だけでは効かない場合
入口の3点を直したら、ページ固有の機能を洗い出します。フォームならラベルとエラー、動画なら字幕、時間制限があるなら延長、メニューならキーボード操作が必要です。
また、作った本人だけで確認すると、書いてある内容を知っているため問題を見落とします。自動検査、キーボード確認、読み上げ確認、利用者による評価を組み合わせます。自動検査で警告がゼロでも、使えることが保証されるわけではありません。
自動検査は、代替テキストが「ある」ことを見つけられても、その説明が画像の目的に合うかまでは決められません。読み上げ確認は音声での順番を確かめられても、弱視の人が拡大したときの欠けを代わりに判断しません。方法ごとに得意な検出が違うため、1つの検査結果を合格証にしないことが大切です。
自分の1ページで3点を使う
今日のワーク：入口の3点チェック
自分のサイトから、よく読まれるページを1つ選びます。
- 本文と背景のコントラスト比を測ります
- 画像を隠しても、内容と目的が伝わるか確認します
- 見出し一覧とTabキーの順番を確認します
最初に見つかった1件を直し、同じ方法で次のページへ広げてください。
紙の制作物では、代替テキストやキーボード操作はありません。その場合は、文字のコントラスト、情報の順番、色以外の手がかり、読みやすい実寸など、媒体に合う点検へ置き換えます。
直した内容は「色を濃くした」だけでなく、「本文の比率を測定し、変更前後を記録した」のように残します。次のページで同じ問題を探せるうえ、担当者が変わっても判断を再現できます。利用者から困りごとが届いた場合は、チェック表よりその具体的な利用場面を優先して、確認範囲を広げます。
点検日は、公開前だけに固定しません。文章や画像を差し替えたとき、部品を共通化したとき、主要ブラウザーや支援技術の更新後にも、影響の大きいページから確認します。問い合わせ窓口や修正担当を決めておくと、見つかった問題を「次の改修」へ先送りしにくくなります。
記録には確認した端末と操作方法も添えます。
入口は3つ、完了は利用方法まで
最初はコントラスト、画像の代替、見出しと読む順番の3点です。迷ったら本文のコントラストから直し、1ページで手順を覚えます。
その後はページ固有の操作を洗い出し、キーボード、読み上げ、実際の利用者まで確認を広げます。3点に絞るのは始めるためであり、そこで終えるためではありません。