複雑な画像に入れるALT属性（代替テキスト）の考え方

Writer： tsuda　更新日：2026/02/13

こんにちは、サービスプロデューサーの津田です。

前回の記事ではALT属性（代替テキスト）の基本をお伝えしました。今回はさらに一歩踏み込んで、グラフや図表、アニメーションといった「複雑な情報を持つ画像」をどのように扱うべきか、具体的なテクニックを解説します。

複雑な画像における「長すぎるALT属性」のデメリットと解決策

図表やグラフの内容をすべてALT属性で説明しようとすると、どうしても文章が長くなります。しかし、ここに落とし穴があります。

スクリーンリーダー環境では、ALT 属性が長くなると読み上げが冗長になり、内容の再確認が難しくなります。

では、複雑な画像の情報を伝えるにはどのようにするのが良いのでしょうか？

複雑な情報を伝える際は、ALT属性タグだけに頼らず、「画像」と「周辺のテキスト」をセットで利用することが推奨されます。

こうすれば、音声読み上げを使っている方はもちろん、視覚的に情報を得る人にとっても読みやすくなり、アクセシビリティとユーザビリティの両方が向上します。

デザイン上どうしても文字を画像化する場面もありますが、アクセシビリティの観点からは、同じ内容はテキストとして提供することが望まれます。テキストであれば、ユーザーが自分の見やすいサイズや色に調整できるからです。

また、アニメーション画像を使う場合も、視覚的な表現だけでは伝わらない人がいることを前提に、その動きが示す内容をテキストとして付近に挿入するなどの工夫をすると、より多くの人に情報を伝えることができます。

アクセシビリティを確保してしっかりと「使える」状態にした上で、迷わず効率的に情報が得られる「使いやすい」状態（ユーザビリティが向上している状態）を目指すことが、本質的なWeb改善に繋がります。

デジナーレでは、ユーザビリティとウェブアクセシビリティ両方の観点から診断する、「ユーザビリティ×ウェブアクセシビリティ診断サービス」を提供しております。

Webアクセシビリティ改善策を検討している方は、お問い合わせフォームよりお気軽にお問合せください。