「代替テキスト決定ツリー」の 使い方
2019年6月1日

自己紹介

3

澤田 望
パーマ
メガネ（老眼）

ガリガリ
中年講師

4

岡山で独立（2014〜）

Webアクセシビリティ検証／イラスト制作／
岡山情報ビジネス学院 非常勤講師などなどコラムを担当

キヤノン （〜2013）

サイトデザイン監修／Webアクセシビリティ対応

WAIC（ウェブアクセシビリティ基盤委員会）（2011〜）5https://readable-na.world/ より@maepon@SawadaStdDesign@mako̲wis@sakie̲boondock6

本日の目標7

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

8

代替テキストとは

9

これです

https://cssnite.jp/lp/lp62/ より

10

<img src="https://cssnite.jp/images/CSSNiteLP62-logo_pc.png"
alt="「CSS Nite LP62「Webアクセシビリティの学校」特別授業」"
class="switch">

11代替テキストを直感で書いてみよう

12お手元の「代替テキスト決定ツリー」の用紙を裏返してみてください。

代替テキスト決定ツリー ( 追記あり )
画像の種別

文字がある

YES

画像例

リーダブルな夜機能を示すグラフィックと文字

ホームホーム

文字画像

YES

代替テキストに設定すべき内容

空

隣接するテキストと重複NO

リンク／ボタン

参考：https://www.w3.org/WAI/tutorials/images/decision-tree/

シンプルなグラフィック／写真（図／グラフなど複雑な場合は＊参照）

代替テキストの例

alt = ””

機能説明

alt = “ホーム”

画像中の文字alt = “ホーム”

リンク先のタイトル

alt = “ホーム”

ボタンの機能alt = “印刷”img 要素：マップ全体の説明

alt = “日本全体の店舗マップ”

area 要素：個々のリンク先

alt = “北海道”

簡潔な説明

alt = “電話番号”

画像に含まれている全ての情報

alt = “〜のグラフ：2015 年は nn、NO

イメージマップ

意味があるYES

シンプルなグラフィック／写真NO＊

080-1234-5678

13

代替テキストを書いてみよう

表側の「代替テキスト決定ツリー」は見たらダメ

撮影スポット 3：港近くの防波堤

リーダブルな夜のテーマ

漁港はいつも猫だらけ。漁師さんや観光客目当てに腹を空かせた♪ 誰も一人じゃ〜

やりきれないよ〜

猫たちが集まってきます。午後は撮影者の影が映り込んでマヌケ♪ ついてくるかい〜？

手を伸ばすよ〜♪ 一緒にやろう〜

たどり着くまで〜 （ア゛〜〜〜〜〜）な写真になるので、午前中に撮影するのがオススメ。

上部のサンプル画像に対する代替テキストをこの欄に記入<img src="cats.jpg" alt="">

ペンのない方は、スマホでも何でも書き留めておければOK<img src="bluesman.png" alt="">14

このセッションの最後に振り返ります。

15

代替テキストの基本16alt属性

alt属性の値は、画像を処理することができないまたは読み込みが無効である画像に対して、等価なコンテンツを提供する。
（すなわち、img要素のフォールバックコンテンツである）。

”

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

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

18

alt属性の六つの基本
無いとどう読み上げられる？
1. alt属性は必須（例外を除く）
2. 値は空では×（例外を除く）

空だとどう読み上げられる？

3. 値は画像を適切に代替する
4. 値の適切さは、画像が表現しているものや文脈によって異なる
5. 画像の情報と等価であること（補足説明でもキャプションでもない）繰り返すとどう読み上げられる？
6. 本文にあることを2回繰り返さない

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

19

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

20

<img src="img/c8nxu2mz2c83n4by78cgaxrpa8849.png"><img src="img/c8nxu2mz2c83n4by78cgaxrpa8849.png" alt=""><a href="#"><img src="img/c8nxu2mz2c83n4by78cgaxrpa8849.png"
alt="年老いた灰色の猫">年老いた灰色の猫</a>https://sawada-std-design.com/works/cssnite/alt-sample.html より（デモはiOS版VoiceOverにて実行）

21

代替テキストを書くための手順とは22https://www.w3.org/WAI/tutorials/images/decision-tree/ より

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

24

代替テキスト決定ツリー ( 追記あり )
画像の種別

文字がある

YES

画像例

リーダブルな夜機能を示すグラフィックと文字

文字画像

YES

代替テキストに設定すべき内容

空

隣接するテキストと重複NO

リンク／ボタン

参考：https://www.w3.org/WAI/tutorials/images/decision-tree/

ホーム

ホーム

シンプルなグラフィック／写真（図／グラフなど複雑な場合は＊参照）

代替テキストの例

alt = ””

機能説明

alt = “ホーム”

画像中の文字alt = “ホーム”

リンク先のタイトル

alt = “ホーム”

ボタンの機能alt = “印刷”img 要素：マップ全体の説明

