画像と代替テキストのアクセシビリティ完全ガイド：意味づけ・書き方の型・装飾画像・図解・UIアイコン・SNS運用・組織ルールまで

概要サマリー（先に要点）

代替テキスト（alt）は「画像を説明する」のではなく、“その場面で画像が果たす役割”を言語化することが本質ですの。

装飾画像は alt=“”（空）で無視させ、意味を持つ画像には目的ベースのaltを。

グラフ・図表は 数値の要点を本文化し、長い説明はfigure＋本文で補完。

UIアイコンは 役割＝テキストラベル を alt ではなく aria-label / ボタンの可視ラベル で提供するほうが適切。

SNS用画像、EC写真、プロフィール画像など、各分野向けの**「どう書くか」テンプレート**を多数収録していますわ。

対象読者（具体）：Web編集者、UI/UXデザイナー、フロントエンドエンジニア、コンテンツ制作者、SNS担当、EC運用者、広報・人事・教育担当

アクセシビリティレベル：WCAG 2.1 AA 準拠（1.1.1 非テキストコンテンツ）

1. はじめに：代替テキストは“画像の役者名”のようなもの

画像は、ときに文章より雄弁ですわ。でも、その魅力は「見る」ことが前提。視覚障害のある方、スクリーンリーダーを使う方、回線が弱くて画像が表示されない状況では、画像の内容は存在しないのと同じになってしまいます。
そのギャップを埋めて、文章と画像をどんな状況でも同じ意味で理解できるようにするのが代替テキスト（alt）の役割。
altは、画像の「説明」ではなく、“ページ内で何を伝えているか” を短く言葉にする、小さな優しさなのです。

2. altテキストの基本原則：ページの目的に合わせて書く

2.1 「画像そのもの」ではなく「伝えたい意味」を書く

例：
悪い例：alt="男の人がPCで作業している写真"
良い例：alt="リモートワーク中の社員の作業風景"
→ ページが「働き方紹介」なら**“文脈の意味”**を書くべきですの。

2.2 画像の種類別に考える

意味を持つ画像：言語化が必要
飾り（デコレーション）画像：alt=""（空）で飛ばす
ボタン内アイコン：alt ではなく ボタンラベル
図表・グラフ：本文で要点を文章に
スクリーンショット：UIの目的と操作の要約を書き、細部の長文化は避ける

2.3 「写真」「イラスト」などのメディア種別は不要

スクリーンリーダーが自動で判別しないため、必要に応じて書いても良いですが、意味がなければ省いて問題ありません。

3. 画像の種類別：最適な書き方テンプレート集

3.1 装飾画像（背景・罫線・パターン）

alt は 空（alt=""）
role="presentation" または aria-hidden="true" を併用することも

<img src="pattern.png" alt="" aria-hidden="true">

3.2 意味を持つ写真（導入・説明）

型：

主題（何を）＋文脈（なぜその画像が必要か）

例：
alt="社内勉強会で社員が発表している様子"
alt="バリアフリー仕様のエントランス（スロープと手すり付き）"

3.3 商品写真（EC）

型：

商品名＋特徴（色/形/質感/用途）

例：
alt="ベージュのレザー製トートバッグ。軽量でA4書類対応"
alt="メンズ用ランニングシューズ（ブルー、通気性メッシュ素材）"

3.4 SNS用OGP画像・サムネイル

型：

記事の主題・内容の要点

例：
alt="Webアクセシビリティ入門：色・文字・操作性の基本をまとめた記事"

3.5 図表・グラフ

altは短く、本文側で詳細説明すると最も自然ですの。

悪い例：
alt="折れ線グラフ。2020年から2024年まで売上が上昇しているグラフの詳細説明を長文で..."

良い例：
alt="2020〜2024年の売上推移（上昇傾向）"
→ その下に本文で数値説明

「売上は2020年の120万から毎年増加し、2024年には210万に達しました。」

3.6 UIアイコン（検索・閉じる・メニュー）

altを使わず、ボタンに可視ラベル or aria-label を付けます。

悪い例：

<img src="search.svg" alt="検索">

良い例：

<button aria-label="検索">
  <img src="search.svg" alt="">
</button>

3.7 プロフィール画像

型：

人物名＋目的（どんなプロフィールか）

例：
alt="広報担当の佐々木さん（プロフィール写真）"

4. alt を書かないほうが良い画像：判断ポイント

