Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Rikiya Ihara / magi

June 30, 2022
Tweet

More Decks by Rikiya Ihara / magi

Other Decks in Technology

Transcript

  1. 伊原 力也
 2
 • freee株式会社 デザイナー
 • note, Ubie, STUDIO,

    東京都新型コロナ対策サイトの
 アクセシビリティお手伝い
 • HCD-Net 評議委員 / 認定人間中心設計専門家
 • ウェブアクセシビリティ基盤委員会 WG1委員

  2. 答3. 機械は、ページ上の画像の意図がわかる?
 1. ✕ わかる
 2. △ ちょっとわかる:「画像自体が何か」は多少解析できる(場合もある)
 3. ◯

    わからない:「この文脈でその画像がある意図」はわからない
 ゆえに、提供側の「意図」を
 テキストで伝える必要がある!

  3. 答5. 代替テキストの説明として正しいのは?
 1. ✕ 画像の補足
 2. ✕ 画像の説明
 3. ◯

    画像の代わり:画像が使えないときの「代わり」になるもの
 画像を表示 画像が非表示 画像非表示+翻訳
  4. 答7. この中で正しいのは?
 1. ✕ alt要素
 2. ✕ altタグ
 3. ◯

    alt属性:<img src="cat.png" alt="猫の写真"> →「img要素のalt属性」

  5. 答11. スクリーンリーダーはどう読み上げる?
 • <a href="cat/"><img src="cat.png"></a>
 ◦ 読み上げ例:
 「cat.png、リンク、イメージ」「ラベルのない画像、リンク」
 ◦

    代替テキストがないので、それ以外の情報を伝えざるを得ない
 ◦ なんのリンクかわからないのでalt属性は必須

  6. 答12. スクリーンリーダーはどう読み上げる?
 • <a href="cat/"><img src="cat.png" alt=""></a>
 ◦ 読み上げ例:「リンク、イメージ」「リンク、cat/」
 ◦

    altが空なので、何のリンクなのかはわからない
 ◦ すごくよく見かける。これもやらないように注意

  7. 自動チェッカー
 • axe DevTools
 ◦ Chrome拡張。アクセシビリティチェッカーの定番
 ◦ 画像に関してはalt属性が「あるか・ないか」がチェックできる
 • vuejs-accessibility/alt-text


    ◦ いわゆるlint。
 ◦ 画像に関してはalt属性が「あるか・ないか」がチェックできる
 ◦ このセッション後、note-frontでこの項目がオンになります
 • 要注意!
 ◦ img要素にalt属性が存在すれば、内容が不適切でも通っちゃう
 ◦ これはチェッカでは防げず、内容が適切かは人間しか判断できない
 ▪ alt=""でいい場合も多いが、alt=""は「存在を消す」ので慎重に!

  8. 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