altテキスト完全ガイド：アクセシビリティとSEOのための実践テクニック

2025年12月14日 最終更新日時 : 2025年12月14日 エバープレイ編集部

altテキストとは何か — 基本概念

altテキスト（代替テキスト）は、HTMLのimg要素に付与するテキストであり、画像の内容や意味を言語化して伝えるための短い説明です。視覚に障害のあるユーザーがスクリーンリーダーを通じて画像の情報を受け取るために重要であるだけでなく、画像が読み込めない場合やクローラーが画像の内容を理解する際にも使われます。WCAG（Web Content Accessibility Guidelines）では、非テキストコンテンツに対して適切な代替手段を提供することが求められており、altはその代表的な手段です（WCAG 2.1 成功基準 1.1.1 Non-text Content）。

なぜaltテキストが重要なのか — アクセシビリティ、法的側面、SEO

  • アクセシビリティ: スクリーンリーダーはaltテキストを読み上げることで、視覚障害者に画像の情報を伝えます。適切なaltがないとコンテンツの理解が損なわれます。
  • 法的リスク: ウェブアクセシビリティ要件を満たしていないことを理由に、各国で訴訟や行政指導の対象になることがあります。日本ではJIS X 8341-3（ウェブアクセシビリティ基準）があり、WCAGに準拠した検討が求められます。
  • SEO（検索エンジン最適化）: 検索エンジンは画像自体の内容を完全には理解できないため、altを参照して画像の意味を把握し、画像検索やページ評価に利用します。ただし、キーワードの詰め込みは逆効果です。

altテキストの基本ルール

  • 画像の目的を優先して書く（装飾、情報伝達、機能的なボタンなど）。
  • 装飾目的の画像は空のalt属性を使う（alt=''). これによりスクリーンリーダーは画像をスキップします。
  • 情報を含む画像には簡潔で具体的な説明を記述する。過度に長い説明は避けるが、必要ならば長い説明への参照（長い説明ページやaria-describedby）を用意する。
  • 同じページ内で同一の画像が多数あり、かつ役割が同じなら同一のaltで問題ないが、文脈が異なればaltも変える。
  • title属性はスクリーンリーダーで必ず読まれるわけではないため、重要な情報はaltで提供する。

具体例で学ぶ：良いalt／悪いalt

  • ロゴ画像
    • 悪い例：alt='logo' または alt='会社名のロゴ　青'（意味が薄く不親切）
    • 良い例：alt='ABC株式会社ロゴ'（文脈でリンクになっている場合は 'ABC株式会社のホームへ' のように機能を説明する）
  • 商品写真
    • 悪い例：alt='写真1'、alt='赤い靴'（曖昧）
    • 良い例：alt='レディース赤スエードパンプス、ヒール高5cm、サイズ23.5cm'（必要な情報を簡潔に）
  • グラフ・チャート
    • 悪い例：alt='グラフ'（無意味）
    • 良い例：alt='2024年の売上推移を示す折れ線グラフ。1月に100万円、6月に300万円、12月に500万円で最高値'（要点をテキストで補足）
    • さらに詳細が必要な場合は、aria-describedbyや
      内の
      、別ページの詳細説明へリンクする。
  • 装飾画像
    • 良い例：alt=''（空にすることでスクリーンリーダーは無視する）
    • role='presentation' を同時に使うケースもあるが、alt=''で十分なことが多い。

長い説明が必要な画像（インフォグラフィック、複雑な図表）の扱い

複雑な情報を含む画像は短いaltで要旨を示し、詳細は別途テキストで提供するのがベストプラクティスです。HTML5で非推奨となったlongdesc属性の代替としては、以下の方法が使えます。

  • altに要約を入れ、画像の直後に
    と
    で詳細を記載する。
  • aria-describedby属性で詳細説明の要素IDを参照する。
  • 画像の詳細を専用ページにまとめ、altやキャプションでそのページへのリンクを提供する。

