代替テキストの基本から応用まで
Nov. 6, 2018•0 likes•5,256 views
Download to read offline
Report
Internet
2018/11/05（月）に岡山大インキュベータにて行われた「リーダブルな夜 on 2018/11/05」でのスライドです。【決定ツリーのPDF版は以下】 代替テキスト決定ツリー：http://bit.ly/readable_ALT
Nozomi SawadaFollow
More Related Content
What's hot
エンジニアから都庁へ～中の人が語る街のDX、都庁のDX～Norisuke Hirai
「のどが渇いた」というユーザーに何を出す？ ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチYoshiki Hayama
アクセシビリティvsセキュリティ ～こんな対策はいらない！～ Yoshinori OHTA
マッチングサービスにおけるKPIの話cyberagent
アジャイル開発とメトリクスRakuten Group, Inc.
なぜ企業はWebアクセシビリティに取り組むのか？Web Accessibility Infrastructure Committee (WAIC)
More from Nozomi Sawada
中小企業のWebサイトでも気にしておきたいアクセシビリティNozomi Sawada
「誰」が「何」をする？みんなで考えてみよう！Nozomi Sawada
UDトークで会話をアクセシブルにしてみようNozomi Sawada
色にまつわるエトセトラ（いろいろ）Nozomi Sawada
岡山をリーダブルな世界にNozomi Sawada
こんなとき実感！代替テキストと字幕の大切さNozomi Sawada
代替テキストの基本から応用まで
- 2. 自己紹介 2
- 4. 4 岡山で独立（2014～） Webアクセシビリティ検証／ イラスト制作／ 岡山情報ビジネス学院 非常勤講師 などなど キヤノン （～2013） サイトデザイン監修／ Webアクセシビリティ対応 WAIC （2011～） （ウェブアクセシビリティ基盤委員会） コラムを担当
- 5. 本日の目標 5
- 7. 代替テキストとは 7
- 9. 9 これです
- 11. ×11 だいがえ 「代替」
- 12. ○ 12 「代替」 だいたい
- 13. ×13 「alt」 アルト
- 14. ○ 14 「alt」 オルト
- 16. ○ 16 alt属性 <img src=“hoge” alt=“ほげ”>
- 20. alt属性の基本 20 • alt属性は必須（例外を除く） • 値は空では×（例外を除く） • 値は画像を適切に代替する • 値の適切さは、画像が表現しているものや文脈によって異なる • 画像の情報と等価であること（補足説明でもキャプションでもない） • 本文にあることを2回繰り返さない https://momdo.github.io/html/embedded-content.html#attr-img-alt より
- 21. 21 • alt属性は必須（例外を除く）→ 無いとどう聞こえる？ • 値は空では×（例外を除く）→ 空だとどう聞こえる？ • 値は画像を適切に代替する • 値の適切さは、画像が表現しているものや文脈によって異なる • 画像の情報と等価であること（補足説明でもキャプションでもない） • 本文にあることを2回繰り返さない → 繰り返すとどう聞こえる？ alt属性の基本
- 24. 代替テキストを書く手順とは 24
- 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 = “” ？
- 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 要素で説明
- 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属性の基本
- 48. 48
- 54. 適切な代替テキストとは 54
- 55. • 画像の内容を視覚的に把握できて、 かつ代替テキストの内容と比較できる人 （原稿作成者と実装する制作担当者） • 画像を見るだけ／代替テキストを読むだけ • 比較できない • 適切かどうかという視点がない 55 適切かどうか判断できる人 それ以外の人 間違っていても気がつくことができない
- 59. 59 生活向上委員会 主査：財政担当執行役 委員：調理場責任者（CBOなど） 推進テーマ1 WG 運営委員会 生活向上委員会体制図 推進テーマ2 WG 推進テーマ3 WG 生活向上委員会体制図： 生活向上委員会は、財政担当執行役が主査を務め、CBOなど 調理場責任者による委員からなる運営委員会、推進テーマごと に設置するワーキンググループで構成されます。