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

by Rikiya Ihara / magi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3  伊原力也: 本 

Slide 4

Slide 4 text

前置き 

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

答5. 代替テキストの説明として正しいのは？  1. ✕ 画像の補足  2. ✕ 画像の説明  3. ◯ 画像の代わり：画像が使えないときの「代わり」になるもの  画像を表示画像が非表示画像非表示＋翻訳

Slide 18

Slide 18 text

画像をアクセシブルにするクイズ  基礎編 

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

答7. この中で正しいのは？  1. ✕ alt要素  2. ✕ altタグ  3. ◯ alt属性：猫の写真

→「img要素のalt属性」 

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

問8. スクリーンリーダーはどう読み上げる？  ●

Slide 25

Slide 25 text

答8. スクリーンリーダーはどう読み上げる？  ●

  ○ 読み上げ例：「cat.png イメージ」「ラベルのない画像」  ○ ファイル名を読んでしまったり、意図が伝わらなかったりする  ○ alt属性の指定は原則必須！ 

Slide 26

Slide 26 text

問9. スクリーンリーダーはどう読み上げる？  ● 猫の写真

Slide 27

Slide 27 text

答9. スクリーンリーダーはどう読み上げる？  ●

  ○ 読み上げ例：「猫の写真イメージ」  ○ alt属性によって意図が伝わった！ 

Slide 28

Slide 28 text

問10. スクリーンリーダーはどう読み上げる？  ●

Slide 29

Slide 29 text

答10. スクリーンリーダーはどう読み上げる？  ●

  ○ まったく何も読まない。そこに画像があることも伝えない  ○ その画像が単なる装飾であり、読み飛ばしたいときは alt="" にする 

Slide 30

Slide 30 text

どうぶつ写真ギャラリー 

Slide 31

Slide 31 text

問11. スクリーンリーダーはどう読み上げる？  ●

Slide 32

Slide 32 text

答11. スクリーンリーダーはどう読み上げる？  ●

  ○ 読み上げ例：  「cat.png、リンク、イメージ」「ラベルのない画像、リンク」  ○ 代替テキストがないので、それ以外の情報を伝えざるを得ない  ○ なんのリンクかわからないのでalt属性は必須 

Slide 33

Slide 33 text

問12. スクリーンリーダーはどう読み上げる？  ●

Slide 34

Slide 34 text

答12. スクリーンリーダーはどう読み上げる？  ●

  ○ 読み上げ例：「リンク、イメージ」「リンク、cat/」  ○ altが空なので、何のリンクなのかはわからない  ○ すごくよく見かける。これもやらないように注意 

Slide 35

Slide 35 text

問13. スクリーンリーダーはどう読み上げる？  ●

Slide 36

Slide 36 text

答13. スクリーンリーダーはどう読み上げる？  ●

  ○ 読み上げ例：「猫の写真ギャラリー、イメージ、リンク」  ○ alt属性によって、リンク先が何なのかの意図が伝わった！ 

Slide 37

Slide 37 text

猫の写真ギャラリー

Slide 38

Slide 38 text

問14. スクリーンリーダーはどう読み上げる？  ●

猫の写真ギャラリー 

Slide 39

Slide 39 text

答14. スクリーンリーダーはどう読み上げる？  ●

猫の写真ギャラリー  ○ 読み上げ例：「猫の写真ギャラリー、リンク」  ○ 画像は読み飛ばされつつ、テキストが読まれた  ○ これならまったく問題なく意図が伝わっている 

Slide 40

Slide 40 text

CMです  https://note.swn.jp/n/n792ff17f211a

Slide 41

Slide 41 text

画像をアクセシブルにするクイズ  note編 

Slide 42

Slide 42 text

レベル1 

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

レベル2 

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

レベル3 

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

レベル4 

Slide 70

Slide 70 text

問23. 次の状況における代替テキストを考えよ  ● スキすると出るバルーン。プロフィール画像は必ず出る。  内容は「テキストだけ、画像だけ、テキスト＋画像」の3パターンがある  テキストだけ画像だけテキスト＋画像

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

レベル5 

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

https://www.figma.com/community/file/953682768192596304

Slide 82

Slide 82 text

内容を判断のためのガイド  ● An alt Decision Tree  ○ 和訳  ○ チートシート 

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

迷ったときは #pjt-accessibility で相談!  ● note＝アクセシビリティのイメージが少しずつできつつある  ● これからnoteが世に出すものはアクセシブルであることが期待されている  ● なにより「アクセシビリティを必要とするクリエイター」が存在し、  その人たちがnoteの動きに期待している  ● 「だれもが創作をはじめ、続けられるようにする。」を、  みんなで実現していきましょう！ 