代替テキストの書き方：開発者とコンテンツチームのための実践ガイド

WebAIM Million 2025レポートによると、解析された全ホームページの55.5%で代替テキストが欠落しており、その不備のうち44%はリンク付き画像に関するものです。これはスクリーンリーダー利用者にとってナビゲーションが完全に破綻することを意味します。これはニッチな問題ではありません。ウェブの半分が、何も伝えない画像の前に盲人やロービジョンのユーザーを取り残しているということです。チームが画像を出荷する際にaltテキストについて慎重に考えずにいるなら、単にコンプライアンスのチェックボックスを満たせていないだけではなく、オーディエンスのかなりの割合に対して「あなたたちの体験は重要ではない」と伝えていることになります。

Altテキストの本当の意味（そして単なるタグ以上の存在である理由）

Altテキスト（alternative textの略）は、HTMLの<img>要素のalt属性に埋め込まれた文章による説明です。スクリーンリーダーが画像に遭遇すると、そのaltテキストをユーザーに読み上げます。画像が読み込まれない場合—回線の遅さ、URLの不備、コンテンツブロッカーなどが原因—には、その代わりにaltテキストが表示されます。また、検索エンジンによってインデックスされるため、静かではあるものの意味のあるSEOシグナルにもなります。

しかし多くのチームが見落としているのは、altテキストは単なるフォールバックの安全網ではないという点です。これは、盲人やロービジョンのユーザー—世界でおよそ4,330万人の盲人と、2億9,500万人の中等度から重度のロービジョンの人々—がウェブ上のビジュアルコンテンツを体験するための主要な手段です。NVDAやJAWSのようなスクリーンリーダー（最も広く使われている2つのデスクトップスクリーンリーダー）は、フォーカスが画像に到達した瞬間にaltテキストを読み上げます。そのテキストが欠落していたり、意味をなさなかったり、冗長だったりすると、ユーザー体験は即座に悪化します。

盲人やロービジョンのユーザーに関する調査は、実際に何が起きているかについて厳しい現実を示しています。あるユーザーは、ウェブサイト上の画像を完全に無視していると報告しています。なぜなら、これまでの経験上、altテキストが役に立ったことがないからです。別のユーザーは、ECサイトで商品画像を飛ばしてレビューに頼るといいます。なぜなら、「image001.jpg」や「photo」といったaltテキストは何も伝えてくれないからです。これはスクリーンリーダーの問題ではなく、コンテンツの問題であり、あなたのチームが修正できる問題です。

altテキストを「コンテンツの責任」として理解すること—単なる開発者のタスクではなく—が、すべてのチームに必要な最初の意識改革です。開発者は属性を実装し、コンテンツチームは文脈を理解します。どちらも、正しく実装するために不可欠です。

法的・コンプライアンスの状況

法的リスクを気にするのであれば、altテキストは任意ではありません。WCAG達成基準1.1.1（非テキストコンテンツ）はレベルA要件であり、コンプライアンスの中で最も低く、最も基礎的なレベルです。これに不適合であることは、正式なアクセシビリティ監査に不合格であることを意味します。米国では、ADAが何千件もの訴訟でウェブサイトに適用されており、2024年だけで4,605件のADAウェブサイト訴訟が提起されました。altテキストの欠如は、容易に検出でき、客観的に測定可能であり、かつ中核コンテンツへのアクセスを直接妨げるため、内容証明郵便で最も頻繁に指摘される違反の1つです。

ADAに加えて、European Accessibility Act（EAA）は2025年6月28日に施行されました。組織がEUの顧客にサービスを提供している場合、不適合には最大€100,000または年間売上の4%の罰則が科される可能性があります。WCAG 2.2レベルAAはEAAコンプライアンスのベンチマークとして広く認識されており、その達成基準1.1.1におけるaltテキスト要件は以前のバージョンから変更されていません—すべての情報提供画像には、プログラムによって判別可能なテキストによる代替が必要です。

カナダでは、Accessibility for Ontarians with Disabilities Act（AODA）が同様に、公的機関および民間組織に対してWCAG準拠を義務付けています。米国連邦政府の文脈ではSection 508が並行する要件を持っています。各法域に共通する結論は一貫しています。altテキストは「あったら良いもの」ではなく、規制環境は緩和ではなく強化の方向に進んでいるということです。

