アクセシビリティを意識して、 画像の代替テキスト（alt）を 決めるときの観点

Transcript

1. 2023年6月29日 社内LT資料
   ZOZOTOWN WEB部 フロントエンド1　菊地 宏之
   アクセシビリティを意識して、
   画像の代替テキスト（alt）を
   決めるときの観点
   

   View Slide

2. Web Content Accessibility Guidelines (WCAG) 2.1 の達成基準に「1.1.1 非テキストコンテン
   ツ」という項目がある。
   > 利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代
   替が提供されている。
   概要
   

   View Slide

3. 装飾ではない画像やアイコンは、代替テキスト（alt 属性）で説明する必要がある。
   代替テキストの主な利用目的は以下の通り。
   ● 検索 bot やスクリーンリーダーを利用しているユーザーにも等しくコンテンツを提供する
   ● ネットワークエラー時など、画像を表示できない場合にその画像の意図する内容を説明する
   装飾目的の画像やアイコンには代替テキストは不要で、適宜 WAI-ARIA の aria-label 属性を設定
   する。
   概要
   

   View Slide

4. 下記のような観点で文章を意識して alt 属性を入れると良い。
   1. 電話で画像を説明して伝わる
   2. 画像が表示されなくても分かる
   3. スクリーンリーダーで読み上げて何の画像か伝わる
   画像を見て分かる範囲だけではなく画像を見たときに想像できる情報も書くべき。
   img 要素の alt 属性の入れ方
   

   View Slide

5. ● 画像には必ず alt 属性を付ける
   ○ 画像に意味がない場合は alt=""（値なし）で良い
   ○ alt 属性を省略するとファイル名が表示されたり、スクリーンリーダーがファイル名を読み上
   げてしまう場合がある
   ● テキストが表示されても違和感のない文字を入れる
   ● リンクの場合は alt 属性にはリンク先を示す内容にする
   ● 「イメージ画像」や「画像のすぐ側にキャプションがある」場合は、alt=""（値なし）で良い
   ● 画像がグラフや図表の場合、その要約を記述する
   ● すぐ側に説明がある場合は何のグラフ/図表なのかが示されていれば良い
   ● 画像がロゴや文字画像の場合、同等の文字列を alt 属性に入れる
   alt に入れるテキストのルール
   

   View Slide

6. 1. 画像は文字を含んでいるか
   1.1. 文字を含む画像のすぐそばに本当のテキストもある
   → alt 属性は空にする
   1.2. 画像は純粋に視覚的な装飾目的である
   → alt 属性は空にする
   1.3. 画像には固有の機能がある（例：アイコン）。
   → alt 属性にはその画像の機能を伝える言葉を入れる
   1.4. 画像は他の何も表わさない文字そのものである
   → 画像に書いてある文字をそのまま alt 属性に入れる
   alt 決定木（An alt Decision Tree）
   

   View Slide

7. 2. 画像はリンクやボタンか
   → alt 属性にはリンクの飛び先ページの情報、またはボタンを押したときに何が起きるか
   （「リセット」「送信する」など）を入れる
   alt 決定木（An alt Decision Tree）
   

   View Slide

8. 3. 画像はページや書いてある文脈に意味を与えているか
   3.1. アイキャッチ目的の画像である
   → 画像の意味を伝える簡単な説明
   → alt 属性は空にする
   3.2. グラフや複雑な情報を表している
   → alt 属性には画像が表す情報を集約して入れる
   3.3. その画像を表すテキストが近くに書いてあり、alt に書くと過剰な場合
   → alt 属性は空にする
   alt 決定木（An alt Decision Tree）
   

   View Slide

9. 4. 画像は純粋に装飾が目的か
   → alt 属性は空にする
   alt 決定木（An alt Decision Tree）
   

   View Slide

10. 参考：An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C
    alt 決定木（An alt Decision Tree）
    

    View Slide

11. ● alt 属性がないと画像ファイル名が表示、読み上げられてしまう
    ● 代替テキストが不要な装飾的画像は空の alt 属性（値なし）を設定する
    実装 - alt 属性
    

    View Slide

12. ラベルのないアイコンには WAI-ARIA の aria-label 属性を設定する。
    実装 - アイコン
    

    View Slide

13. 実装 - アイコン
    アイコンを疑似要素で構築している（contentがある）場合、スクリーンリーダーに二重で読み上
    げられてしまうことがあるため、次のようにaria-hidden 属性を設定する。
    

    View Slide

14. 実装 - アイコン
    テキストを視覚的には表示せず、スクリーンリーダー用のテキストとして用意したい場合は、CSS
    でテキストを隠す。
    ※ 単純に display: none や visibility: hidden だと認識がされなくなってしまうため、sr-only のようなハックスタ
    イルが利用される。
    

    View Slide

15. 実装 - アイコン
    

    View Slide

16. 実装 - 背景画像
    印刷時やハイコントラストモードに背景画像は表示されないことがある（ブラウザの初期設定では
    背景画像は印刷しない）。
    

    View Slide

17. 実装 - 背景画像
    img もしくは WAI-ARIA の aria-label 属性、role 属性を設定した要素を使う。
    

    View Slide

18. alt 属性に入れるテキストは、画像から読み取れる情報とほぼ等価にするのが理想。
    迷ったときは、alt 決定木を参考にテキストを入れると良い。
    おわり
    

    View Slide