メインコンテンツへスキップ
ブログ一覧に戻る
UX・デザイン

アクセシビリティとは?超初心者向け完全ガイド

2025年12月22日
最終更新: 2026年10月8日
7分で読めます

この記事でわかること

アクセシビリティを、障害のある人が情報を理解し操作できる設計として、建物の入り口と道にたとえて解説。見出し、画像の代替テキスト、操作名、色、キーボードの確認点を整理します。架空の問い合わせフォームを読む・入力する・直す・戻る流れで点検し、小さなサイトで着手する順番と、簡易点検だけでは適合を判断できない範囲も示します。

2026年10月8日に、W3CのWCAG overview、アクセシビリティと使いやすさの整理、ARIA APGを再読しました。標準検査、実機・支援技術、利用者調査を組み合わせ、ARIA属性や概要説明だけで包摂性・利用者成果を保証しません。

アクセシビリティは、障害のある人が情報を理解し、移動し、操作し、参加できるように設計することです。文字を大きくできることだけではありません。問い合わせを読む、入力する、間違いを直す、送信前に戻るという一連の道が使えるかを考えます。

30秒で要点

  • Webアクセシビリティは、障害のある人の利用を支える設計です。加齢、一時的なけが、利用環境の制約にも役立ちます。
  • 見出し、画像の代替テキスト、分かる操作名、色だけに頼らない説明に加え、キーボードで作業を続けられるかを確認します。
  • 短い点検は問題を見つける入口です。数項目の合格や自動ツールの結果を、サイト全体の適合や法的な判断に置き換えません。
問い合わせの入口から入力、エラー修正、戻る操作まで、位置と説明を確認する道。簡易点検を全体の適合と区別する。
架空のフォームを点検するための概念図です。実サイトのブラウザー検証や適合証明ではありません。

建物の「入り口と道」にたとえて考える

AccessibilityはA11yとも略します。最初のaと最後のyの間に11文字あることから来た表記です。

建物で段差を越えられても、目的の部屋へ行けなければ用事を済ませられません。Webでも、最初のページを表示できることと、必要な作業を終えられることは別です。

表が収まらない場合は、横にスクロールできます

建物のたとえWebで確かめることたとえの限界
スロープマウスだけに依存せずキーボードでも操作できるキー操作の入口だけで全機能の利用を判断しない
点字ブロック見出しや項目の関係を支援技術が読み取れる実際の読み上げと理解しやすさは別に確認する
案内表示見出しと操作名から行き先が分かる名前だけで入力ミスの直し方までは伝わらない
照明文字と背景を区別し、色以外でも状態を伝える明るくすれば解決する問題ばかりではない
W3C WAIの入門は、障害のある人が知覚・理解・移動・操作できることを説明しています。使う機器や状況にも関わるため、「特別な人のための別ページだけ」を作れば終わり、とは考えません。

最初の四つを、見た目から役割へ戻す

見出し:文字の大きさではなく内容のまとまり

ページの主題、その中の章、章の中の項目が分かる見出しにします。たとえば「予約方法」の下に「日時を選ぶ」「連絡先を入力する」を置く構成です。

WAIの見出しの説明は、見出しの階層とナビゲーション上の役割を扱います。新しい小節へ進むときに階層を飛ばすことは避けます。一方、小節を閉じて上の階層の新しい章へ戻ることまで禁止されるわけではありません。

画像:その場で何を伝えるかを決める

代替テキストは、すべての画像を長く描写すればよいものではありません。WAIの判断表では、情報、操作、装飾など画像の役割を分けています。

表が収まらない場合は、横にスクロールできます

架空の画像必要な伝え方
会場入口の段差を説明する写真入場判断に必要な段差の情報を本文と代替テキストで伝える
検索を実行する画像ボタン虫眼鏡の見た目より「検索」という操作を伝える
本文と意味が重複する飾り空のaltなどで余計な読み上げを増やさない
複数条件を比べる図表短い説明に加え、同じ情報を本文や表で読めるようにする

画像に何が写っているかと、そのページで何のためにあるかを一緒に判断します。

操作名:押す前に結果の見当が付くようにする

「こちら」だけのリンクより「料金と申込条件を見る」のように行き先を示します。入力欄には何を入力するかのラベルを付け、入力中に消えるヒントだけに頼りません。必要な形式や必須項目も入力前に分かるようにします。

色:間違いの場所と直し方を文字でも伝える

赤い枠だけでは、問題の内容を伝えきれません。「メールアドレスに @ が必要です」のように、該当項目と修正の手掛かりを結び付けます。コントラストの数値条件は文字や部品などの対象により異なるため、本記事の四項目だけで基準に適合したとは判定しません。

架空の問い合わせフォームを一巡して点検する

以下は読者が点検計画を作るための架空例です。実サイトの改善効果や、本記事で行ったブラウザー試験を示しません。実送信しない検証環境と架空の入力値を使います。

表が収まらない場合は、横にスクロールできます

段階試す操作残す観測の例
入口を探すキーボードで問い合わせリンクへ進む現在位置が見え、名前から行き先が分かるか
入力する名前と連絡先へ順に移るラベル、必須、形式が入力前から分かるか
間違いを直す検証環境で不正な形式を入力して確認へ進むエラーの場所と理由が分かり、他の入力が失われないか
戻る確認画面から入力へ戻る移動後の場所が分かり、内容を修正できるか
終わる送信せず点検結果を保存する未確認の完了画面を合格扱いしない
WAI Easy Checksは、キーボードのフォーカス、フォームのラベルやエラーなど、初歩的な点検を示しています。Tabで項目をたどれるだけでなく、見える現在位置、意味の通る順序、抜け出せない箇所の有無を確かめます。必要に応じて支援技術を使う人の確認や詳しい評価へ進めてください。

点検メモは「使いづらい」で終えず、たとえば「確認から戻ると画面は入力欄なのに、キーボード位置が分からない」のように操作と観測を結びます。担当者は原因を調べ、修正後に同じ経路で再確認します。

小さなサイトで取り掛かる順を決める

まず問い合わせ、申込、料金の確認など、利用者が必要な用事を済ませる経路を一つ選びます。次の三つを入口の質問にしてください。

  1. マウスがなくても必要な操作を続け、戻り、やめられるか。
  2. 色が分からなくても、選択中・必須・エラーの違いを理解できるか。
  3. 入力欄とボタンの役割、間違いの修正方法が分かるか。

順番は売上効果の予測だけで決めず、用事を完了できない障壁、利用頻度、代替手段の有無を比べます。架空の点検で「装飾画像の説明が長い」と「必須欄へ移れず申込できない」が見つかったなら、後者の原因調査を優先する判断ができます。ただし調査の難しさだけを理由に、重大な障壁を放置しないよう責任者と見直し日を決めます。

点検で確認できた範囲を伝える

自動ツールは一部の問題の発見を助けますが、代替テキストが内容に合うか、説明を理解して作業できるかは人の評価も必要です。Easy Checks自体も簡易点検であり、通過したページに大きな障壁が残る可能性を明示しています。

「フォームの入力と戻る操作を、この環境で確認した」と、「サイト全体がすべての基準に適合している」は違う報告です。SEO順位や問い合わせ増加を保証する施策としてではなく、実際に利用できる道を増やし、残る障壁を把握する作業として進めます。

実装や評価の範囲を広げるときは、Webアクセシビリティの実践も参照してください。個別の法的義務や適合表明を判断する場合は、対象制度と基準を別に確認します。

よくある質問(FAQ)