WCAG 1.1.1はレベルA—最も基本的なコンプライアンスレベルです。これに不適合であることは、すべてのアクセシビリティ監査に不合格であることを意味し、自動ツールや法務チームが最も検出しやすい違反です。

判断フレームワーク：どの画像に何が必要か

よくある誤解の1つは、すべての画像にテキストによる説明が必要だというものです。これは誤りです—そして、装飾的な画像に不要なaltテキストを追加すると、スクリーンリーダー利用者にとっての体験はむしろ悪化します。価値を生まないノイズを聞かされることになるからです。本当に必要なスキルは、それぞれの画像がどのカテゴリに属するかを見極めることです。以下は実践的なフレームワークです。

• 情報提供画像 — 周囲のテキストにはないコンテンツや意味を伝える写真、イラスト、グラフィック。これらには、画像が提供しているのと同じ情報を伝える説明的なaltテキストが必要です。
• 機能的な画像 — ボタン、リンク、コントロールとして使われる画像（例：検索を送信する虫眼鏡アイコン、ホームページにリンクするロゴ）。altテキストは見た目ではなく機能を説明すべきです。alt='Magnifying glass icon'ではなくalt='Search'とします。
• 装飾的な画像 — 意味を持たず、審美的な価値だけを加えるビジュアル：背景パターン、区切り線、純粋に装飾的なイラストなど。これらには空のalt属性（alt=''）を設定し、スクリーンリーダーにその画像を完全にスキップするよう指示します。
• テキストを含む画像 — 文字を含むスクリーンショットやグラフィック。ベストプラクティスは、これらを避けて、代わりにスタイルを適用した実際のテキストを使うことです。どうしても避けられない場合、altテキストは画像内のテキストをそのまま再現する必要があります。
• 複雑な画像 — 密度の高いデータを含むチャート、グラフ、地図、インフォグラフィック。短いaltテキストによる要約が必要であり、さらにページ本文内、または画像からリンクされた場所に、より長く構造化された説明を用意します。

空のaltテキスト（alt=''）は、alt属性が欠落している状態とは異なることに注意してください。alt属性自体が存在しない画像では、スクリーンリーダーが画像のファイル名やURLを読み上げる場合があり、これはほとんどの場合、沈黙よりも悪い結果になります。値を意図的に空にする場合でも、属性自体は必ず含めてください。

本当に機能するAltテキストの書き方：実践ルール

良いaltテキストを書くのは、見た目ほど簡単ではありません。役に立つ説明とノイズを分ける具体的なルールは次のとおりです。

• 簡潔に保つ。125文字以内を目安にします。JAWSやNVDAのようなスクリーンリーダーは、長いaltテキストを文の途中で切り捨てることがあり、せっかく提供した情報の肝心な部分が失われる可能性があります。画像がそれ以上の説明を必要とするほど複雑な場合は、補足的な長い説明が必要だというサインです。
• 「Image of」や「Photo of」で始めない。スクリーンリーダーは、altテキストを読み上げる前に、その要素が画像であることを自動的に知らせます。alt='Image of a smiling woman'と書くと、スクリーンリーダーは「image, image of a smiling woman」と読み上げることになり、冗長でユーザーの時間を無駄にします。
• 見た目だけでなく意味を説明する。altテキストは、画像と同じ情報や機能を伝えるべきです。Q3の売上成長を示すチャートを表示しているなら、alt='Bar chart'と書いてはいけません。alt='Bar chart showing Q3 revenue up 22% year-over-year'のように書き、そのうえで周囲のテキストで完全なデータを提供します。
• 文脈に合わせる。同じ写真でも、使われる場所によって必要なaltテキストは変わります。「チーム紹介」セクションで使われる机の上のノートPCの写真なら、ワークスペースを説明するaltテキストが必要かもしれませんが、商品一覧で使われる場合は、ノートPCの仕様や外観を説明する必要があります。
• キーワードを詰め込みすぎない。altテキストは検索エンジンにインデックスされますが、キーワードを詰め込むのはユーザー体験として悪く、WCAGの意図にも反します。まずユーザーのために書いてください。
• 適切な文法と句読点を使う。スクリーンリーダーはテキストを音声に変換し、句読点は話す速度や明瞭さに影響します。文の断片は、完結した文に比べて自然な読み上げになりません。

Altテキストは、冷たく客観的な説明である必要はありません。状況によっては、ニュアンスや文脈、さらには感情を伝えるべき場合もあります。それらがユーザーのコンテンツ体験にとって重要であるなら、なおさらです。

