alt属性の指定は大事だという当たり前のこと

これはWeb Accessibility Advent Calendar 2015の13日目のエントリーです。

前回も13日目に書いたような気もしていますが、毎年恒例ですので今回もエントリーしました。毎年技術的なことを書いてきましたが、今回は技術的なことではなくウェブアクセシビリティの基本的なことでもあるalt属性について書きます。

ちなみにこれまでのWeb Accessibility Advent Calendarの記事です

結局のところ「ちゃんとalt属性を指定しましょうね」という当たり前すぎる内容で終わるのですが、気にしません。

img要素のalt属性について

img要素のalt属性の目的は、画像といった非テキストコンテンツを表示できないユーザエージェントのために、代替テキストを指定するためのものです。スクリーンリーダー等でalt属性で指定した内容も読み上げもされますので、ウェブアクセシビリティの基本的なことで認知されていると思います。

ちなみにWHATWGのalt属性も上記で書いたようなことが書かれています。

alt -- Replacement text for use when images are not available

制作界隈ではどうもスクリーンリーダー等の音声読み上げのためにalt属性の指定をするという印象を持ちますが、仕様書を読んでいただけると決して音声読み上げのためだけにalt属性の指定をするわけではないことが分かると思います。

画像が利用できない時

それでは画像が利用できないのはどういった時でしょうか。

  • スクリーンリーダー等の音声読み上げ系の技術支援の利用
  • Lynxのようなテキストブラウザの利用
  • ユーザー自身の設定で画像をオフにしている場合

上記のようなことが挙げられると思います。しかし、ChromeやFirefoxといった画像を表示できるブラウザの場合、画像を利用できないということがあるでしょうか。

ある状況の場合を例に挙げます。

一時的なアクセス過多や回線の事情によるパフォーマンス低下の場合です。表示も遅くなってサイトの利用者に不便をかけてしまいます。

そういったアクセス過多の場合は、画像のアクセスを拒否してHTTPリクエストを減らすことによってパフォーマンス低下を軽減させる処置をとる場合があります。

画像が表示されなくなりますので、ほぼテキストの表示になります。そのため表示もそれなりに早くなります。

しかし、画像のalt属性の指定が無い場合、その画像が表示される箇所は何も表示されません。画像がリンクの場合だと利用者が目的としているページに辿りつけなくなってしまう可能性もあります。サービスを提供しているサイトの場合、大きな損失になりかねません。画像がリンクになっている場合は、alt属性の指定は必ず必要です。

実際に上記のようなことが起こったため、相当問題になりました。

画像のalt属性の指定は大事

画像に対する視覚的な特徴を説明する必要はありませんが、画像と同じ意味を伝えなければなりません。

前述したとおり結局、こういう基本的なオチになるのですが、単なる飾り的要素の場合、alt属性の指定が空にするのが適切な場合もありますが、画像のalt属性の指定は大事です。

公開前には必ずalt属性の指定がされているかどうか確認する必要があります。

自分が使っているツール

alt属性を確認するツールはいろいろありますが、自分は次のChrome拡張を使っています。ツールチップで表示されるので、確認に便利です。