オレンジ社でWebディレクション/デザインを担当している加藤です。

Webサイトを作成するときに考慮したいのが、Webアクセシビリティの対応です。

Webアクセシビリティ向上の目的については、障害のある方や高齢の方がアクセス可能にするためということは広く知られていますが、それだけではなく、例えば様々なデバイスで閲覧する時や通信速度が不安定な時など、ユーザーの閲覧環境がどのような状態でも必要な情報にアクセスできることが求められています。

※総務省が発行している『みんなの公共サイト運用ガイドライン（2016年版）』では、以下の通り記載されています。
「ウェブアクセシビリティとは、高齢者や障害者を含めて、誰もがホームページ 等で提供される情報や機能を支障なく利用できることを意味します。」
引用元：みんなの公共サイト運用ガイドライン（2016年版）- 総務省

また、アクセシビリティの対策はGoogleなどのサーチエンジンのクローラーがアクセスしやすいようにする対策と重なる部分もあるため、結果的にSEO対策につながることも多いです。

代替テキストの対応は取り組みがしやすいものではありますが、コンテンツ・原稿作成の段階では検討自体がされておらず、Web制作者が実装フェーズにおいて独自の判断で内容を決めることが多いのも実情かもしれません。

しかしながら、代替テキストをどのように入れるかということはコンテンツの検討と合わせて考えていくことでより良い効果を得られるものであるので、コンテンツ及び原稿作成者が意識して考えていくことがより望ましいといえます。

今回はWebアクセシビリティの入門編として『alt属性（オルト属性）を用いた代替テキストの入力』について適切な書き方と考え方をご説明します。

alt属性（オルト属性）とは？

alt属性（オルト属性）とはWebブラウザで画像が表示できないときに、画像の代わりに表示されるテキストを指定するために使われるものです。

また、スクリーンリーダーや音声ブラウザでの読み上げの際にも、画像部分ではalt属性で設定した代替テキストが読み上げられるようになります。

HTMLタグのimg要素に以下のように記述をします。

<img src= “/img.pngなど画像のパスを記述します”  alt=”画像の代わりとなるテキスト入力します”  />

※alt属性の読み方は「オルト属性」が一般的です。alt属性という名称は「代替テキスト」を表す「alternative text」に由来するそうです。

なぜ、alt属性（オルト属性）で画像の代替テキストを設定するべきなのか？

alt属性（オルト属性）で画像の代替テキストを設定するべき理由は、主に以下の３つです。

１．通信などの問題で画像が正しく表示されない場合に、画像の意味を正しく伝えるため

通信が不安定であるなど何らかの理由によって画像が表示されない場合、画像の説明を代替テキストで表示することによってユーザーにコンテンツの意味が伝わるようにします。

コンテンツの文脈上で重要な画像に代替テキストが無いと、画像が表示されない場合にコンテンツ全体の意味すら損なう可能性があります。

２．視覚に障害のある方がスクリーンリーダーを使用した際に、画像の意味が伝わるようにするため

Webサイトの情報は、スクリーンリーダーや音声ブラウザで読み上げることによって視覚に障害のある方も利用することができます。

ただし画像などの非テキストコンテンツは、そのままでは読み上げることができませんので、これらの情報が伝わらなくなってしまいます。

そのため、alt属性を用いて代替テキストを設定しスクリーンリーダーや音声ブラウザにおいても代替テキストを読み上げによって、コンテンツの情報が正しく伝わるようにします。

３．検索エンジンのクローラーに画像の情報を伝えるため

検索エンジンのクローラーも画像などの非テキストコンテンツの意味について理解が難しい場合が多いです。

ただし、alt属性を用いて代替テキストを適切に入力しておけば、検索エンジンのクローラーがその意味を理解することが出来るためSEO対策につながります。

画像の種類別：代替テキストの適切な書き方・考え方

alt属性（オルト属性）を用いた代替テキストは、コンテンツ全体の文脈において意味が通るように入力する必要があります。

それが出来ていないと、画像が表示されない場合やスクリーンリーダーで読み上げられた際に本来の目的を果たすことが出来ません。

実際の代替テキストにおいてよくあるケースとして、画像ファイル名やキャプションテキストがそのまま入っていたり、意味の無い装飾画像にまで代替テキストが入っているといったものがあります。

この場合はHTMLテキストとして入っている内容を重複して読み上げてしまったり、意味の無い装飾画像の内容を何度も読み上げてしまったりして、コンテンツを正しく伝えることを阻害してしまいます。

また、そもそもalt属性自体が設定されていないこともあります。

alt属性が設定されていない場合、スクリーンリーダーによっては画像ファイル名をそのまま読み上げてしまいます。

その為、代替テキストが不要であるならば、その旨をリーダーに伝えるためにalt属性を記述した上で代替テキストを空の状態にしておきましょう。

１．テキスト画像

２．写真

写真の代替テキストは、その写真がどのような意味を担っているかによって、alt属性を入力するか空にするかを判断する必要があります。

その写真が無くては文章が成り立たない場合には、「●●●の写真」など代替テキストを入れる必要があります。

ただし、単なるイメージ写真などはalt属性を空にしておいて良いでしょう。

また、キャプション付きの画像については、キャプションが読み上げられれば写真の内容が伝わりますので、これもalt属性を空にしておくのが良いです。

３．アイコン画像

アイコンについても、アイコンの役割によってalt属性を入力するか空にするかを判断する必要があります。

例えば検索できることを表す「虫眼鏡」アイコンの場合には、代替テキストは「検索」と入れるべきです。

※アイコンの近くに「検索」などのテキストがある場合には、内容が重複するため代替テキストは必要ありません。

また、PDFがダウンロードされることを表す「PDF」アイコンの場合には、代替テキストにも「PDF」または「PDFダウンロード」などを入れましょう。

一方で単なる装飾的なアイコン画像の場合にはalt属性を空にしておくのが良いです。

４．グラフ画像

グラフ画像の代替テキスト対応のひとつは、HTMLでマークアップされた表組みをセットで用意しておくことです。

alt属性としてテキストを入れる場合には、ただの数値の羅列ではなく、何の数値を表しているのかが文章で読み上げてもきちんと理解できるように書きましょう。

まとめ

• alt属性（オルト属性）とはHTMLで画像の代替テキストを設定するためのもの
• 代替テキストを正しく入力することで、WebアクセシビリティだけでなくSEOの観点からもメリットがある
• alt属性（オルト属性）を用いた代替テキストは、コンテンツ全体の文脈において意味が通るように入力する
• 代替テキストの内容に迷ったら、そのテキストが本文と一緒に読み上げられて意味が通じるかどうかで判断しよう

オレンジ社では、国内/海外サイトの企画・構築・運用サービスをご提供しています。

国内サイト海外サイト問わず、Webサイトのことならお気軽にご相談ください。

• Webソリューション事業

• Web戦略立案サービス

• Webサイト集客・SEO対策サービス

• CMS構築サービス

• Webサイト制作実績

各種お問い合わせはこちらから