代替テキスト（Alt Text）

代替テキストの定義

代替テキスト（alt text） は、alternative textの略で、画像タグに追加される説明的なHTML属性であり、デジタル環境における視覚コンテンツの意味、文脈、目的を伝えます。Microsoftの公式ドキュメントによると、代替テキストは、アプリやウェブページなどのデジタル環境における視覚アイテムの意味と文脈を伝える説明的なテキストです。適切に実装された場合、代替テキストはスクリーンリーダー（視覚障害者が使用する支援技術）が画像の説明を音声で読み上げることを可能にし、すべてのユーザーが視覚コンテンツにアクセスできるようにします。アクセシビリティに加えて、代替テキストは重要なSEO機能を果たし、検索エンジンが画像コンテンツを理解してインデックス化するのを助け、画像検索ランキングとページ全体の関連性を向上させます。HTMLの実装はシンプルです。<img src="image.jpg" alt="説明的なテキストをここに"> のように、alt属性にテキスト説明を含めます。代替テキストがない場合、スクリーンリーダーに依存するユーザーは空白または一般的な通知だけを体験し、目の見えるユーザーが当然のように得られる重要な情報を見逃してしまいます。

ウェブアクセシビリティにおける代替テキストの重要かつ不可欠な役割

デジタルアクセシビリティとインクルーシブなウェブデザインの文脈において、代替テキストの重要性はいくら強調してもし過ぎることはありません。上位100万のウェブサイトを分析した2024年WebAIM Millionレポートによると、全トップページ画像の21.6%に代替テキストがなく、1ページあたり平均12枚の画像に説明が欠けていました。さらに深刻なことに、代替テキストがある画像の14.6%には疑わしい、または繰り返しの説明が含まれており、つまり人気のあるトップページの画像の約3分の1が欠落、疑わしい、または繰り返しの代替テキストであることを意味します。このアクセシビリティギャップは、ウェブをナビゲートするために支援技術に依存する全世界推定22億人の視覚障害者に直接的な影響を与えます。JAWS、NVDA、Microsoft Narratorなどのスクリーンリーダーが代替テキストのない画像に遭遇すると、何も読み上げないかファイル名を読み上げるため、ユーザーは混乱し、重要なコンテンツを理解できなくなります。国際的に認知されたウェブアクセシビリティの基準である**ウェブコンテンツアクセシビリティガイドライン（WCAG）**は、非テキストコンテンツに対するテキスト代替を明示的に要求しており、**アメリカ障害者法（ADA）や欧州アクセシビリティ法（EAA）**などの法律のもと、代替テキストは法的遵守要件となっています。適切な代替テキストを実装しない組織は、法的措置、風評被害、そして世界人口のかなりの部分をデジタル体験から排除するリスクを負います。

Ready to Monitor Your AI Visibility?

Track how AI chatbots mention your brand across ChatGPT, Perplexity, and other platforms.

始める お問い合わせ

代替テキストと関連概念：区別の理解

技術的実装とHTML標準

代替テキストのHTML実装はシンプルですが重要な構造に従います。alt属性は、ウェブページに画像を埋め込む標準的な方法である<img>タグ内に配置されます。適切にフォーマットされた画像タグは次のようになります。<img src="sunset-mountain.jpg" alt="雪をかぶった山頂に沈む金色の夕日、オレンジと紫の空が静かな高山湖に映る光景">。代替テキストはHTMLコードに直接配置され、目の見えるユーザーには画像の読み込みに失敗しない限り見えません。画像が読み込まれない場合、代替テキストが欠落した画像の代わりに表示されます。このフォールバック機能は、インターネット接続が遅いユーザーや画像リンクが壊れているユーザーにとって特に重要です。コンテンツ管理システム（CMS）（WordPress、Shopify、Wix、Squarespaceなど）は、直接HTML編集を必要とせずに代替テキストを追加できるユーザーフレンドリーなインターフェースを提供しています。例えばWordPressでは、メディアライブラリまたはブロックエディターの画像設定から代替テキストを追加できます。最近のプラットフォームでは、人工知能とコンピュータビジョン技術を使用した自動代替テキスト生成が増えています。Microsoft 365製品（PowerPoint、Word、Outlookなど）には、画像キャプショニングモデルを使用して初期説明文を作成する自動代替テキスト生成機能が搭載されています。ただし、これらのAI生成の説明は、正確性、関連性、および周辺コンテンツとの整合性を確保するために、常に人間がレビューおよび修正する必要があります。WCAG 2.1基準では、すべての画像にテキスト代替が必要であると規定しており、写真、アイコン、イラスト、図表、チャート、リンク画像など、画像の種類ごとに代替テキスト作成のための具体的なガイダンスが提供されています。

