最終更新日：2026年10月4日

fe fe-technology human-interface accessibility

まず結論

アクセシビリティは、障害の有無や年齢、利用環境などの違いにかかわらず、情報や機能を利用できるようにする観点です。 製品やサービスを、多様な人が利用できる度合いを表す言葉としても使います。

ウェブでは、情報を読み取れることだけでなく、内容を理解し、必要な操作を行えることも重要です。

特定の見え方・聞こえ方・操作方法だけを前提にせず、利用を妨げる障壁を減らす。

このページでは、ウェブ画面の障壁と改善策を中心に扱います。IT利用の差による社会的・経済的な格差との違いは、デジタルディバイドとは？で確認できます。

直感的な説明

図書館の予約画面で、空き状況を「緑なら予約可、赤なら予約不可」という色だけで示したとします。

色を区別しにくい人や、画面の内容を音声で読み上げるソフトを使う人には、予約できるかどうかが伝わらない場合があります。

そこで、色に加えて「予約可」「予約不可」という文字も表示します。画面の構造も適切に作り、読み上げソフトから状態を取得できるようにします。

同じ情報に別の方法でもアクセスできるようにすることが、アクセシビリティ改善の基本です。

定義・仕組み

障壁と改善策を対応付ける

画面上の文字や構造を音声などで伝える支援技術を、スクリーンリーダーといいます。利用者によっては、マウスの代わりにキーボードやほかの入力機器を使います。

利用を妨げる例 改善策 伝えたいこと・可能にしたいこと
空き状況を赤と緑だけで区別する 状態を表す文字も併記する 色を区別しなくても状態が分かる
案内図の情報を画像だけで伝える 内容や目的に応じた代替テキストや本文の説明を用意する 画像を見なくても必要な情報を得られる
説明動画の内容を音声だけで伝える 発話や必要な音の情報を字幕で伝える 音が聞こえなくても内容を理解できる
マウスでクリックしないと予約できない キーボードでも必要な操作を完了できるようにする マウスを使わずに予約できる
薄い文字が背景に埋もれて読みにくい 文字と背景のコントラストを確保する 文字を識別しやすくする
入力欄が何の項目か分からない 項目名を示し、入力欄と適切に関連付ける 画面表示でも支援技術でも入力内容が分かる

判断の順序は「何が利用を妨げるか → 何を追加・変更すれば利用できるか」です。 「文字を大きくする」など、一つの対策ですべての障壁が解消するわけではありません。

代替テキストは画像の目的に合わせる

代替テキストは、画像が伝える情報や機能を文字で表すものです。

例えば、虫眼鏡の画像だけを使った検索ボタンなら、「虫眼鏡の絵」と形を説明するだけでなく、「検索」という操作の目的が支援技術にも伝わる名前を付けることが重要です。

一方、意味のない装飾画像に長い説明を付けると、読み上げの妨げになる場合があります。装飾画像は読み上げを省略できるようにし、情報を伝える画像や操作に使う画像と区別します。

キーボードで「選べる」だけでなく「完了できる」こと

キーボード操作では、ボタンや入力欄へ順に移動し、選択や実行を行います。現在操作の対象になっている位置をフォーカスといいます。

予約ボタンに移動できても、その後の確認画面から先へ進めなければ、予約は完了できません。操作する位置が見えること、必要な順序で移動できること、特定の場所から抜け出せなくならないことも確認します。

WCAGの四つの原則

WCAG（Web Content Accessibility Guidelines）は、W3Cが策定するウェブコンテンツのアクセシビリティに関するガイドラインです。四つの原則から考えると、対策を整理しやすくなります。

原則 初学者向けの捉え方 例
知覚可能 情報を受け取れる 画像の情報を文字でも伝える
操作可能 必要な操作を行える キーボードで手続きを完了できる
理解可能 情報や操作の意味が分かる 入力ミスの箇所と内容を明示する
堅牢（けんろう） 支援技術を含む利用環境で解釈できる ボタンの名前や役割を機械的に取得できる構造にする

ここでの「堅牢」は、サーバが故障しにくいことだけを意味しません。ブラウザや支援技術が、コンテンツを適切に解釈できることに着目します。

科目Aでどう出る？

見た目の変更だけで解決するかを考える

