Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

877 views

Published on

2018/11/05(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2018/11/05」でのスライドです。

Published in: Internet
  • Be the first to comment

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

  1. 1. 代替テキストの基本から応用まで
  2. 2. 自己紹介 2
  3. 3. 3 澤田 望 パーマ メガネ (老眼) ガリガリ 中年講師
  4. 4. 4 岡山で独立(2014~) Webアクセシビリティ検証/ イラスト制作/ 岡山情報ビジネス学院 非常勤講師 などなど キヤノン (~2013)  サイトデザイン監修/ Webアクセシビリティ対応 WAIC  (2011~) (ウェブアクセシビリティ基盤委員会) コラムを担当
  5. 5. 本日の目標 5
  6. 6. 代替テキストとは? 代替テキストを書くための手順とは? 適切な代替テキストとは? 6
  7. 7. 代替テキストとは 7
  8. 8. 8 Twitterの投稿画面(のキャプチャ
  9. 9. 9 これです
  10. 10. 今日考えるのは、 画像に対する代替テキスト=img要素のalt属性値 についてです。 10
  11. 11. ×11 だいがえ 「代替」
  12. 12. ○ 12 「代替」 だいたい
  13. 13. ×13 「alt」 アルト
  14. 14. ○ 14 「alt」 オルト
  15. 15. ×15 <img src=“hoge” alt=“ほげ”> altタグ
  16. 16. ○ 16 alt属性 <img src=“hoge” alt=“ほげ”>
  17. 17. 17https://momdo.github.io/html/ より
  18. 18. https://momdo.github.io/html/embedded-content.html#attr-img-alt より 18 alt属性 alt属性の値は、画像を処理することができないまたは読み込み が無効である画像に対して、等価なコンテンツを提供する。 (すなわち、img要素のフォールバックコンテンツである)。 ” ”
  19. 19. 19https://momdo.github.io/html/embedded-content.html#attr-img-alt より
  20. 20. alt属性の基本 20 • alt属性は必須(例外を除く) • 値は空では×(例外を除く) • 値は画像を適切に代替する • 値の適切さは、画像が表現しているものや文脈によって異なる • 画像の情報と等価であること(補足説明でもキャプションでもない) • 本文にあることを2回繰り返さない https://momdo.github.io/html/embedded-content.html#attr-img-alt より
  21. 21. 21 • alt属性は必須(例外を除く)→ 無いとどう聞こえる? • 値は空では×(例外を除く)→ 空だとどう聞こえる? • 値は画像を適切に代替する • 値の適切さは、画像が表現しているものや文脈によって異なる • 画像の情報と等価であること(補足説明でもキャプションでもない) • 本文にあることを2回繰り返さない → 繰り返すとどう聞こえる? alt属性の基本
  22. 22. スクリーンリーダーで聞いてみよう! 22
  23. 23. 23https://sawada-std-design.com/works/readable-na/alt-sample.html より
  24. 24. 代替テキストを書く手順とは 24
  25. 25. 25https://www.w3.org/WAI/tutorials/images/decision-tree/ より
  26. 26. もう少し簡略化してみました。 26
  27. 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. とは言え… 本当に画像の存在を伝えなくていいの? 28
  29. 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. 30. 30https://www.w3.org/WAI/tutorials/images/complex/ をGoogle翻訳で翻訳 同一ページ 同じページ内で重複する内容の テキストがあれば空(””)で良い?
  31. 31. 「そこに画像(グラフ)がある」ってことを 伝えることは意味があるのでは? 31
  32. 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. 33. 33https://www.w3.org/WAI/tutorials/images/decorative/ より
  34. 34. 34https://www.w3.org/WAI/tutorials/images/decorative/ をGoogle翻訳で翻訳
  35. 35. 隣接するテキストは、画像が伝えている情報を 本当に全て伝えているの? 35
  36. 36. 36 この写真の犬がさぁ 写真?何のこと? 見えていない人見えている人
  37. 37. 37 見えていない人見えている人 この写真の犬がさぁ 茶色い犬が 寝てる写真のことね
  38. 38. そこで折衷案。 38
  39. 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. さらにマシンリーダブルに。 40
  41. 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. 42. 42https://www.w3.org/WAI/tutorials/images/complex/ をGoogle翻訳で翻訳 同一ページ
  43. 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. 44. 44https://www.w3.org/WAI/tutorials/images/complex/ をGoogle翻訳で翻訳 別ページ
  45. 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. 文脈によって変わる代替テキスト 46
  47. 47. 47 • alt属性は必須(例外を除く) • 値は空では×(例外を除く) • 値は画像を適切に代替する • 値の適切さは、画像が表現しているものや文脈によって異なる • 画像の情報と等価であること(補足説明でもキャプションでもない) • 本文にあることを2回繰り返さない https://momdo.github.io/html/embedded-content.html#attr-img-alt より alt属性の基本
  48. 48. 48
  49. 49. 49 建築写真 報道写真 同じ写真でも使い道はさまざま 写真講座 旅行記事 ボタンのサムネイル 風景写真 百科事典
  50. 50. 50 風景写真なら? alt=“写真:鷲羽山から見下ろす瀬戸大橋と多島美"
  51. 51. 51 建築写真なら? alt=“写真:(左から)北備讃瀬戸大橋/与島橋/岩黒島橋/ 櫃石島橋/下津井瀬戸大橋"
  52. 52. 52 報道記事なら? alt=“写真:鷲羽山にも広がる松食い虫被害"
  53. 53. 同じ写真でも、代替テキストは 用途や文脈によってさまざま。 53
  54. 54. 適切な代替テキストとは 54
  55. 55. • 画像の内容を視覚的に把握できて、
 かつ代替テキストの内容と比較できる人
 (原稿作成者と実装する制作担当者) • 画像を見るだけ/代替テキストを読むだけ • 比較できない • 適切かどうかという視点がない 55 適切かどうか判断できる人 それ以外の人 間違っていても気がつくことができない
  56. 56. 画像が伝えている内容 = 代替テキスト 56 とは限らないので注意! 画像を含んだコンテンツが伝えている内容 代替テキスト含んだコンテンツが伝えている内容= 適切な代替テキスト
  57. 57. 視覚から得られる情報 57 得られる情報を限りなく近づけたい ≒ 聴覚から得られる情報
  58. 58. 視覚から得られる情報 58 得られる情報を限りなく近づけたい ≒ Googlebotくんが得る情報
  59. 59. 59 生活向上委員会 主査:財政担当執行役 委員:調理場責任者(CBOなど) 推進テーマ1 WG 運営委員会 生活向上委員会体制図 推進テーマ2 WG 推進テーマ3 WG 生活向上委員会体制図: 生活向上委員会は、財政担当執行役が主査を務め、CBOなど 調理場責任者による委員からなる運営委員会、推進テーマごと に設置するワーキンググループで構成されます。
  60. 60. 電話の相手に画像を含んだページを 読み聞かせるつもりで考えるのがコツ。 60
  61. 61. 次回は1月15日(火)の予定です! 61
  62. 62. 62 @SawadaStdDesign また来週!

×