Accessibility
Guidelines

1.1.1 画像に代替テキストを提供する

装飾ではない画像やアイコンは、代替テキストで説明する。

代替テキストとは 代替テキストとは、Webサイト内に含まれている画像や動画が何らかの原因で表示されなかったときや、スクリーンリーダーを使用するときに、画像の代わりに表示する文字・文章を指す。

代替テキストを提供する主な目的は、

  • スクリーンリーダーなどの支援技術を用いているユーザーにも、等しくコンテンツを提供する
  • 通信エラー時など、画像を表示できない場合に、内容を説明する
  • 検索botにコンテンツを提供し、広くコンテンツを見られるようにする

である。そのため、装飾目的の画像やアイコンには代替テキストは不要である。

テキストで説明できれば、上記の方法などでコンテンツを変換・再利用することが可能になる。また、代替テキストは企画の段階で検討し、画像がなくても意味が伝わる構成となっていることを確認する。

代替テキストの考え方について、altはつけるだけじゃなくて | 実践アクセシブルHTML 第一回という記事が参考になる。

広告の代替テキストについて 既存の広告システムの場合、代替テキストを設定するために必要なテキストの入力欄が設けられていないことがある。可能であれば入稿ツールなどの広告システム、またはメディア側のシステム改修が望ましい。

画像のみの広告、かつ代替テキストが画面に表示される状況(ネットワークエラー時や画像非表示時など)では、クライアントの意図しない見た目となる。広告画像の代わりに代替テキストの「[AD] クライアント名」と表示されてしまうことが契約上問題になることがある。

そういった場合、最低限操作に支障をきたさないことを目的とし、「広告であること」を伝えることが望ましい。具体的には、代替テキストに「AD」「PR」と設定するなどが考えられる。

テスト・チェック方法

  1. 企画時、デザイナー・エンジニアによるレビュー
  2. 実装時、ESlintによるテスト
  3. コードレビュー

実装方法

<img> 要素の alt 属性に、画像を説明するテキストを設定する

悪い実装例

<img> 要素に alt 属性がない

<img src="ameblo.png" width="100" height="50">
  • 画像ファイル名が表示・読み上げられてしまう
  • 特に、リンク要素の中にこういった画像があると、ユーザーはクリックで何が起きるかが想定できない
  • 代替テキストが不要で装飾的な画像の場合には、空の alt 属性を設定する

良い実装例

<img> 要素の alt 属性に、画像を説明するテキストを設定する

<img src="ameblo.png" alt="アメブロ" width="100" height="50">

ラベルのないアイコンに、代替テキストを設定する

悪い実装例

ラベルや代替テキストがないアイコンの場合、アイコンの意味が理解できない

<i class="icon icon-pen"></i>

良い実装例

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

<i
  class="icon icon-pen"
  aria-label="ブログを書く">
</i>

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

<button>
  <i class="icon icon-pen" aria-hidden="true"></i>
  ブログを書く
</button>

意味のある画像を背景画像にしない

悪い実装例

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

良い実装例

<img src="ameblo.png" alt="アメブロ" width="100" height="50">

困ったとき

WAI-ARIAの aria-label 属性、role 属性を設定する

<div
  style="background-image: url(ameblo.png)"
  aria-label="アメブロ"
  role="img">
</div>

参考文献