「赤い文字をさらに鮮やかな赤へ変更する」という対策では、色の違いだけに頼っている問題は残ります。「エラー」と文字で示し、該当箇所と修正方法を伝える方が、情報の伝え方を補えます。

また、「すべての文字を画像にすれば、どの端末でも同じ見た目になる」という案は、見た目をそろえる目的には合っていても、読み上げや文字の拡大・調整を妨げる可能性があります。

見た目の統一と、情報や機能を利用できることを区別します。

似た用語との違い

用語 主に着目すること
アクセシビリティ 障害などによる障壁を減らし、情報や機能を利用できること
ユーザビリティ 特定の利用者・状況で、目的を有効・効率的に、満足して達成できること
ユニバーサルデザイン 年齢や能力などの違いを考慮し、できる限り多くの人が利用できるように設計する考え方
デジタルディバイド ITを利用できる条件の差によって生じる社会的・経済的な格差

アクセシビリティとユーザビリティは重なる部分があります。「利用できれば使いやすさは不要」「使いやすければ障壁はない」と分け切るものではありません。

利用者の状況を調査し、設計と評価を反復する進め方は、人間中心設計で確認できます。

どんな場面で使う？

行政手続、図書館の予約、学習サービスなど、多様な人が使うサービスで重要です。

字幕は聴覚に障害のある人に役立つほか、音を出せない場所でも役立ちます。キーボード操作への対応も、マウスを使うことが難しい人だけでなく、一時的に手をけがした人などの助けになります。

こうした幅広い効果がある一方、障害のある人が実際に利用できるかという確認を省略しないことが大切です。企画・設計の段階から障壁を考え、公開後も更新に合わせて確認します。

よくある誤解・混同

アクセシビリティは文字を大きくすること？

文字の読みやすさは一部です。音声への依存、操作方法の制限、分かりにくい入力項目など、異なる障壁には異なる対策が必要です。

画像には必ず詳しい説明を付ける？

情報を伝える画像、操作のための画像、装飾画像では扱いが異なります。画像の目的と周囲の説明を考慮し、必要な情報が過不足なく伝わるようにします。

自動チェックでエラーがなければ十分？

自動チェックだけでは、代替テキストが適切な意味を伝えているか、操作が理解できるかなどを十分に判断できません。キーボードや支援技術での確認、利用者による評価なども組み合わせます。

アクセシビリティが高ければデジタルディバイドはすべて解消する？

利用できる画面を作ることは格差の縮小に役立ちますが、端末や通信環境を確保できないといった問題は別に残ります。サービス側の障壁への対策と、社会的な利用条件の整備を区別します。

確認問題（科目A・オリジナル）

ある予約サイトは、予約可能な日を緑、予約できない日を赤で表示し、それ以外には状態を示していない。色を区別しにくい利用者にも予約状況を伝える改善として、最も適切なものはどれか。

  • ア：赤と緑を、それぞれ異なる色に置き換え、色だけで区別する方式は維持する。
  • イ：各日付に「予約可」「予約不可」を文字で併記し、色以外でも状態が分かるようにする。
  • ウ：状態を示す色を点滅させ、目立たせる。
  • エ：画面全体を画像に置き換え、見た目を固定する。

正解：イ

  • ア：色だけに依存する問題が残ります。別の伝達方法も用意します。
  • イ：文字でも状態を伝えるので、色の区別に頼らず判断できます。
  • ウ：目立たせても、予約可・不可の意味が色以外で伝わるわけではありません。点滅は別の障壁にもなり得ます。
  • エ：画像化だけでは状態を文字情報として伝えられず、読み上げなどを妨げるおそれがあります。

公式情報・参考リンク

まとめ（試験直前用）

  • アクセシビリティは、多様な人が情報や機能を利用できるように障壁を減らす観点。
  • 色や音声など、一つの伝達方法だけに依存しない。
  • 画像の目的に合った文字情報を用意し、キーボードでも操作を完了できるようにする。
  • WCAGの原則は、知覚可能・操作可能・理解可能・堅牢。
  • 選択肢は「どんな障壁か」と「その対策で障壁を減らせるか」を対応付けて判断する。

© 2024-2026 stemtazoo. All rights reserved.