1.
代替テキストの基本から応用まで

2.
自己紹介
2

3.
3
澤田 望
パーマ
メガネ
（老眼）
ガリガリ
中年講師

4.
4
岡山で独立（2014～） Webアクセシビリティ検証／
イラスト制作／
岡山情報ビジネス学院 非常勤講師
などなど
キヤノン （～2013） サイトデザイン監修／
Webアクセシビリティ対応
WAIC （2011～） （ウェブアクセシビリティ基盤委員会）
コラムを担当

5.
本日の目標
5

6.
代替テキストとは？
代替テキストを書くための手順とは？
適切な代替テキストとは？
6

7.
代替テキストとは
7

8.
8
Twitterの投稿画面（のキャプチャ

9.
9
これです

10.
今日考えるのは、
画像に対する代替テキスト＝img要素のalt属性値
についてです。
10

11.
×11
だいがえ
「代替」

12.
○ 12
「代替」
だいたい

13.
×13
「alt」
アルト

14.
○ 14
「alt」
オルト

15.
×15
<img src=“hoge” alt=“ほげ”>
altタグ

16.
○ 16
alt属性
<img src=“hoge” alt=“ほげ”>

17.
17https://momdo.github.io/html/ より

18.
https://momdo.github.io/html/embedded-content.html#attr-img-alt より 18
alt属性
alt属性の値は、画像を処理することができないまたは読み込み
が無効である画像に対して、等価なコンテンツを提供する。
（すなわち、img要素のフォールバックコンテンツである）。
”
”

19.
19https://momdo.github.io/html/embedded-content.html#attr-img-alt より

20.
alt属性の基本
20
• alt属性は必須（例外を除く）
• 値は空では×（例外を除く）
• 値は画像を適切に代替する
• 値の適切さは、画像が表現しているものや文脈によって異なる
• 画像の情報と等価であること（補足説明でもキャプションでもない）
• 本文にあることを2回繰り返さない
https://momdo.github.io/html/embedded-content.html#attr-img-alt より

21.
21
• alt属性は必須（例外を除く）→ 無いとどう聞こえる？
• 値は空では×（例外を除く）→ 空だとどう聞こえる？
• 値は画像を適切に代替する
• 値の適切さは、画像が表現しているものや文脈によって異なる
• 画像の情報と等価であること（補足説明でもキャプションでもない）
• 本文にあることを2回繰り返さない → 繰り返すとどう聞こえる？
alt属性の基本

22.
スクリーンリーダーで聞いてみよう！
22

23.
23https://sawada-std-design.com/works/readable-na/alt-sample.html より

24.
代替テキストを書く手順とは
24

25.
25https://www.w3.org/WAI/tutorials/images/decision-tree/ より

26.
もう少し簡略化してみました。
26

27.
27
代替テキスト決定ツリー 参考：https://www.w3.org/WAI/tutorials/images/decision-tree/
文字がある
リンク／ボタン
意味がある
隣接するテキストと重複
装飾画像
機能を示すグラフィックと文字
文字画像
alt = ””
alt = “日本全体の店舗マップ”
alt = “北海道”
alt = “電話番号”
alt = “イラスト：年老いた灰色の猫”
alt = “イラスト：猫の不安そうな眼差し”
alt = “星二つ”
alt = ””
alt = ””
alt = “ホーム”
alt = “印刷”
alt = “ホーム”
alt = “ホーム”
隣接するテキストと重複
印象や感情を伝える画像
ページデザインの一部
alt = ””
隣接するテキストの補足 テキストで説明されていない内容
シンプルなグラフィック／写真
シンプルなグラフィック／写真
イメージマップ
リンク先のタイトル
ボタンの機能
img 要素：マップ全体の説明
area 要素：個々のリンク先
alt = ””
機能説明
空
画像例
ページの雰囲気を表現した画像
画像の種別
空
空
alt = ””空
簡潔な説明
印象を伝える説明
画像グループ 1 枚で全体を説明
複雑な図／グラフ／写真
代替テキストに設定すべき内容
画像に含まれている全ての情報
書き切れない場合は主旨説明
（本文テキストや表での説明も有効）
画像中の文字
080-1234-5678
TEL：080-1234～
ホーム
ホーム
リーダブルな夜
猫は気まぐれです
代替テキストの例
alt = “～のグラフ：2015 年は nn、
2016 年は nn、2017 年は nn、2018 年は
nn と年々好調に伸びています”
NO
YES
NO
YES
NO
YES
YES

28.
とは言え…
本当に画像の存在を伝えなくていいの？
28