Stay Updated on AI Visibility Trends

Get the latest insights on AI mentions, brand monitoring, and optimization strategies.

Email address

Subscribe

効果的な代替テキストを作成するためのベストプラクティス

効果的な代替テキストを作成するには、具体性、簡潔さ、文脈上の関連性のバランスが必要です。黄金律は、画像を見ることができない人に画像を説明するように代替テキストを書くことであり、すべての視覚的詳細ではなく最も重要なことに焦点を当てます。アクセシビリティ専門家の研究では、代替テキストは1〜2文、理想的には125文字以内に抑えることが推奨されています。ほとんどのスクリーンリーダーはこの長さを超えるテキストを切り詰めるためです。「画像の」「写真の」「グラフィックの」などの冗長な表現は避けてください。スクリーンリーダーは既に画像が存在することを通知するためです。代わりに、説明に直接入ります。「黄色いジャケットを着た女性が自転車に乗っている画像」ではなく、「黄色いジャケットを着た女性が秋の都会の公園を自転車で走っている」と書きましょう。スクリーンリーダーのユーザーは途中で読み上げを停止したり先に進んだりする可能性があるため、最も重要な情報を最初に配置してください。装飾用の画像には、空のalt属性（alt=""）を使用してスクリーンリーダーにそれらを完全にスキップするよう指示し、不要な読み上げを防ぎます。関連キーワードを自然に含めるとよいですが、画像とその文脈に合う場合に限ります。キーワードの詰め込みはユーザーエクスペリエンスと検索エンジンランキングの両方に悪影響を与えるため、絶対に行わないでください。チャート、インフォグラフィック、図などの複雑な画像には、代替テキストで主要な洞察の簡潔な概要を提供し、ページの別の場所に長めのテキスト説明やデータ表を補足として提供します。例えば、「売上データを示す棒グラフ」ではなく、「2024年第1四半期から第2四半期にかけてのオンライン売上の30%増加を示す棒グラフ、6月に売上ピーク」と書きましょう。代替テキストを作成する際は周辺コンテンツの文脈を考慮してください。同じ画像でも使用される方法によって異なる説明が必要になる場合があります。ハーバード大学のメモリアル教会の写真は、春のアクティビティに関する記事では「色とりどりの椅子に座ってハーバードヤードでくつろぐ学生たち」と説明されるかもしれませんが、キャンパス建築に関する記事では「ホリスホールはハーバードヤードの開放的な芝生スペースに隣接している」と説明されるかもしれません。

デジタルエコシステム全体におけるプラットフォーム別の実装