国際化と多言語対応

サイトが複数言語に対応している場合、altテキストも表示言語に合わせて翻訳することが重要です。HTMLのlang属性を適切に設定し、画像ごとにその言語に即したaltを用意すると、スクリーンリーダーが適切な発音で読み上げられます。

技術的注意点と属性の使い分け

  • alt属性：img要素に必ず存在すべき。意味のない装飾画像は空文字列に。
  • title属性：補助的情報に使うが、支援技術で常に読み上げられる保証はないため重要情報は入れない。
  • aria-label / aria-labelledby / aria-describedby：HTMLによる表現が不十分な場合や、非img要素で画像的な役割を持たせる場合に使用する。例：CSS背景画像だけで情報を伝えてしまうとスクリーンリーダーに届かないため、代替手段を提供する必要がある。
  • role='img'：img以外の要素に画像的な意味を持たせたい時に使用し、併せてaria-labelなどで代替テキストを与える。

SEOの観点：altはどれほど効くか

altは画像検索やページの文脈理解に役立ちます。Googleなどの検索エンジンはaltや周囲のテキスト、ファイル名、構造化データ（ImageObject）を総合して画像の意味を把握します。ただし、altにキーワードを不自然に詰め込むとスパムと判定される可能性があり、ユーザー体験を損なうため避けるべきです。画像の最適化はaltだけでなく、適切なファイル名、レスポンシブ画像（srcset）、画像サイズの最適化、構造化データの併用が有効です。

CMS（例：WordPress）での運用のコツ

  • 画像をアップロードする際、必ずaltフィールドに意味のあるテキストを入力する習慣をつける。
  • テーマやプラグインが自動でaltを挿入することがあるが、自動生成は意味が不十分なこともあるため見直す。
  • 大量の画像を扱う場合は、altの付与をワークフローに組み込み、編集ガイドラインを作る。

検査と監査：ツールと実践方法

自動検査ツール（Lighthouse、WAVE、axeなど）はalt属性の有無や空欄のチェックに役立ちますが、テキストの質（内容が適切かどうか）は自動で判断できません。必ず実人によるチェックや、スクリーンリーダー（NVDA、VoiceOver、TalkBackなど）での実使用確認を行ってください。ユーザーテストで実際の利用者の声を反映するのが最も確実です。

実務で使えるチェックリスト

  • altがすべてのimg要素に存在するか（装飾はalt=''で）
  • altが画像の機能／情報を反映しているか（曖昧な語は避ける）
  • 長い説明が必要な場合に、代替手段（caption、aria-describedby、詳細ページ）があるか
  • 言語属性が正しく設定されているか（多言語のaltを用意しているか）
  • 自動生成のaltが品質基準を満たしているか（必要なら編集）

よくある誤解と落とし穴

  • altがSEO対策の万能薬だと思うこと：altは重要だが、過剰なキーワード挿入はペナルティやユーザー信頼の低下につながる。
  • 空のalt＝手抜きと考えること：装飾画像にalt=''は正しいアクセシビリティ対応であり、無駄なノイズを除くために推奨される。
  • 自動ツールだけで品質が担保されると考えること：altの「質」は人が判断する必要がある。

まとめ（実践要点）

altテキストは単なる属性ではなく、情報のバリアフリー化に直結する重要な要素です。短くても具体的に、画像の目的と文脈を優先して記述してください。装飾画像は空のaltを使い、複雑な図やインフォグラフィックは要約＋詳細説明で対応します。SEOの効果も期待できますが、ユーザー体験とアクセシビリティを第一に考えた書き方が最終的には最も効果的です。

参考文献

カテゴリー
IT
前の記事
コンプライアンス教育の重要性と実践ガイド：企業で成果を出す設計法New!!
2025年12月14日
次の記事
監査対応の実務ガイド：準備から是正・継続的改善までの完全対策New!!
2025年12月14日