29.
隣接するテキストと重複
機能を示すグラフィックと文字
文字画像
alt = ””
alt = “日本全体の店舗マップ”
alt = “北海道”
alt = “電話番号”
alt = “イラスト：年老いた灰色の猫
alt = “イラスト：猫の不安そうな眼
alt = “ホーム”
alt = “印刷”
alt = “ホーム”
alt = “ホーム”
隣接するテキストと重複
印象や感情を伝える画像
alt = ””
隣接するテキストの補足 テキストで説明されていない内容
シンプルなグラフィック／写真
シンプルなグラフィック／写真
イメージマップ
リンク先のタイトル
ボタンの機能
img 要素：マップ全体の説明
area 要素：個々のリンク先
機能説明
空
空
簡潔な説明
印象を伝える説明
複雑な図／グラフ／写真
画像に含まれている全ての情報
書き切れない場合は主旨説明
（本文テキストや表での説明も有効）
画像中の文字
080-1234-5678
TEL：080-1234～
ホーム
ホーム
リーダブルな夜
猫は気まぐれです
alt = “～のグラフ：2015 年は nn、
2016 年は nn、2017 年は nn、20
nn と年々好調に伸びています”
29
空 alt = “” ？

30.
30https://www.w3.org/WAI/tutorials/images/complex/ をGoogle翻訳で翻訳
同一ページ
同じページ内で重複する内容の
テキストがあれば空（””）で良い？

31.
「そこに画像（グラフ）がある」ってことを
伝えることは意味があるのでは？
31

32.
隣接するテキストと重複
機能を示すグラフィックと文字
文字画像
alt = ””
alt = “日本全体の店舗マップ”
alt = “北海道”
alt = “電話番号”
alt = “イラスト：年老いた灰色の猫
alt = “イラスト：猫の不安そうな眼
alt = “ホーム”
alt = “印刷”
alt = “ホーム”
alt = “ホーム”
隣接するテキストと重複
印象や感情を伝える画像
alt = ””
隣接するテキストの補足 テキストで説明されていない内容
シンプルなグラフィック／写真
シンプルなグラフィック／写真
イメージマップ
リンク先のタイトル
ボタンの機能
img 要素：マップ全体の説明
area 要素：個々のリンク先
機能説明
空
空
簡潔な説明
印象を伝える説明
複雑な図／グラフ／写真
画像に含まれている全ての情報
書き切れない場合は主旨説明
（本文テキストや表での説明も有効）
画像中の文字
080-1234-5678
TEL：080-1234～
ホーム
ホーム
リーダブルな夜
猫は気まぐれです
alt = “～のグラフ：2015 年は nn、
2016 年は nn、2017 年は nn、20
nn と年々好調に伸びています”
32
空 alt = “” ？

33.
33https://www.w3.org/WAI/tutorials/images/decorative/ より

34.
34https://www.w3.org/WAI/tutorials/images/decorative/ をGoogle翻訳で翻訳

35.
隣接するテキストは、画像が伝えている情報を
本当に全て伝えているの？
35

36.
36
この写真の犬がさぁ
写真？何のこと？
見えていない人見えている人

37.
37
見えていない人見えている人
この写真の犬がさぁ
茶色い犬が
寝てる写真のことね

38.
そこで折衷案。
38

39.
39
代替テキスト決定ツリー( 追記あり) 参考：https://www.w3.org/WAI/tutorials/images/decision-tree/
文字がある
リンク／ボタン
意味がある
隣接するテキストと重複
装飾画像
機能を示すグラフィックと文字
文字画像
alt = ””
alt = “日本全体の店舗マップ”
alt = “北海道”
alt = “電話番号”
alt = “イラスト：年老いた灰色の猫”
alt = “イラスト：猫の不安そうな眼差し”
alt = “星二つ”
alt = ””
alt = ””
alt = “ホーム”
alt = “印刷”
alt = “ホーム”
alt = “ホーム”
隣接するテキストと重複
コンテンツの印象や感情を伝える画像
ページデザインの一部
alt = ””
隣接するテキストの補足＊＊ テキストで説明されていない内容
シンプルなグラフィック／写真
シンプルなグラフィック／写真
イメージマップ
リンク先のタイトル
ボタンの機能
img 要素：マップ全体の説明
area 要素：個々のリンク先
alt = ””
機能説明
空
（図／グラフなど複雑な場合は＊参照）
画像例
ページの雰囲気を表現した画像
画像の種別
空
（補足する内容がある場合は＊＊参照）
空
alt = ””空
簡潔な説明
印象を伝える説明
画像グループ 1 枚で全体を説明
複雑な図／グラフ／写真＊
代替テキストに設定すべき内容
画像に含まれている全ての情報
書き切れない場合は主旨説明
（本文テキストや表での説明も有効）
画像中の文字
080-1234-5678
TEL：080-1234～
ホーム
ホーム
リーダブルな夜
猫は気まぐれです
代替テキストの例
alt = “～のグラフ：2015 年は nn、
2016 年は nn、2017 年は nn、2018 年は
nn と年々好調に伸びています”
NO
YES
NO
YES
NO
YES
YES