コード例：良い例と悪い例

理論は理論です。ここでは、これらの原則が実際のHTMLでどのように表れるかを見ていきます。

情報提供画像 — 悪いaltテキスト：

<img src='team-photo.jpg' alt='photo'>

情報提供画像 — 良いaltテキスト：

<img src='team-photo.jpg' alt='Accsible engineering team gathered around a whiteboard during a product sprint meeting'>

機能的な画像（リンク付きロゴ） — 悪いaltテキスト：

<a href='/'>
  <img src='logo.svg' alt='logo'>
</a>

機能的な画像（リンク付きロゴ） — 良いaltテキスト：

<a href='/'>
  <img src='logo.svg' alt='Accsible — return to homepage'>
</a>

装飾的な画像 — 正しい実装：

<img src='decorative-wave-divider.svg' alt='' role='presentation'>

複雑な画像（チャート） — 長い説明へのリンク付きの正しいアプローチ：

<img
  src='q3-revenue-chart.png'
  alt='Bar chart: Q3 revenue up 22% YoY. Full data table below.'
  aria-describedby='chart-description'
>
<div id='chart-description'>
  <!-- Full tabular data or structured text description here -->
</div>

可視テキストラベルのないアイコンボタンの場合は、ボタン自体にaria-labelを使用し、アイコン画像にはalt=''を設定して二重読み上げを避けます。

<button aria-label='Close dialog'>
  <img src='close-icon.svg' alt=''>
</button>

特定の画像タイプの扱い方

ECサイトの商品画像：これはウェブ上で最も重要なaltテキストの文脈の1つです。盲人ユーザーは、購入を検討しているものを理解するためにaltテキストだけに頼っています。商品名だけを説明するのでは不十分です。素材、色、主要な視覚的特徴、視覚的に区別できるバリエーションを含めてください。たとえば、alt='Slim-fit wool blazer in navy blue with gold buttons and notched lapels'は、alt='Blazer'よりはるかに有用です。

ロゴ：ロゴは決して装飾的なものではありません。ロゴ画像内に含まれる組織名と意味のあるタグラインや説明を含むaltテキストが必要です。ロゴがリンクでもある場合、そのaltテキストは前述のとおり、リンク先を説明すべきです。

インフォグラフィック：これらを適切に扱うのは非常に難しいことで知られています。1つのalt属性に、複雑なインフォグラフィックの情報量をすべて詰め込むことはできません。正しいアプローチは、短く要約レベルのaltテキスト（例：alt='Infographic summarizing five steps of our onboarding process'）と、同じ情報の構造化されたテキスト版（ページ上で可視）を組み合わせることです。

人物の画像：特に編集やニュースの文脈では、人物が特定されている場合に名前を含めることは有用です。人物の外見だけでなく、その人が何をしているのか、画像が何を伝えているのかを説明してください。人を属性だけで捉えるような説明は避けてください。

背景画像やCSS画像：CSSのbackground-imageで適用された画像にはalt属性がないため、本当に装飾的な目的にのみ使用すべきです。意味を伝える必要がある画像は、<img>要素としてHTMLに配置し、適切なaltテキストを付ける必要があります。

Altテキストをワークフローに組み込む

大規模なサイトでaltテキストが壊れたままになりがちな理由の1つは、それが最後のステップの後回しとして扱われているからです—自動スキャナーがローンチ後に問題を検出し、慌ててパッチを当てる、という流れです。解決策は、altテキストをコンテンツおよび開発のワークフローの上流に移すことです。

コンテンツチームにとっては、最も一般的な画像タイプをカバーするaltテキストのハウススタイルガイドを確立することを意味します。サイトが商品画像、ブログ記事のヒーロー画像、イベント写真、データチャートを掲載しているなら、それぞれのカテゴリに、良い説明と悪い説明の例を含む文書化された標準が必要です。ライターや編集者が画像をアップロードする際には、キャプションや画像選定を考えるのと同じタイミングでaltテキストについても考えるべきです。

開発者にとっては、CMSテンプレートにaltテキスト入力欄を組み込み、装飾的でない画像コンポーネントについては任意ではなく必須にすることを意味します。コンポーネントが画像を受け付ける場合、インターフェースはaltテキストの入力を促し、情報提供用か装飾用かを区別できるようにすべきです。画像ファイル名やキャプションテキストでalt属性を自動入力するのは避けてください。これらは目的の異なる別物です。

