noteアクセシビリティ勉強会 〜画像編〜

Transcript

1. noteアクセシビリティ勉強会
 〜画像編〜
 🥳クイズと事例で考えよう🥳
 伊原 力也
 2022.06.30

2. 伊原 力也
 2
 • freee株式会社 デザイナー
 • note, Ubie, STUDIO, 東京都新型コロナ対策サイトの
 アクセシビリティお手伝い
 • HCD-Net 評議委員 / 認定人間中心設計専門家
 • ウェブアクセシビリティ基盤委員会 WG1委員

3. 3
 伊原 力也: 本

4. 前置き

5. 絵っぽいものの置き方、いろいろ
 • img要素：今日はこの話をします
 • svg要素
 • アイコンフォント
 • CSSのbackground-image

6. 本日の流れ
 • 画像をアクセシブルにするクイズ
 ◦ 入門編
 ◦ 基礎編
 ◦ note編
 • はじめから画像をアクセシブルにするために

7. 画像をアクセシブルにするクイズ
 入門編

8. 問1. このページ上から画像が消滅したらどうなる？
 某有名ECサイトのトップページ。 
 画像化文字のサムネイルが、カルーセルのかたちで 
 大量に並んでいる。 

9. 答1. このページ上から画像が消滅したらどうなる？
 某有名ECサイトのトップページ。 
 画像をオフにして代替テキストに置き換えたが、 
 ほとんど真っ白になった。 

10. 問2. 画像が使えないときって？
 • 思いつく限り挙げてみましょう

11. 答2. 画像が使えないときって？
 • スクリーンリーダーで画面を読み上げているとき
 • 回線の問題で画像が読み込めなかったとき
 • ブラウザ側で画像読み込みをオフにしているとき
 • 検索エンジンのクローラーが見に来たとき
 • テキストブラウザを使っているとき

12. 問3. 機械は、ページ上の画像の意図がわかる？
 1. わかる
 2. ちょっとわかる
 3. わからない

13. 答3. 機械は、ページ上の画像の意図がわかる？
 1. ✕ わかる
 2. △ ちょっとわかる：「画像自体が何か」は多少解析できる（場合もある）
 3. ◯ わからない：「この文脈でその画像がある意図」はわからない
 ゆえに、提供側の「意図」を
 テキストで伝える必要がある！

14. 問4.「代替」はなんて読む？
 1. だいがえ
 2. たいしゃく
 3. だいたい

15. 答4.「代替」はなんて読む？
 1. △ だいがえ：重箱読みと言うらしい。間違いではないらしい
 2. ✕ たいしゃく
 3. ◯ だいたい

16. 問5. 代替テキストの説明として正しいのは？
 1. 画像の補足
 2. 画像の説明
 3. 画像の代わり

17. 答5. 代替テキストの説明として正しいのは？
 1. ✕ 画像の補足
 2. ✕ 画像の説明
 3. ◯ 画像の代わり：画像が使えないときの「代わり」になるもの
 画像を表示 画像が非表示 画像非表示＋翻訳
18. 画像をアクセシブルにするクイズ
 基礎編

19. 問6.「alt」はなんて読む？
 1. アルト
 2. オルト
 3. エーエルティー

20. 答6.「alt」はなんて読む？
 1. ✕ アルト
 2. ◯ オルト：alternative（オルタナティブ）の略
 3. ✕ エーエルティー

21. 問7. この中で正しいのは？
 1. alt要素
 2. altタグ
 3. alt属性

22. 答7. この中で正しいのは？
 1. ✕ alt要素
 2. ✕ altタグ
 3. ◯ alt属性：<img src="cat.png" alt="猫の写真"> →「img要素のalt属性」

24. 問8. スクリーンリーダーはどう読み上げる？
 • <img src="cat.png">

25. 答8. スクリーンリーダーはどう読み上げる？
 • <img src="cat.png">
 ◦ 読み上げ例：「cat.png イメージ」「ラベルのない画像」
 ◦ ファイル名を読んでしまったり、意図が伝わらなかったりする
 ◦ alt属性の指定は原則必須！

