アクセシビリティとは
accessibility（アクセシビリティ）は、障害の有無や利用環境にかかわらず、情報や機能を利用しやすく設計する考え方と実践です。Webの文脈ではWebアクセシビリティと呼び、a11y（エー・イレブン・ワイ）と略記されることもあります。
対象は、生まれつきまたは後天的な障害だけではありません。腕をけがして一時的にマウスを使えない、日差しの下で画面が見えにくい、音を出せない場所で動画を見る、低速回線や小さな画面を使う、といった一時的・状況的な制約にも設計上の共通点があります。
アクセシビリティは「特別な人向けの別ページ」を作ることではありません。同じ情報と機能へ、見る・聞く・読む・操作する複数の経路を用意し、途中で利用者を締め出さないことです。
WCAGの四原則で読み解く
文字、画像、音声などの情報を、代替テキスト、字幕、十分なコントラストなど別の方法でも受け取れるようにします。
キーボード、スイッチ、タッチなどで移動・実行でき、時間制限や点滅、細すぎる操作対象で妨げません。
読みやすい言葉、一貫した操作、明確なラベル、入力エラーの場所と直し方を伝えます。
正しいHTMLと名前・役割・状態を使い、ブラウザや支援技術が内容を解釈できるようにします。
意味のあるHTMLが支援技術への入口になる
見出しを大きな文字のdivで作るのではなくh1からh2へ順序立て、操作は適切なbuttonやaで表します。ブラウザはHTMLの意味からアクセシビリティツリーを作り、スクリーンリーダーなどへ名前、役割、状態、階層を伝えます。
ARIAはHTMLだけで表せない関係や状態を補う仕組みです。見た目やキーボード動作を自動で追加するものではありません。標準HTMLに同じ役割の要素があるなら、標準要素を優先した方がブラウザとの互換性を保ちやすくなります。
キーボードだけで最後まで操作できるか
Tabキーで移動し、現在地が見え、EnterまたはSpaceで実行でき、開いたメニューやダイアログを閉じられることを確認します。マウスを置いたときだけ表示される情報には、キーボード焦点やタップからも到達できる経路が必要です。
焦点順序は見た目と意味の流れに合わせます。CSSで要素の見た目だけを並べ替えると、画面上の順序とキーボード・音声の順序がずれる場合があります。焦点ringを消さず、固定ヘッダーの裏へ現在地が隠れないようにします。
タッチ対象は、指で隣を誤って押しにくい大きさと間隔を保ちます。小さな文字リンクを密集させず、拡大しても操作部品が重ならないか確かめます。
画像・音声・動画へ同等の情報を用意する
意味のある画像には、画像が担う目的を短い代替テキストで伝えます。本文と同じことを飾る画像は空の代替テキストにし、ファイル名や「画像」という語を機械的に入れません。複雑なグラフや図解は短い代替テキストに加え、本文やキャプションで読み取るべき関係を説明します。
音声を含む動画には同期した字幕、音声だけの内容には書き起こしを用意します。映像だけで伝える重要情報には音声解説または本文の説明が必要です。自動字幕は固有名詞や数字を誤るため、公開前に内容を確認します。
色だけに意味を持たせない
「赤い欄がエラーです」だけでは、色を区別しにくい利用者やモノクロ表示で場所が分かりません。欄の近くにエラー文を置き、アイコンや見出し、入力欄との関連付けも行います。
本文と背景、UI部品と隣接色には十分なコントラストを保ちます。通常時だけでなく、hover、焦点、disabled、選択状態、ライト・ダークの各配色で確認します。リンクの下線は識別に役立ちますが、文章の多くを装飾して重要箇所が埋もれないようにします。
拡大と再配置で内容を失わない
文字を200%に拡大し、狭い表示領域相当まで表示を大きくしても、横スクロールを強要せず本文が折り返されるか確認します。固定高さ、極端に小さい文字、画像の中へ焼き込んだ説明文は拡大時の問題を起こしやすくなります。
表や地図など二次元の移動が本質的な内容は横スクロールを持つ場合があります。その場合もページ全体を横へ崩さず、対象部分だけを操作できるようにし、見出しや操作方法を伝えます。
動きは止められ、内容を妨げないようにする
点滅は発作を誘発する危険があり、一定の閾値を超える点滅を避けます。自動で始まり長く続く動きや音には、一時停止・停止・非表示の手段を用意します。画面移動や視差効果を減らしたい希望はprefers-reduced-motionで受け取れます。
アニメーションをなくすだけでなく、状態変化が分からなくならないようにします。動きで運んでいた意味を、文言、アイコン、進捗表示など静的な手掛かりへ置き換えます。
フォームは名前、目的、誤り、修正方法を伝える
入力欄へ表示するプレースホルダーは入力例であり、常に見えるラベルの代わりではありません。必須条件、文字形式、単位を入力前に示し、エラー後は該当欄へ移動できる一覧と欄ごとの具体的な説明を用意します。
送信直前に重要な契約や削除を確認でき、誤操作から戻せるようにします。認証では、記憶やパズルだけに依存しない方法、パスワードマネージャーや貼り付けを妨げない実装も重要です。
自動検査だけでは合否を決められない
検査ツールは代替テキスト属性の欠落、重複ID、一定のコントラストなどを素早く見つけます。しかし、代替テキストが画像の目的を伝えているか、見出し構造が理解しやすいか、操作後の変化が伝わるかは人の判断が必要です。
HTML検査、自動アクセシビリティ検査、キーボードのみの操作、拡大・再配置、複数ブラウザ、スクリーンリーダーなどの支援技術を組み合わせます。WCAGへの適合はページ全体と利用過程で判断し、一つの部品が通っただけでサイト全体を適合とはしません。可能なら実際の利用者による評価も加えます。
アクセシビリティは公開直前に足すチェック項目ではありません。企画、文章、デザイン、実装、運用の各段階で、情報を受け取り、操作し、結果を理解できる経路が途切れていないか確かめる継続的な実践です。
Webアクセシビリティの原則、達成基準、適合要件：W3C「Web Content Accessibility Guidelines (WCAG) 2.2」