40.
さらにマシンリーダブルに。
40

41.
41https://www.w3.org/WAI/tutorials/images/complex/ をGoogle翻訳で翻訳
同一ページ
<figure role= "group" >
<img src= "chart.png" alt= "Bar chart showing monthly and total visitors for the first
quarter 2014 for sites 1 to 3" >
<figcaption> 2014年の第1四半期のウェブサイトのヒット数を ～ </figcaption>
</figure>
隣接している場合は figure 要素で説明

42.
42https://www.w3.org/WAI/tutorials/images/complex/ をGoogle翻訳で翻訳
同一ページ

43.
画像と同一ページ内の説明を関係付ける
43
<img src= "chart.png" alt= "Bar chart showing monthly and total visitors for the first
quarter 2014 for sites 1 to 3" aria-describedby= "description">
：
<h2 id= "description">example.comのサイト訪問者</h2>

44.
44https://www.w3.org/WAI/tutorials/images/complex/ をGoogle翻訳で翻訳
別ページ

45.
画像と別ページの説明を関係付ける
45
<figure role= "group" >
<img src= "chart.png" alt= "Bar chart showing monthly and total visitors for the first
quarter 2014 for sites 1 to 3" >
<figcaption> <a href= "2014-first-qtr.html" >Image Description</a> </figcaption>
</figure>

46.
文脈によって変わる代替テキスト
46

47.
47
• alt属性は必須（例外を除く）
• 値は空では×（例外を除く）
• 値は画像を適切に代替する
• 値の適切さは、画像が表現しているものや文脈によって異なる
• 画像の情報と等価であること（補足説明でもキャプションでもない）
• 本文にあることを2回繰り返さない
https://momdo.github.io/html/embedded-content.html#attr-img-alt より
alt属性の基本

48.
48

49.
49
建築写真
報道写真
同じ写真でも使い道はさまざま
写真講座
旅行記事
ボタンのサムネイル
風景写真
百科事典

50.
50
風景写真なら?
alt=“写真：鷲羽山から見下ろす瀬戸大橋と多島美"

51.
51
建築写真なら?
alt=“写真：（左から）北備讃瀬戸大橋／与島橋／岩黒島橋／
櫃石島橋／下津井瀬戸大橋"

52.
52
報道記事なら?
alt=“写真：鷲羽山にも広がる松食い虫被害"

53.
同じ写真でも、代替テキストは
用途や文脈によってさまざま。
53

54.
適切な代替テキストとは
54

55.
• 画像の内容を視覚的に把握できて、
かつ代替テキストの内容と比較できる人
（原稿作成者と実装する制作担当者）
• 画像を見るだけ／代替テキストを読むだけ
• 比較できない
• 適切かどうかという視点がない
55
適切かどうか判断できる人
それ以外の人
間違っていても気がつくことができない

56.
画像が伝えている内容 ＝ 代替テキスト
56
とは限らないので注意！
画像を含んだコンテンツが伝えている内容
代替テキスト含んだコンテンツが伝えている内容＝
適切な代替テキスト

57.
視覚から得られる情報
57
得られる情報を限りなく近づけたい
≒
聴覚から得られる情報

58.
視覚から得られる情報
58
得られる情報を限りなく近づけたい
≒
Googlebotくんが得る情報

59.
59
生活向上委員会
主査：財政担当執行役
委員：調理場責任者（CBOなど）
推進テーマ1 WG
運営委員会
生活向上委員会体制図
推進テーマ2 WG
推進テーマ3 WG
生活向上委員会体制図：
生活向上委員会は、財政担当執行役が主査を務め、CBOなど
調理場責任者による委員からなる運営委員会、推進テーマごと
に設置するワーキンググループで構成されます。

60.
電話の相手に画像を含んだページを
読み聞かせるつもりで考えるのがコツ。
60

61.
次回は1月15日（火）の予定です！
61

62.
62
@SawadaStdDesign
また来週！