零弐壱蜂

[アクセシビリティ] 画像に代替テキスト（alt）を追加するときの観点

7 min read

概要

Web Content Accessibility Guidelines (WCAG) 2.1の達成基準に「1.1.1 非テキストコンテンツ」という項目がある。

利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。

装飾ではない画像やアイコンは、代替テキスト（alt 属性）で説明する必要がある。

代替テキストの主な利用目的は以下の通り。

  • 検索 bot やスクリーンリーダーを利用しているユーザーにも等しくコンテンツを提供する
  • ネットワークエラー時など、画像を表示できない場合にその画像の意図する内容を説明する

装飾目的の画像やアイコンには代替テキストは不要で、適宜 WAI-ARIA の aria-label 属性を設定する。

img 要素の alt 属性の入れ方

下記のような文章を意識して alt 属性を入れる。

  1. 電話で画像を説明して伝わる
  2. 画像が表示されなくても分かる
  3. スクリーンリーダーで読み上げて何の画像か伝わる

画像を見て分かる範囲だけではなく画像を見たときに想像できる情報も書くべき。

alt に入れるテキストのルール

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

alt 決定木（An alt Decision Tree）

  1. 画像は文字を含んでいるか
    1. 文字を含む画像のすぐそばに本当のテキストもある
      → alt 属性は空にする
    2. 画像は純粋に視覚的な装飾目的である
      → alt 属性は空にする
    3. 画像には固有の機能がある（例：アイコン）。
      → alt 属性にはその画像の機能を伝える言葉を入れる
    4. 画像は他の何も表わさない文字そのものである
      → 画像に書いてある文字をそのまま alt 属性に入れる
  2. 画像はリンクやボタンか
    → alt 属性にはリンクの飛び先ページの情報、またはボタンを押したときに何が起きるか（「リセット」「送信する」など）を入れる
  3. 画像はページや書いてある文脈に意味を与えているか
    1. アイキャッチ目的の画像である
      → 画像の意味を伝える簡単な説明
      → alt 属性は空にする
    2. グラフや複雑な情報を表している
      → alt 属性には画像が表す情報を集約して入れる
    3. その画像を表すテキストが近くに書いてあり、alt に書くと過剰な場合
      → alt 属性は空にする
  4. 画像は純粋に装飾が目的か
    → alt 属性は空にする

参考：An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C

実装

alt 属性

<img src="google.png" alt="Google" width="150" height="100" />
  • alt 属性がないと画像ファイル名が表示、読み上げられてしまう
  • 代替テキストが不要な装飾的画像は空の alt 属性（値なし）を設定する

アイコン

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

<span class="c-icon--cart" aria-label="カートを見る"></span>

アイコンにラベルが添えられている場合に aria-label 属性を設定すると、スクリーンリーダーに二重で読み上げられてしまうことがあるため、次のようにaria-hidden 属性を設定する。

<button type="button">
  <span class="c-icon--cart" aria-hidden="true"></span>
  カートを見る
</button>

テキストを視覚的には表示せず、スクリーンリーダー用のテキストとして用意したい場合は、CSS でテキストを隠す。

<button type="button">
  <span class="c-icon--cart" aria-hidden="true"></span>
  <span class="sr-only">カートを見る</span>
</button>

<style>
  .sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
  }
</style>

単純にdisplay: noneやvisibility: hiddenだと認識されないため、こういったハックが利用される。

背景画像

<!-- 悪い例 -->
<div style="background-image: url(google.png)"></div>
  • 印刷時やハイコントラストモードに背景画像は表示されないことがある（ブラウザの初期設定では背景画像は印刷しない）

imgもしくは WAI-ARIA の aria-label 属性、role 属性を設定した要素を使う。

<img src="google.png" alt="Google" width="150" height="100" />

<!-- OR -->

<div
  style="background-image: url(google.png)"
  aria-label="Google"
  role="img"
></div>

参考リンク

Edit on GitHub