26. 問9. スクリーンリーダーはどう読み上げる？
 • <img src="cat.png" alt="猫の写真">

27. 答9. スクリーンリーダーはどう読み上げる？
 • <img src="cat.png" alt="猫の写真">
 ◦ 読み上げ例：「猫の写真 イメージ」
 ◦ alt属性によって意図が伝わった！

28. 問10. スクリーンリーダーはどう読み上げる？
 • <img src="cat.png" alt="">

29. 答10. スクリーンリーダーはどう読み上げる？
 • <img src="cat.png" alt="">
 ◦ まったく何も読まない。そこに画像があることも伝えない
 ◦ その画像が単なる装飾であり、読み飛ばしたいときは alt="" にする

30. どうぶつ写真ギャラリー

31. 問11. スクリーンリーダーはどう読み上げる？
 • <a href="cat/"><img src="cat.png"></a>

32. 答11. スクリーンリーダーはどう読み上げる？
 • <a href="cat/"><img src="cat.png"></a>
 ◦ 読み上げ例：
 「cat.png、リンク、イメージ」「ラベルのない画像、リンク」
 ◦ 代替テキストがないので、それ以外の情報を伝えざるを得ない
 ◦ なんのリンクかわからないのでalt属性は必須

33. 問12. スクリーンリーダーはどう読み上げる？
 • <a href="cat/"><img src="cat.png" alt=""></a>

34. 答12. スクリーンリーダーはどう読み上げる？
 • <a href="cat/"><img src="cat.png" alt=""></a>
 ◦ 読み上げ例：「リンク、イメージ」「リンク、cat/」
 ◦ altが空なので、何のリンクなのかはわからない
 ◦ すごくよく見かける。これもやらないように注意

35. 問13. スクリーンリーダーはどう読み上げる？
 • <a href="cat/"><img src="cat.png" alt="猫の写真ギャラリー"></a>

36. 答13. スクリーンリーダーはどう読み上げる？
 • <a href="cat/"><img src="cat.png" alt="猫の写真ギャラリー"></a>
 ◦ 読み上げ例：「猫の写真ギャラリー、イメージ、リンク」
 ◦ alt属性によって、リンク先が何なのかの意図が伝わった！

37. 猫の写真ギャラリー
38. 問14. スクリーンリーダーはどう読み上げる？
 • <a href="cat/"><img src="cat.png" alt="">猫の写真ギャラリー</a>

39. 答14. スクリーンリーダーはどう読み上げる？
 • <a href="cat/"><img src="cat.png" alt="">猫の写真ギャラリー</a>
 ◦ 読み上げ例：「猫の写真ギャラリー、リンク」
 ◦ 画像は読み飛ばされつつ、テキストが読まれた
 ◦ これならまったく問題なく意図が伝わっている

40. CMです
 https://note.swn.jp/n/n792ff17f211a
41. 画像をアクセシブルにするクイズ
 note編

42. レベル1

43. 問15. 次の状況における代替テキストを考えよ
 • ヒント：意味を伝えている？

44. 答15. 次の状況における代替テキストを考えよ
 alt=""
 • alt=""
 ◦ 下にテキストがあり、
 この画像は装飾であると
 みなせるため

45. 問16. 次の状況における代替テキストを考えよ
 • ヒント：意味を伝えている？

46. 答16. 次の状況における代替テキストを考えよ
 • alt=""
 ◦ 隣にテキストがあり、この画像は装飾であるとみなせるため
 alt=""

47. 問17. 次の状況における代替テキストを考えよ
 • ヒント：意味を伝えている？

48. 答17. 次の状況における代替テキストを考えよ
 alt=""
 • alt=""
 ◦ 隣にテキストがあり、この画像は装飾であるとみなせるため

