More Related Content More from Nozomi Sawada (18) 代替テキストの基本から応用まで21. 21
• alt属性は必須(例外を除く)→ 無いとどう聞こえる?
• 値は空では×(例外を除く)→ 空だとどう聞こえる?
• 値は画像を適切に代替する
• 値の適切さは、画像が表現しているものや文脈によって異なる
• 画像の情報と等価であること(補足説明でもキャプションでもない)
• 本文にあることを2回繰り返さない → 繰り返すとどう聞こえる?
alt属性の基本
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
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 = “” ?
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 = “” ?
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
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>
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>
47. 47
• alt属性は必須(例外を除く)
• 値は空では×(例外を除く)
• 値は画像を適切に代替する
• 値の適切さは、画像が表現しているものや文脈によって異なる
• 画像の情報と等価であること(補足説明でもキャプションでもない)
• 本文にあることを2回繰り返さない
https://momdo.github.io/html/embedded-content.html#attr-img-alt より
alt属性の基本