Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

2 992 vues

Publié le

2018/11/05(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2018/11/05」でのスライドです。【決定ツリーのPDF版は以下】
代替テキスト決定ツリー:http://bit.ly/readable_ALT

Publié dans : Internet
  • Login to see the comments

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

  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 また来週!

×