ひと息遊戯SMALL GAMES · GOOD COMPANY
情報・AIの特集を読む →

情報・AI · 情報評価・アクセシビリティ

情報を伝える設計：画像・色・エラーの意味を届ける

画面に表示されている情報が、すべての利用者へ同じように届くとは限りません。画像を見ない人、色を見分けにくい人、キーボードで操作する人にも、何を意味し何をすればよいかが分かる必要があります。情報の量だけでなく、届く経路と目的を考えましょう。

ここではWCAG 2.2の考え方を手掛かりに、代替説明、色の使い方、入力エラーを学びます。すべての見た目を文章へ置き換えることが目標ではありません。利用者が同じ目的を達成できる情報を、役割に応じて用意することから始めます。

このテーマのクイズへ

科目とテーマを選んだ開始画面へ進みます。出題方式・問数を確認してから始められます。

画像の姿ではなく役割から説明する

情報を伝える画像には、その目的に対応するテキストの代替が必要です。商品の写真と、送信を行う画像ボタンでは役割が違います。後者では色や形の詳細だけでなく、何をする操作かが伝わる名前が大切になります。

純粋な装飾は、毎回長い説明を読み上げさせない扱いにできます。ただし重要な情報や操作を持つ画像まで装飾と決めつけないでください。何を利用者へ届けるための画像かを先に判断すると、必要な説明と不要な説明の区別がしやすくなります。

色だけへ意味を預けない

入力を誤った欄を赤にするだけでは、色を区別しにくい人へ場所と理由が伝わらないことがあります。文字や記号など、色以外の手掛かりも用意します。色は便利な補助ですが、意味を受け取る唯一の経路にはしないという考え方です。

同じ原則を凡例や状態表示にも当てはめられます。『青が完了、緑が未完了』と色だけで対応付けず、状態名を併記してみましょう。見た目を派手にすることより、区別すべき情報がどの手段で読み取れるかを確かめます。

修正できるエラーの説明を用意する

フォームに『エラー』とだけ出ても、利用者は何を直せばよいか分かりません。自動で検出した入力エラーでは、対象となる項目を識別し、誤りの内容をテキストで説明します。たとえば日付の形式が違うのか、必須の名前が空なのかを区別します。

項目のラベルと説明、修正の案内を関連付けると、入力の目的から直す場所までたどれます。視覚上の近さだけでは、支援技術が同じ関係を把握できるとは限りません。表示した内容と、その関係が読み取れる構造の両方を考えることが大切です。

TRY & READ

まずは例題で確かめる

選択肢を比べてから「答えと解説を読む」を開いてください。ここで読んだ例題は、テストの解答や成績として保存されません。

例題 1 · 情報評価・アクセシビリティ

情報を伝えるWeb画像へ代替テキストを付ける基本的な目的は？

  1. 画像ファイルを必ず暗号化する
  2. 画像を見られない場合にも目的に相当する情報を伝える
  3. 必ず画像を鮮明にする
  4. 検索順位を必ず上げる
答えと解説を読む

正解：画像を見られない場合にも目的に相当する情報を伝える

代替説明は画像の役割に応じて書きます。見た目の全てを無条件に列挙することが目的ではありません。

この例題の出典

  • Web Content Accessibility Guidelines (WCAG) 2.2

    1.1.1 Decoration Formatting Invisible; 1.1.1 Non-text Content; 1.2.2 Captions prerecorded; 1.3.1 Info and Relationships; 1.3.2 Meaningful Sequence; 1.4.1 Use of Color; 1.4.10 Reflow; 1.4.12 Text Spacing note 1; 1.4.3 Contrast Minimum; 1.4.4 Resize Text; 2.1.1 Keyboard; 2.1.2 No Keyboard Trap; 2.4.3 Focus Order; 2.4.4 Link Purpose In Context; 2.4.7 Focus Visible; 3.1.1 Language of Page normative criterion; 3.3.1 Error Identification; 3.3.2 Labels or Instructions; 4.1.2 Name Role Value; 4.1.3 Status Messages

    出典確認日：2026-10-05

例題 2 · 情報評価・アクセシビリティ

入力ミスの欄を赤色だけで示すより適した表示は？

  1. 全入力を画像にする
  2. 色に加えて文字等でもエラーを示す
  3. 赤をさらに濃くするだけ
  4. 色の違いをなくし説明も消す
答えと解説を読む

正解：色に加えて文字等でもエラーを示す

色を区別しにくい人にも情報が伝わるよう、色以外の手掛かりを付けます。

この例題の出典

  • Web Content Accessibility Guidelines (WCAG) 2.2

    1.1.1 Decoration Formatting Invisible; 1.1.1 Non-text Content; 1.2.2 Captions prerecorded; 1.3.1 Info and Relationships; 1.3.2 Meaningful Sequence; 1.4.1 Use of Color; 1.4.10 Reflow; 1.4.12 Text Spacing note 1; 1.4.3 Contrast Minimum; 1.4.4 Resize Text; 2.1.1 Keyboard; 2.1.2 No Keyboard Trap; 2.4.3 Focus Order; 2.4.4 Link Purpose In Context; 2.4.7 Focus Visible; 3.1.1 Language of Page normative criterion; 3.3.1 Error Identification; 3.3.2 Labels or Instructions; 4.1.2 Name Role Value; 4.1.3 Status Messages

    出典確認日：2026-10-05

例題 3 · 情報評価・アクセシビリティ

フォームが『エラー』だけを表示し、どの欄が何で誤りか分からない。必要な改善は？

  1. 誤った項目を特定し内容を文字で説明する
  2. 赤色を増やすだけ
  3. 全ての入力を消すだけ
  4. エラー文を画像だけにする
答えと解説を読む

正解：誤った項目を特定し内容を文字で説明する

自動で検出した入力エラーは対象と内容を分かるようにします。利用者が修正する手掛かりを得られます。

この例題の出典

  • Web Content Accessibility Guidelines (WCAG) 2.2

    1.1.1 Decoration Formatting Invisible; 1.1.1 Non-text Content; 1.2.2 Captions prerecorded; 1.3.1 Info and Relationships; 1.3.2 Meaningful Sequence; 1.4.1 Use of Color; 1.4.10 Reflow; 1.4.12 Text Spacing note 1; 1.4.3 Contrast Minimum; 1.4.4 Resize Text; 2.1.1 Keyboard; 2.1.2 No Keyboard Trap; 2.4.3 Focus Order; 2.4.4 Link Purpose In Context; 2.4.7 Focus Visible; 3.1.1 Language of Page normative criterion; 3.3.1 Error Identification; 3.3.2 Labels or Instructions; 4.1.2 Name Role Value; 4.1.3 Status Messages

    出典確認日：2026-10-05

この特集の出典

クイズで続けてみる

このテーマの範囲は「情報評価・アクセシビリティ」。範囲は「身近な知識・知識を広げる・幅広い教養」、難しさは「基礎・標準」を最初に選びます。開始画面で条件を変更できます。

このテーマのクイズへ

テストは提出後に解説を確認できます。連続チャレンジは回答ごとに解説、復習はこの端末で記録された未解消の誤答が対象です。ひまつぶしは学習記録を更新せずに取り組めます。

関連する特集

学びの特集をすべて見る →

気に入ったら、リンクをシェア

共有するのはこのページのアドレスだけです。保存データや成績は含みません。

このページのリンク