alt = “日本全体の店舗マップ”

area 要素：個々のリンク先

alt = “北海道”

簡潔な説明

alt = “電話番号”

画像に含まれている全ての情報
書き切れない場合は主旨説明（本文テキストや表での説明も有効）

alt = “〜のグラフ：2015 年は nn、2016 年は nn、2017 年は nn、2018 年はnn と年々好調に伸びています”

テキストで説明されていない内容

alt = “イラスト：年老いた灰色の猫”

NO

イメージマップ

意味があるYES

シンプルなグラフィック／写真

080-1234-5678

NO

複雑な図／グラフ／写真＊

隣接するテキストの補足＊＊
猫は気まぐれです

隣接するテキストと重複コンテンツの印象や感情を伝える画像

装飾画像

YES

TEL：0 80-1234〜

空（補足する内容がある場合は＊＊参照）

alt = ””

印象を伝える説明

alt = “イラスト：猫の不安そうな眼差し”

画像グループ

1 枚で全体を説明

alt = “星二つ”
alt = ””
alt = ””

ページデザインの一部

空

alt = ””

ページの雰囲気を表現した画像

空

alt = ””

25

文字がある： YES

26

画像の種別機能を示す
グラフィックと文字

文字画像

画像例

代替テキストに設定すべき内容

代替テキストの例

機能説明

alt="ホーム"

画像中の文字

alt="ホーム"27

画像の種別

隣接するテキストと重複

画像例

代替テキストに設定すべき内容

代替テキストの例

空（図／グラフなど複雑な場合は＊参照）

alt=""

28

「ここにグラフがある」ということを伝えなければ、このグラフは、2014年第1四半期のWebサ文章で説明している対象が不明になってしまう。

イトのヒット数を示しています。サイト1には、他のサイトよりも多くの訪問者がいますが、訪問者数は減少しています。 サイト
2ではかなり一定数の訪問者がいますが、サイト3では毎月ヒット数が増えています。

https://www.w3.org/WAI/tutorials/images/complex/ をGoogle翻訳で翻訳29リンク／ボタン： YES

30

画像の種別画像例

代替テキストに設定すべき内容

代替テキストの例

シンプルな

リンク先のタイトル

alt = "ホーム"グラフィック／写真

ボタンの機能alt = "印刷"31

画像の種別イメージマップ

画像例

代替テキストに設定すべき内容

代替テキストの例

img要素：マップ全体の説明

alt = "日本全体の店舗マップ"

area要素：個々のリンク先

alt = "北海道"32意味がある： YES

33

画像の種別シンプルなグラフィック／写真

画像例

080-1234-5678

代替テキストに設定すべき内容

代替テキストの例

簡潔な説明

alt = "電話番号"34

画像の種別

複雑な図／グラフ／写真＊

画像例

代替テキストに設定すべき内容

画像に含まれている全ての情報
書き切れない場合は主旨説明（本文テキストや表での説明も有効）

代替テキストの例

alt = "〜のグラフ：
2015年はnn、2016年はnn、2017年はnn、2018年はnnと年々好調に伸びています"35

<ﬁgure role= "group" ><img src= "chart.png" alt= "サイト1〜3の2014年第1四半期の月間および総訪問者数を示す棒グラフ" ><ﬁgcaption> 2014年の第1四半期のウェブサイトのヒット数を 〜 </ﬁgcaption></ﬁgure>2014年第1四半期のWebサイトのヒット数を示しています。サイト1には、他のサイトよりも多くの訪問者がいますが、訪問者数は減少しています。 サイト2ではかなり一定数の訪問者がいますが、サイト3では毎月ヒット数が増えています。

-36

<ﬁgure role= "group" ><img src= "chart.png" alt= "サイト1〜3の2014年第1四半期の月間および総訪問者数を示す棒グラフ" ><ﬁgcaption> <a href= "2014-ﬁrst-qtr.html" >Image Description</a> </ﬁgcaption></ﬁgure>example.comのサイト訪問者概要
2014年第1四半期のWebサイトのヒット数を示しています。サイト1には、他のサイトよりも多くの訪問者がいますが、訪問者数は減少しています。サイト2ではかなり一定数の訪問者がいますが、サイト3では毎月ヒッ
ト数が増えています。
値

Image Description
https://www.w3.org/WAI/tutorials/images/complex/ をGoogle翻訳で翻訳

期間

サイト1

サイト2

サイト31月13511292

2月

117114

99

3月

96111

126

合計34833730837

<img src= "chart.png" alt= "サイト1〜3の2014年第1四半期の月間および総訪問者数を示す棒グラフ" aria-describedby= "desc1 desc2">：<h2 id= "desc1">example.comのサイト訪問者</h2><p id= "desc2">2014年第一四半期のWebサイトのヒット数を〜</h2>
example.comのサイト訪問者概要
2014年第1四半期のWebサイトのヒット数を示しています。サイト1には、他のサイトよりも多くの訪問者がいますが、訪問者数は減少しています。サイト2ではかなり一定数の訪問者がいますが、サイト3では毎月ヒット数が増えています。
値

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

