alt属性（オルト属性）とは？代替テキストの書き方と考え方-SEOにもAI対策にも効果的なアクセシビリティ入門-

オレンジ社でWebディレクション/デザインを担当している加藤です。
Webサイトを作成するときに、必ず考慮したいのが、「Webアクセシビリティ」への対応です。

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

さらに、2024年4月1日からは「改正障害者差別解消法」が施行されました。民間企業においても、閲覧しているユーザーから『情報の取得やサイトの利用に困難がある』とサポートを求められた際には、代わりの手段で情報を伝えるなどの対応を必ず行わなければならない（＝合理的配慮の提供）ことが法律で義務化されています。
この義務を果たすための情報発信の基盤づくりとして、企業サイトのアクセシビリティ対応は、もはやマナーから「優先度の高い取り組み」へと変化しています。

また、アクセシビリティへの対応は、Googleなどの検索エンジンのクローラーや、昨今普及しているAIが情報を読み取りやすくするための対策と重なる部分が非常に大きいため、結果的にSEO対策やAI検索対策（AIO）に直結します。

アクセシビリティ対策の基本かつ重要な取り組みのひとつが、非テキストコンテンツ（画像など）に対する「代替テキスト（alt属性）」の設定です。
代替テキストの対応は取り組みがしやすい反面、コンテンツ・原稿作成の段階では検討されず、Web制作者が実装フェーズにおいて独自の判断で内容を決めてしまうことが多いのも実情です。
しかしながら、代替テキストの内容はコンテンツの検討と合わせて考えていくことでより高い効果を得られるため、コンテンツや原稿の作成者が代替テキストも作成することがより望ましいといえます。

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

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

alt属性（オルト属性）とは、Webブラウザで画像が表示できないときや、機械が画像を読み取る際に、画像の代わりとなるテキストを指定するために使われるHTMLの属性です。
スクリーンリーダーや音声ブラウザでの読み上げの際にも、画像部分ではalt属性で設定した代替テキストが読み上げられるようになります。
HTMLタグのimg要素に以下のように記述をします。

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

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

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

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

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

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

２．視覚に障害のある方がスクリーンリーダーを使用した際に、情報を届けるため

Webサイトの情報は、スクリーンリーダー（音声読み上げソフト）を利用することにより視覚に障害のある方も取得することができます。
ただし、画像などの非テキストコンテンツは、そのままでは読み上げることができないため、これらの情報が伝わらなくなってしまいます。
そのため、alt属性を用いて代替テキストを設定し、スクリーンリーダーや音声ブラウザが読み上げることで、コンテンツの情報が正しく音声で伝わるようにします。

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

Googleなどの検索エンジンのクローラー（Web上の情報を自動で収集する巡回プログラム）も、画像を視覚的に「見て」理解しているわけではありません。alt属性を用いて代替テキストを適切に入力しておけば、クローラーがその画像の意味や文脈を理解できるようになるため、画像検索からの流入などSEO対策につながります。

４．生成AIやAI検索エンジンに正確な情報を学習させるため（AIO対策）

昨今、ChatGPTやGoogleによるAIを用いた情報収集が急速に普及しています。これらのAIも検索エンジンのクローラーと同様に、裏側にあるHTMLのテキストデータから情報を読み取ります。alt属性が空のままだと、AIにとってその画像は「存在しない」ものとして扱われてしまいます。適切なalt設定は、AIに自社の情報を正しく認識させるための「AI可読性（マシンリーダビリティ）」を向上させる強力な手段となります。

AI可読性については以下の記事で詳しく解説していますのでぜひご参照ください。
【サステナビリティ担当者必見】AI時代に求められる「サステナビリティサイトのAI可読性（マシンリーダビリティ）対策」とは？

代替テキスト（alt属性）を執筆する際の基本ルールと注意点

実際に原稿を作成し、代替テキストを執筆する際は、以下のシステム上の仕様や読みやすさのルールにご注意ください。

１．文字数の目安は「40〜80文字程度（最大100文字）」に収める

長すぎる代替テキストは、音声読み上げを聞くユーザーの負担になったり、スクリーンリーダーの仕様によっては読み上げが途中で止まってしまうこともあります。また、クローラーやAIが要点を理解しづらくなる原因にもなります。長くても100文字以内を目安とし、簡潔にまとめましょう。
グラフや図解など、どうしても説明が長くなってしまう場合は、そのグラフや図解で最も重点を置いて伝えたい箇所について記述します。（グラフであれば最新の年度の数値、目標に対しての達成度など）

２．alt属性の中では「改行」ができない

HTMLの仕様上、alt属性のテキスト内で改行を行っても音声やシステムには反映されず、場合によってはコードのエラーを引き起こす原因になります。箇条書きや改行は使わず、「、」「。」などの句読点や全角スペースを用いて、1つの連続した文章として読みやすくなるよう作成してください。
また、半角のダブルクォーテーション（ " ）やシングルクォーテーション（ ' ）は、システム上でコードを破壊する原因になるため使用を避けてください。
引用や強調を使いたい場合は、日本語では全角のカッコ（「 」や『 』）、英語ではカーブした形のクォーテーション（ “” や ‘’ ）の使用をお願いしています。

