0Pricing
HTML Academy · レッスン

画像のaltテキストはいつ、どのように使うか

装飾目的でない画像の意味を伝えるaltテキストを書きます

「画像のaltテキストはいつ、どのように使うか」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

altテキストとは

alt属性は、画像の代替テキストを提供します。

  • 画像の代わりにスクリーンリーダーで読み上げられます
  • 画像の読み込みに失敗したときに表示されます
  • 検索エンジンによってインデックスに登録されます
  • WCAG準拠に必要です

黄金律

altテキストでは、視覚のあるユーザーが画像から得る情報または画像の機能と同じものを伝える必要があります。

<!-- The test: if you removed this image,
     would the alt text give you the same information? -->

<!-- BAD: not descriptive -->
<img src="chart.png" alt="Chart">

<!-- GOOD: conveys the information -->
<img src="chart.png" alt="Bar chart showing 48% revenue increase from Q1 to Q4 2024">

情報を伝える画像

情報を伝える画像では、その内容を説明します。

<img
  src="signup-flow.png"
  alt="Five-step signup flow: Email → Profile → Plan → Payment → Confirmation"
>

<!-- Describe what the image shows, not what it is -->
<!-- BAD: 'Image of a graph' -->
<!-- GOOD: 'Line graph showing download growth from 10k to 150k per month' -->

装飾画像：空の alt

純粋に装飾目的の画像には、読み飛ばせるように空のaltを指定します。

<!-- Decorative separator -->
<img src="divider.png" alt="">

<!-- Icon beside text that already describes it -->
<img src="warning-icon.svg" alt=""> <span>Payment failed</span>
<!-- The icon duplicates the adjacent text — empty alt is correct -->

<!-- Never omit alt entirely — missing alt attribute is an error
     Empty alt="" = intentionally decorative
     Missing alt = unknown, screen readers may read the filename -->

機能を持つ画像

機能を持つ画像では、見た目ではなく機能を説明します。

<!-- Logo that links to home -->
<a href="/">
  <img src="logo.svg" alt="CoddyKit — Go to homepage">
</a>
<!-- Describes the destination, not the logo's appearance -->

<!-- Submit button using an image -->
<input type="image" src="submit.png" alt="Submit registration form">
<!-- Describes what happens when activated -->

複雑な画像：図と長い説明

複雑なグラフや図には、短いaltだけでは不十分な場合があります。

<figure>
  <img
    src="complex-diagram.png"
    alt="Network architecture diagram — see the description below"
    aria-describedby="diagram-desc"
  >
  <figcaption id="diagram-desc">
    <p>The diagram shows three tiers: a client layer with browsers and mobile apps,
       a middle tier with load balancers and app servers,
       and a data tier with primary and replica databases.</p>
  </figcaption>
</figure>

テキストを含む画像

テキストを画像にするのは避けます。どうしても使用する場合は、altをテキストと完全に一致させる必要があります。

<!-- Logo with text 'CoddyKit' -->
<img src="text-logo.png" alt="CoddyKit">

<!-- Promotional banner with text 'Save 50% this week only' -->
<img src="promo.jpg" alt="Save 50% this week only">

<!-- Better: use real HTML text styled with CSS
     Images of text fail at zoom and high contrast modes -->

コンテキストによって変わるalt

同じ画像でも、コンテキストによって異なるaltテキストが必要になる場合があります。

<!-- As part of an article about dogs: -->
<img src="golden.jpg" alt="Golden retriever fetching a yellow tennis ball">

<!-- As a product photo for 'Golden Retriever Dog Toy':
<img src="golden.jpg" alt="Golden retriever playing with our premium fetch toy">

<!-- As a decorative header image:
<img src="golden.jpg" alt=""> -->

altテキストの長さ

altテキストの長さに関するガイドライン：

  • 簡潔にする — 「Image of」や「Photo of」から始める必要はありません
  • 125文字未満を目安にする（125文字で省略するスクリーンリーダーもあります）
  • 複雑な画像には、簡潔なaltと、詳細な説明を示すaria-describedbyを使用する
  • キーワードを詰め込まない — 人が読むことを意識して書く

altテキストのテスト

altテキストをテストする方法：

  • ブラウザーで画像を無効にする（Firefox：Tools → Page Style → No Style）
  • WAVEツールを使用して、すべてのaltテキストを一度に確認する
  • VoiceOver/NVDAで読み上げを聞き、何がアナウンスされるか確認する
  • Lighthouseを実行する：Accessibility → Image elements have [alt] attributes

SVGとアクセシブルネーム

インラインSVGでは、別の方法でアクセシブルネームを提供します。

<!-- Standalone SVG with title: -->
<svg role="img" aria-labelledby="icon-title">
  <title id="icon-title">Settings</title>
  <!-- SVG paths -->
</svg>

<!-- Decorative SVG: -->
<svg aria-hidden="true">
  <!-- paths -->
</svg>

確認

純粋に装飾目的の画像には、どのalt値を指定すべきですか。

まとめ：altテキスト

altテキストで重要な点：

  • 必ずalt属性を含め、装飾画像にはalt=""を使用する
  • 見た目ではなく、情報を説明する
  • 機能を持つ画像では、操作や移動先を説明する
  • 複雑な画像には、短いaltと完全な説明を示すaria-describedbyを使用する
  • テキストを含む画像では、altをテキストと完全に一致させる

よくある質問

「画像のaltテキストはいつ、どのように使うか」レッスンは無料ですか？

はい。「画像のaltテキストはいつ、どのように使うか」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「画像のaltテキストはいつ、どのように使うか」で何を学びますか？

装飾目的でない画像の意味を伝えるaltテキストを書きます ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「画像のaltテキストはいつ、どのように使うか」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. アクセシビリティが重要な理由とWCAGレベル
  2. スクリーンリーダーのための見出し階層
  3. 画像のaltテキストはいつ、どのように使うか
  4. キーボード操作とフォーカス順序
← HTML Academyに戻る