期間

サイト1

サイト2

サイト31月13511292

2月

117114

99

3月

96111

126

合計

348

337

30838画像の種別

隣接するテキストの補足＊＊

隣接するテキストと重複

画像例

猫は気まぐれです

代替テキストに設定すべき内容

代替テキストの例

テキストで説明されていない内容

alt = "イラスト：
年老いた灰色の猫"

空
TEL：080-1234〜 （補足する内容がある場合はalt = ""

＊＊参照）

39

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

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

この写真の犬がさぁ見えている人

写真？ 何のこと？

見えていない人41

この写真の犬がさぁ見えている人「茶色い犬が寝てる写真」のことね

見えていない人42

画像の種別コンテンツの印象や感情を伝える画像

画像グループ

画像例

代替テキストに設定すべき内容

印象を伝える説明

1枚で全体を説明

代替テキストの例

alt = "イラスト：猫の不安そうな眼差し"

alt = "星二つ"alt = ""
alt = ""43

装飾画像： YES

44

画像の種別ページデザインの一部ページの雰囲気を表現した画像

画像例

代替テキストに設定すべき内容

代替テキストの例

空alt = ""空alt = ""45

適切な代替テキスト

46文脈による適切さの違い

47

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

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

48

49

小説の挿絵なら?
<img src= "bird.jpg" alt= "写真：デッキのフェンスに白いカモメが留まっている。
デッキの向こうはすぐ海。遠くには人工島の街並みも見えている。">

少し肌寒かったが、二人は仕方なく外を歩くことにした。海沿いのデッキを歩くなんて、ずいぶん久しぶりかも知れない。
今朝から二人とも少しナーバスになっていたので、気分転換にはちょうど良く感じられた。ふと目をやると、一羽の鳥が。
50

野鳥図鑑なら?
<img src= "bird.jpg" alt= "写真：赤いくちばしと赤い脚が目立つ、小ぶりなユリカモメの雄。顔が白く冬羽であるため、冬に撮影されたと思われる。">

東京都の鳥に指定されているユリカモメ。
東京臨海新交通臨海線の愛称にもなっており、親しまれている鳥である。人間に対しても物怖じせず、単独行動も多い。
しかし見た目の愛らしさからは想像し難い雑食性を持っており、しばしば人間のゴミをあさる姿も見られる。
51

同じ画像に対する代替テキストでも用途や文脈によってさまざま。

52

適切な代替テキストとは

53

画像を含むコンテンツ
が伝えている内容＝代替テキストを含むコンテンツが伝えている内容≒
視覚から得られる情報

聴覚から得られる情報54<img src= "bird.jpg" alt= "生活向上委員会体制図：生活向上委員会は、財政大臣が主査を務め、CCOなど調理場担当者による委員からなる食事検討委員会と、推進テーマごとに設置するワーキンググループで構成されます。">
生活向上委員会体制図
推進テーマ1 WG

主査：財政大臣
委員：調理場担当者（CCOなど）
食事検討委員会

推進テーマ2 WG
推進テーマ3 WG

生活向上委員会55

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

56

代替テキストの適切さを判断できる人

57

発注／決済者／サイトオーナー
プロジェクト・マネージャー• 画像を見ることができる

ディレクター• 代替テキストを読める／聞ける

原稿制作者• コンテンツの文脈が理解できる

ビジュアルデザイナー
HTML実装担当者
サーバー技術者
ビジュアルブラウザー スクリーンリーダー
利用閲覧者
利用閲覧者

58

自分で書いた内容を振り返ってみよう59振り返りポイント•写真／イラスト／図など、その画像が何であるかが示されているか？
•文章には表現されていない画像でしか伝えられていない情報があるか？
•コンテンツの文脈に即した内容になっているか？

60あくまで参考例<img src= "cats.jpg" alt= "写真：防波堤の上にいる５匹の猫たちのカット。残念ながら撮影者の影が映り込んでいる作例。">

撮影スポット3：港近くの防波堤
漁港はいつも猫だらけ。漁師さんや観光客目当てに腹を空かせた猫たちが集まってきます。午後は撮影者の影が映り込んでマヌケな写真になるので、午前中に撮影するのがオススメ。

61

<img src= "bluesman.png" alt= "イラスト：サングラスをかけハットを被った黒人
あくまで参考例
ブルースマンが、暗い道端でギターを弾きながら歌っている。その足元を、年老いた灰色の猫が不安げにウロウロと歩いている様子。">
リーダブルな夜のテーマ♪ 誰も一人じゃ〜

やりきれないよ〜♪ ついてくるかい〜？

手を伸ばすよ〜♪ 一緒にやろう〜

たどり着くまで〜（ア゛〜〜〜〜〜）

62

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

63また来週！

@SawadaStdDesign64