３．「〜の画像」という言葉は原則不要

スクリーンリーダーは、画像を読み上げる際に自動的に「画像」と認識して音声をあてます。そのため、代替テキスト内に「〇〇の画像」と書いてしまうと、「〇〇の画像、画像」と二重に読み上げられてしまいます。基本的には「〜の画像」という言葉は省き、中身の情景や意味だけを記述しましょう。
ただし、「グラフ」「図解」「組織図」「写真」「イラスト」など、視覚情報の「形式」を伝えることが重要な場合は記述して問題ありません。

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

alt属性（オルト属性）を用いた代替テキストは、コンテンツ全体の文脈において意味が通るように入力する必要があります。
それが出来ていないと、画像が表示されない場合やスクリーンリーダーで読み上げられた際に本来の目的を果たすことが出来ません。

実際の代替テキストにおいてよくあるケースとして、画像ファイル名やキャプションテキストがそのまま入っていたり、意味を持たない装飾画像にまで代替テキストが入っているといったものがあります。
この場合はHTMLテキストとして入っている内容を重複して読み上げてしまったり、意味の無い装飾画像の内容を何度も読み上げてしまったりして、コンテンツを正しく伝えることを阻害してしまいます。

また、そもそもalt属性自体が設定されていないこともあります。
alt属性が設定されていない場合、スクリーンリーダーによっては画像ファイル名をそのまま読み上げてしまいます。
そのため、代替テキストが不要であるならば、その旨をシステムに伝えるためにalt属性を記述した上で代替テキストを空の状態（alt=""）にしておきましょう。空に設定することで、スクリーンリーダーはその画像を無視して読み飛ばしてくれるため、ユーザーにとって不要な音声ノイズを無くすことができます。同時に、AIや検索エンジンにも「意味を持たない装飾画像である」と正しく認識させることが可能です。

１．テキスト画像

最近はWebフォントやCSSを用いてテキストを表現することが主流ですが、デザインの都合上、文字を画像化して配置することがあります。
見た目上が普通の文字だとしても、そのままでは機械には読み取れません。画像に書かれているテキストをそのまま代替テキストとして入力しましょう。

２．写真

写真の代替テキストは、その写真がどのような意味を担っているかによって、alt属性を入力するか空にするかを判断する必要があります。
その写真が無くては文章が成り立たない場合には、「どのような風景か」という具体的な情景が伝わる代替テキストを入れる必要があります。ただ「写真」や「山の写真」とだけ記述してしまうと、具体的な情報が欠落しており、代替テキストとしての役割を十分に果たせません。

一方で、単なるイメージ写真（アイキャッチなど）の場合はalt属性を空にしておいて良いでしょう。また、写真のすぐ下に同じ内容のキャプションテキストが記載されている場合も、読み上げの重複を避けるためにalt属性は空にしておきます。

３．アイコン画像

アイコンについても、アイコンの役割によってalt属性を入力するか空にするかを判断する必要があります。
例えば検索できることを表す「虫眼鏡」アイコンが単独で置かれている場合は、alt="検索" と入れます。ただし、虫眼鏡アイコンのすぐ横に「検索」というテキストリンクがある場合は、内容が重複するためalt属性は空にします。

また、PDFファイルへのリンクを表す「PDF」アイコンの場合には、代替テキストにも「PDF」または「PDFファイルを別のタブで開きます」などを入れましょう。
一方で、単なる装飾的な矢印のアイコン画像などの場合にはalt属性を空にしておくのが適切です。

４．グラフや図解（インフォグラフィック）画像

サステナビリティサイトやIRサイトなどでよく使われる「グラフ画像」のalt属性は特に重要です。ただ数値を羅列するのではなく、「何の数値を表し、どのような傾向（結果）があるのか」を文章で的確に記述しましょう。ただ数値を羅列するだけだと、音声読み上げを聞いているユーザーやAIが「結局、数値が上がって良いのか悪いのか」「目標は達成されたのか」を自力で計算・推測しなければならず、企業側の「削減に成功した」という一番伝えたいメッセージが欠落してしまいます。

また、AI可読性やアクセシビリティの観点から最も望ましいのは、グラフ画像の近くに「HTMLでマークアップされた表組み（テーブルデータ）」をセットで用意しておくことです。これにより、誰もが（そしてAIも）正確な数値データにアクセスできるようになります。

まとめ

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

オレンジ社では、アクセシビリティ基準やAI可読性に対応した国内/海外サイトの企画・構築・運用サービスをご提供しています。

コーポレートサイト、サステナビリティサイトなど、Webサイト制作のことならお気軽にご相談ください。

• Webソリューション事業

• Web戦略立案サービス

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

• CMS構築サービス

• Webサイト制作実績

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