プラットフォームやコンテンツ管理システムによって、代替テキストの実装方法は異なります。ウェブサイトの43%以上を支える最も広く使われているCMSであるWordPressでは、メディアライブラリまたはGutenbergブロックエディターを通じて代替テキストを追加できます。既存の画像を編集するには、メディア > ライブラリに移動し、画像をクリックして、指定フィールドに代替テキストを入力します。主要なEコマースプラットフォームであるShopifyでは、商品画像のアップロード時、または商品エディターで鉛筆アイコンをクリックして「画像のaltテキスト」フィールドにテキストを入力することで、代替テキストを編集できます。Eコマースサイトの約38%を支えるWooCommerceは、WordPressのメディアライブラリ機能と統合されています。人気のウェブサイトビルダーであるWixとSquarespaceは、ビジュアルインターフェースを提供しており、ユーザーは画像をクリックしてデザインまたは編集メニューから代替テキスト設定にアクセスできます。ソーシャルメディアプラットフォームは、ますます代替テキストのアクセシビリティを優先しています。Instagramでは、投稿公開前に詳細設定から代替テキストを追加できます。Twitter（現X）では、アップロードした画像の「+ALT」ボタンをクリックして代替テキストを追加でき、最大1000文字まで対応しています。LinkedInでは、画像アップロード時に「代替テキストを追加」オプションが提供されています。FacebookではAIを使用して自動的に代替テキストを生成しますが、ユーザーは投稿前に説明を編集またはカスタマイズできます。Microsoft 365アプリケーション（PowerPoint、Word、Excel、Outlookなど）には、画像キャプショニングAIを活用した自動代替テキスト生成機能が搭載されています。ユーザーは代替テキストペインを通じて、生成されたテキストを承認、編集、または手動で入力できます。このマルチプラットフォーム環境では、コンテンツ作成者は使用する各プラットフォームの固有のワークフローを理解する必要がありますが、基本原則は一貫しています。それは画像の意味を伝える、説明的で簡潔かつ文脈に関連したテキストです。

代替テキストとAI検索の可視性

ChatGPT、Perplexity、Google AI Overviews、Claudeなどの生成AIシステムがウェブコンテンツを分析・引用するにつれて、代替テキストはAIの可視性と引用追跡にとって戦略的に重要になっています。これらのAIプラットフォームは検索拡張生成（RAG）技術を使用しており、ウェブから関連情報を検索し、応答の中でソースを引用します。AIシステムが適切に書かれた代替テキストを含む画像に遭遇すると、視覚コンテンツをよりよく理解し、応答に組み込むことができます。代替テキストはAIシステムが画像を正確に解釈および説明するのに役立ち、AI生成コンテンツの関連性と正確性を向上させます。AmICitedや類似のAIモニタリングプラットフォームを使用する組織にとって、画像とその代替テキストがAI応答にどのように表示されるかを追跡することは、ブランドの可視性とコンテンツの帰属を理解する上で重要です。品質が低い、または欠落した代替テキストの画像は、AIシステムによって誤解釈され、不正確な説明や引用機会の喪失につながる可能性があります。逆に、適切に最適化された代替テキストは、複数のプラットフォームにわたるAI生成応答において、画像が適切に理解、引用、帰属される可能性を高めます。この代替テキストの重要性の新たな側面は、**生成エンジン最適化（GEO）**への幅広いシフトを反映しており、コンテンツ作成者は従来の検索エンジンだけでなく、情報の発見と共有を仲介するAIシステム向けにも最適化する必要があります。

統計的エビデンスとコンプライアンスの状況

代替テキストを取り巻くアクセシビリティ危機は、厳密な研究を通じて十分に文書化されています。上位100万のウェブサイトを分析した2024年WebAIM Millionレポートでは、トップページの54.5%に画像の代替テキストが欠落しており、これは低コントラストテキスト（ページの81%）に次いで2番目に多いWCAG違反であることが判明しました。また、このレポートでは全トップページ画像の18.5%に代替テキストがなく、1ページあたり平均11枚の画像に説明が欠けていることも明らかになりました。AudioEyeの2024年のアクセシビリティ統計では、ウェブ上の画像の60%に代替テキストがないと報告されており、ウェブおよびモバイルデバイス上の画像の大部分がアクセス不能なままであることを示しています。これらの統計は、アクセシビリティ基準と実際の実装との間の持続的なギャップを浮き彫りにしています。法的コンプライアンス要件により、多くの組織にとって代替テキストの実装は交渉の余地がありません。WCAG 2.1レベルA基準ではすべての非テキストコンテンツにテキスト代替を明示的に要求しており、WCAG 2.1レベルAAでは複雑な画像に対してより詳細な説明を求めています。米国のADA、欧州のEAA、または同様のアクセシビリティ法制の対象となる組織は、アクセス不能なコンテンツに対して法的責任を負います。最近の訴訟では、適切な代替テキストの欠如など、アクセシビリティが低いウェブサイトを対象とするものが増えています。リハビリテーション法第508条では、連邦機関と請負業者に対し、代替テキスト付きの画像を含むアクセシブルなデジタルコンテンツの提供を義務付けています。法的要件を超えて、代替テキストの実装は、包括性とユーザーエクスペリエンスに関する組織の価値観を反映します。アクセシビリティを優先する企業は、能力に関係なくすべてのユーザーにサービスを提供するというコミットメントを示し、これによりブランドの評判が向上し、市場リーチが拡大します。