49. 答17. 現在の状態
 alt="定期購読マガジ ンの申し込み"
 • alt="定期購読マガジンの申し込み"
 ◦ 隣のテキストと重複してしまっている

50. 問18. 次の状況における代替テキストを考えよ
 • ヒント：意味を伝えている？

51. 答18. 次の状況における代替テキストを考えよ
 • alt=""
 ◦ 後続のテキストでアカウントを特定できているため
 alt=""

52. 答18. 別の考え方
 • alt="magiのプロフィール画像"
 ◦ 多少冗長ではあるが、ミスとまでは言えない
 alt="magiのプロフィー ル画像"

53. レベル2

54. 問19. 次の状況における代替テキストを考えよ
 • 記事サムネイルと記事見出しはセット、
 プロフィール画像とクリエイター名はセットでリンクになっている
 ※本当はもう少し複雑な実装だがここでは簡略化 

55. 答19. 次の状況における代替テキストを考えよ
 • どちらもテキストとセットなので、alt=""でよい
 alt=""
 alt=""

56. 問20. 次の状況における代替テキストを考えよ
 • プロフィール画像とクリエイター名には個別にリンクが張られている

57. 答20. 次の状況における代替テキストを考えよ
 • 現状では alt="かっくん / iOS Developer"
 • 後続のクリエイター名と重複だが、alt=""だとラベルなしリンクになるため
 alt="かっくん / iOS Developer"

58. 答20. 別の考え方
 • プロフィール画像とクリエイター名を
 丸ごとリンクにできるなら、画像はalt=""でよい。こちらが望ましい
 alt=""

59. 問21. 次の状況における代替テキストを考えよ
 • マガジンサムネイルと見出しはセット、
 プロフィール画像とクリエイター名はセットでリンクになっている
 ※本当はもう少し複雑な実装だがここでは簡略化 

60. 答21. 次の状況における代替テキストを考えよ
 • どちらもテキストとセットなので、alt=""でよい
 alt=""
 alt=""

61. 答21. 現在の状態
 • サムネイル側に「マガジンのカバー画像」というaltがついている
 ◦ ミスではないが、このコンポーネントは複数並ぶので、冗長そう
 alt="マガジンのカ バー画像"
 alt=""

62. レベル3

63. 問22. 次の状況における代替テキストを考えよ
 • マガジンサムネイルと見出しはセット、
 複数のプロフィール画像をまとめてボタン化（押すとダイアログが出る）
 ※本当はもう少し複雑な実装だがここでは簡略化 

64. 答22. 次の状況における代替テキストを考えよ
 • サムネイル部分は問21と同じ
 • プロフィール部分はまるごと押せるのでaltによるラベルが必要
 alt=""
 alt="クリエイター名" × 3 

65. 答22. 別の考え方
 • 「視覚的な情報量と一致させる」と考えると、もう少し抽象的でもいい
 alt=""
 1つめ: alt="3人の運営者" 
 2つめ以降: alt=""

66. 答22. 現在の状態
 • サムネイル部分は問21と同じ
 • プロフィール画像はすべてalt=""なので「ボタン」としか読み上げない
 すべて alt=""
 alt="マガジンのカ バー画像"

67. avatarが複数並ぶパターンは対処が必要そう
 画像はすべて alt="" 、テキストは「+71」なので 
 「+71 ボタン」と読まれてしまう 