QAおよびコンプライアンス担当者にとっては、（Accsibleのようなアクセシビリティオーバーレイソリューションを含む）自動スキャンツールが、欠落または空のalt属性を持つ画像を大規模に検出し、リアルタイムでフラグを立てることができます。しかし、自動ツールは、既に存在するaltテキストが実際に意味のあるものかどうかを評価することはできません—その判断には人間のレビュアーが必要です。アクセシビリティ監査のサイクルに手動のスポットチェックを組み込み、画像を含む新機能の受け入れ基準には、altテキストの品質レビューを含めてください。

同じ画像が複数のページや文脈で再利用される場合、適切なaltテキストが変わる可能性があることを忘れないでください。「お問い合わせ」ページと「私たちのカルチャーについて」ページの両方で会社の本社の写真を使う場合、それぞれのページが伝えようとしている内容に応じて、異なる説明が必要になるかもしれません。WordPressのようなCMSプラットフォームは、まさにこの理由から、投稿レベルでaltテキストを上書きできるようにしています。

避けるべきよくあるミス

altテキストに真剣に取り組んでいるチームでさえ、繰り返し同じミスを犯しがちです。特に注意して監視する価値のあるパターンは次のとおりです。

• ファイル名をaltテキストとして使う。IMG_4521.jpgやhero-banner-v3-final.pngといったaltテキストは、役に立たないどころか、スクリーンリーダー利用者に対して「誰もあなたのことを考えていない」と明確に伝えてしまいます。
• altテキストを隣接するキャプションと同一にする。キャプションとaltテキストは、対象と目的が異なります。キャプションは視覚ユーザーのための補足的な文脈であり、altテキストは画像を見られないユーザーのために画像そのものを置き換えるものです。両者が重なることはあっても、コピペで済ませるべきではありません。
• すべての画像に無差別にaltテキストを付ける。装飾的な画像に説明的なaltテキストを付けると、スクリーンリーダー利用者は不要なコンテンツを延々と聞かされることになります。「この画像には説明が必要か？必要ならどのような説明か？」を判断することは、実際の文章を書くことと同じくらい重要です。
• 曖昧で文脈のない説明を書く。製品発表会でのCEOの写真にalt='man smiling'のようなaltテキストを付けても、その画像がなぜそこにあるのか、文脈上何を意味しているのかをほとんど伝えません。
• SVGのaltテキストを無視する。インラインSVGにもアクセシブルネームが必要です。通常は<svg>要素にaria-labelを付けるか、最初の子要素として<title>要素を置き、role='img'と組み合わせます。

<!-- SVG with accessible name -->
<svg role='img' aria-labelledby='svg-title'>
  <title id='svg-title'>Quarterly revenue growth, Q1 to Q4 2024</title>
  <!-- SVG paths -->
</svg>

重要なポイント

• すべての画像にテキスト説明が必要なわけではありません。装飾的な画像にはalt=''を使い、スクリーンリーダーにスキップさせるべきです—ただしalt属性自体を省略してはいけません。そうしないと、スクリーンリーダーがファイル名を読み上げる可能性があります。
• 情報提供画像のaltテキストは125文字以内に抑えてください。スクリーンリーダーは長い文字列を途中で切ることがあり、簡潔さは聞き取りやすさを高めます。複雑な画像については、短いaltによる要約と、ページ本文内の完全なテキスト説明を組み合わせてください。
• 形ではなく機能を説明する。リンク付き画像や機能的な画像では、altテキストは「何が起こるのか」「どこへ移動するのか」を伝えるべきであり、「画像がどう見えるか」ではありません。情報提供画像では、単なる視覚的内容ではなく、その意味を伝えてください。
• altテキストをワークフローの上流に組み込むのであって、ローンチ後の修正にしてはいけません。CMSで必須項目にし、コンテンツスタイルガイドに含め、QAプロセスに品質レビューを追加してください—自動ツールはaltテキストの欠落を検出できますが、それが意味のあるものかどうかを評価するのは人間です。
• 法的・規制上のリスクは現実であり、増大しています。altテキストの欠如を指摘するADA訴訟は2024年に数千件に上り、EUのAccessibility Actもすでに施行されています。altテキストを後回しにする戦略は、コンプライアンスの観点から成立しません。