適切な代替テキスト実装の主要な側面と利点

• アクセシビリティ準拠：WCAG 2.1、ADA、EAA、およびセクション508の要件を満たし、法的リスクを低減し、インクルーシブなデザインを確保します
• スクリーンリーダー互換性：JAWS、NVDA、VoiceOverなどの支援技術が視覚障害者に画像コンテンツを伝えることを可能にします
• SEO強化：画像検索ランキングを向上させ、オーガニックトラフィックを増やし、検索エンジンに対するトピックの関連性を強化します
• フォールバック機能：画像がリンク切れ、接続速度低下、ブラウザの問題で読み込めない場合に表示され、コンテンツの明瞭性を維持します
• AIシステムの理解：生成AIプラットフォームが応答の中で視覚コンテンツを正確に解釈し引用するのに役立ちます
• ユーザーエクスペリエンス：低速接続やテキストのみのブラウザを使用するユーザーを含むすべてのユーザーに文脈を提供します
• コンテンツの明瞭性：視覚要素が表示できない場合でも、画像のメッセージと目的が保持されることを保証します
• モバイルアクセシビリティ：帯域幅が限られているモバイルデバイスやテキストベースのブラウジングモードを使用するユーザーをサポートします
• セマンティックな意味：ページコンテンツを強化し、検索エンジンが画像を周辺テキストに関連付けてより良いインデックス化を行うのに役立ちます
• ブランドの一貫性：組織が画像の説明と解釈をプラットフォーム間で制御できるようにします

よくある代替テキストの間違い

代替テキストの重要性を理解しているチームでさえ、いくつかの繰り返し発生するエラーにより、その効果を損なっています。「画像の」や「写真の」で説明を始めることは、スクリーンリーダーユーザーが各要素に割く限られた注意を浪費します。ソフトウェアは既に画像が存在することを通知しているため、そのようなフレーズで始めることは実際のコンテンツを遅らせるだけです。SEOのためのキーワードの詰め込みは、説明的なテキストを読みにくい検索語のリストに変えてしまい、WCAGの意図に基づくガイダンスに違反し、改善しようとしているユーザーエクスペリエンスと検索ランキングの両方に積極的に害を及ぼします。装飾画像に空の alt="" 属性を付け忘れると、スクリーンリーダーが意味のないフィラー（スペーサー、境界線、背景装飾）を読み上げることになります。これらは明示的にスキップするようマークする必要があり、単に省略して空白のままにしたり、誰も必要としない説明を入れたりしてはいけません。周辺の文脈を無視した代替テキストは、技術的に正確でも役に立たない説明になります。同じ写真でも、ページがキャンパスライフに関するものか建築に関するものかで異なる説明が必要であり、一般的な説明ではどちらも失敗します。AI生成の代替テキストをレビューなしで信頼することは、Microsoft 365の自動生成ツールなどの普及に伴い増加していますが、これらの説明は文脈上重要な詳細や目的を見逃すことがよくあります。これらは最終的な説明ではなく、出発点の草稿です。すべての視覚的詳細を詰め込むことでスクリーンリーダーが読み上げる効果的な長さ（約125文字）を超えると、特にチャートなどの複雑な画像では、実際に重要な1つか2つの事実が埋もれてしまいます。ここでは視覚的に説明するのではなく、主要なデータポイントを直接述べるべきです。