68. avatarが複数並ぶパターンは対処が必要そう
 これはテキストだけで 
 単独のリンク。
 左のavatar群と
 合体していいのでは？ 
 imgごとにクリエイター名が 
 入っていて
 「(クリエイター名×4）ボタン」 
 と読まれる

69. レベル4

70. 問23. 次の状況における代替テキストを考えよ
 • スキすると出るバルーン。プロフィール画像は必ず出る。
 内容は「テキストだけ、画像だけ、テキスト＋画像」の3パターンがある
 テキストだけ 画像だけ テキスト＋画像
71. 答23. 次の状況における代替テキストを考えよ
 • プロフィール画像には「(クリエイター名)より」みたいに入れるとよさそう
 • 内容の画像には、クリエイターがaltを設定できる必要がありそう
 alt="（クリエイターが設定し た任意のテキスト）" 
 alt="仙田 真郷より" 
 これがないと、仙田さん自身が
 「ウヌはいいやつじゃな」と
 言っていることになる
72. レベル5

73. 問24. 次の状況における代替テキストを考えよ
 • 画像投稿で、画像ファイルをアップロードしたときのプレビュー画像

74. 答24. 次の状況における代替テキストを考えよ
 alt="アップロード
 された画像"
 画像の説明欄に加えて 
 alt設定欄も必要
 • アップされた画像の存在を知覚できる必要があるので
 「アップロードされた画像」と固定値で設定する
 • 読者にこの画像の意図を伝えるために、alt設定欄が必要

75. はじめから画像を
 アクセシブルにするために

76. 問25: note-frontのimgでalt属性なし箇所の数は？
 • ヒント：いっぱい

77. 答25: note-frontのimgでalt属性なし箇所の数は？
 • vueファイルで言うと150ファイル
 ◦ <nt-image>と<avatar>にalt属性の指定がなかったケース
 ◦ lintで発見後、対応を考えていったスプレッドシート
 （※内部向けのためリンクなし）
 ◦ 今日のお題はだいたいここから出ています

78. 自動チェッカー
 • axe DevTools
 ◦ Chrome拡張。アクセシビリティチェッカーの定番
 ◦ 画像に関してはalt属性が「あるか・ないか」がチェックできる
 • vuejs-accessibility/alt-text
 ◦ いわゆるlint。
 ◦ 画像に関してはalt属性が「あるか・ないか」がチェックできる
 ◦ このセッション後、note-frontでこの項目がオンになります
 • 要注意！
 ◦ img要素にalt属性が存在すれば、内容が不適切でも通っちゃう
 ◦ これはチェッカでは防げず、内容が適切かは人間しか判断できない
 ▪ alt=""でいい場合も多いが、alt=""は「存在を消す」ので慎重に！

79. 実装されたものを確認する方法
 • Web Developer
 ◦ 画面上にalt表示したり、画像とaltを入れ替えたりできる
 • Chrome DevToolsのAccessibility Tree
 ◦ 選択部分がスクリーンリーダーにどう伝わるかがわかる

80. 代替テキストはデザイナーが考えよう
 • 「画像を置いている意図」はデザイナーが考えている
 • なので「画像が出ないときにどう読まれるべきか」はデザイナーの検討領域
 • 画像を用いたデザインをするときは、
 実装を担当するエンジニアに対して
 「代替テキストの指示」を行おう

81. https://www.figma.com/community/file/953682768192596304
82. 内容を判断のためのガイド
 • An alt Decision Tree
 ◦ 和訳
 ◦ チートシート

83. HTML Living Standardより
 The most general rule to consider when writing alternative text is the following: the intent is that replacing every image with the text of its alt attribute does not change the meaning of the page. 
 代替テキストを記述する際に考慮すべき最も一般的なルールは以下の通りです。 意図するところは、 すべての画像をそのalt属性のテキストで置き換えても、ページの意味が変わらないということです。 
 So, in general, alternative text can be written by considering what one would have written had one not been able to include the image. 
 ですから、一般的に代替テキストは、画像を入れることができなかったら何を書いたかを考えることで 書くことができます。
 4.8.4.4 Requirements for providing text to act as an alternative for images
84. 迷ったときは #pjt-accessibility で相談!
 • note＝アクセシビリティのイメージが少しずつできつつある
 • これからnoteが世に出すものはアクセシブルであることが期待されている
 • なにより「アクセシビリティを必要とするクリエイター」が存在し、
 その人たちがnoteの動きに期待している
 • 「だれもが創作をはじめ、続けられるようにする。」を、
 みんなで実現していきましょう！