情報が重複している（キャプション・見出し・本文で既に伝わっている）
純装飾（意味なし）
角丸・影・仕切り線のように“視覚演出だけ”の要素
画像の中に文字があるが、本文に同じ内容がある

特に文字入り画像は、本文にテキストとして同じ内容を置くことが鉄則。画像の文字をaltに丸ごと入れる必要はありません。

5. 書いてはいけない alt・よくある地雷

誤り	なぜダメ？	正しい方針
`alt="画像"`	意味なし	文脈に沿って書く
`alt="クリックして詳細を見る"`	リンクテキストを重複	リンク自体のテキストに意味を
`alt="decorative"`	SRが読み上げてしまう	空alt（`alt=""`）に
長すぎる alt	読み上げが冗長、理解が困難	長文は本文で説明
自動生成の文章	意味が不明確	必ず人の判断で調整

6. alt とキャプション・本文の役割分担

6.1 alt は “短い目的説明”

例：
alt="オンライン会議の様子"

6.2 キャプションは“補足情報”

例：

「チームメンバーが週次ミーティングで成果を共有している様子。」

6.3 本文は“要点の言語化・数値説明”

→ 特に図表や複雑な写真は本文側で説明を厚く。

7. スクリーンショットの alt：操作意図を伝える

7.1 UIをすべて説明する必要はない

要点だけを言語化します。

例：
alt="設定画面で通知をオンに切り替える操作手順を示すスクリーンショット"

操作を細部まで書きすぎると、却って混乱を招きますの。

7.2 画面の流れは本文で補完

手順1
手順2
エラー例
など、本文構造化が最適です。

8. SNS・広告領域の alt 運用

8.1 SNS（X/Instagram/LinkedIn）

altは240〜400字まで入力可能
画像の主題＋読み手が得られる価値
コントラスト・文字量が多い画像は、テキスト投稿と併記すると親切

例：
alt="WCAG 2.1の4原則を図解した画像。知覚可能性、操作可能性、理解可能性、堅牢性の4要素をそれぞれ簡潔に示している。"

8.2 広告バナー

altで「広告」であることは書かなくてよい
内容・訴求点を短く明瞭に
例：
alt="在宅ワーク向けのモニターアームのキャンペーン案内"

9. 組織での alt 運用ルール化：品質を揺らさないために

9.1 テンプレート化

「主題＋文脈」
「商品名＋特徴」
「操作の目的」

9.2 用語統一

“写真”“画像”など先頭語を避ける
人物名・地名・製品名は正式表記に統一

9.3 リリース前チェック（5分）

意味のある画像に alt が入っている
装飾画像が alt=“” になっている
長文 alt が本文と重複していない
図表の本文説明がある
UIアイコンがボタンラベルになっている

10. 対象読者にとっての価値（具体）

視覚障害のある方：画像の“背景にある意味”が伝わり、ページ内容を正しく理解できる。
認知特性のある方：文脈に沿った短い alt は理解を助け、長文の混乱を避けられる。
高齢者：見づらい状況でも文章で補完できて安心。
検索利用者：画像の意味がメタデータ化され、検索性も向上。
制作者：統一ルールで作業が高速化し、品質が安定。

11. アクセシビリティレベルの評価（本記事の到達点）

WCAG 2.1 AA：1.1.1 非テキストコンテンツ
- 装飾画像の空alt
- 意味画像の適切な alt
- グラフ・図表の本文説明
- UIアイコンのラベル化（名前・役割・値）
1.4.5 画像化された文字：画像中の文字に代替テキストを提供
2.4.6 見出しとラベル：UIアイコンの明確なラベル提供
4.1.2：名前・役割・値の適正化（特にUI要素で）

12. まとめ：画像は“やさしさで補完されること”で完全になる

altは「画像の説明」ではなく、その画像が文章の中で果たす意味を書く。
装飾画像は alt=“”、意味画像は短く簡潔に。
図表やUIスクショは 本文側の説明 とセットで。
SNSやECなど、媒体ごとに最適な alt がある。
組織でルール化すると、品質が安定し、読み手の理解が深まる。

画像は文章を温かく豊かにしてくれますわ。
それをすべての人へ公平に届けるために、代替テキストは欠かせない存在なのです。
あなたのメディアが、どんな状況の方にもやさしく届きますように。わたしも心を込めてお手伝いしますね。