Webページのソースコードを表示し、<img>タグを探します。
代替テキストはalt属性に記載されています。

HTMLの例）
<img src=”image.jpg” alt=”犬がボールで遊んでいる”>

Webページのソースコードを表示する方法はいくつかあります。

右クリックのメニューで確認

1. 表示したいウェブページを開く。
2. ページの空白部分を右クリックする。
3. メニューから「ページのソースを表示」を選択する。
4. ソースコードが表示されたら「img」を探してみましょう。

ショートカットキーで確認:

• Windows: Ctrl + U
• Mac: ⌘ Command + U（Safariの場合は⌘ Command + Option + U）

alt属性は、画像の内容を具体的に説明する必要があります。

例えば、上の写真なら「ボールで遊んでいる犬」など、何が写っているのかを明確に伝えます。
写真のキャプションに「うちのワン子」という説明がありますが、キャプションと代替テキスト（alt属性）を同じにするのはNGです。

冒頭でご説明の通り、代替テキストは、視覚障がい者がスクリーンリーダー（音声読み上げ機能）を通してどんな画像がそのページにあるのかを知ることができます。
つまり、キャプションと代替テキストが同じ場合、写真の具体的な内容が想像できないのです。
そのため、画像が持つ重要な情報やコンテキスト（文章の前後関係など）を反映させることが大切です。

また、製品画像の場合は、製品名や特徴を含めるとより伝わりやすくなります。
さらに、「画像」や「写真」といった言葉や不要な情報は省きます。

以下ではalt属性の悪い例・良い例を具体的にご紹介します。

• あいまいな表現
  alt=”花”
  alt=”子供たち”
  どの花か分からない、子供の感情、状況が分からないなど、情報が不足しています。
• キーワードの詰め込みすぎ
  alt=”花、バラ、赤い花、庭”
  不自然で、意味が伝わりにくいです。
• 無関係な情報
  alt=”クリックして詳細を見る”
  画像の内容を説明しておらず、ユーザーにとって無益です。

• 具体的
  alt=”美しい赤いバラの花が咲いている庭”
  alt=”青空の下で遊ぶ子供たち”
  画像の内容が明確で、視覚的な情報を伝えています。
• 関連するキーワードを含む
  alt=”新鮮なオーガニック野菜の盛り合わせ”
  画像の内容を具体的に説明し、SEOにも寄与します。
• コンテキストを考慮した表現
  alt=”2024年の春に咲いた桜の花”
  時期や場所を含めることで、文脈が考慮され、より具体的な情報を提供しています。
  

悪いalt属性の例は情報の不足や不自然さがあるため避けるべきです。
一方、良いalt属性の例は画像の内容を具体的に説明し、アクセシビリティとSEOの両方に貢献します。

これらを意識することで、読み手がすぐに理解できるようになります。すべてのユーザーに対して情報を平等に提供し、コンテンツの質を高めることができるでしょう。

装飾的な画像に関しては、代替テキストは不要です。以下にその理由を説明します。

1. 装飾的な画像の役割の場合
   装飾的な画像は、主にビジュアル的な魅力を高めるために使用され、情報を伝える役割を持たないためです。
   例えば、背景画像やデザイン要素などがこれに該当します。
2. アクセシビリティの向上
   スクリーンリーダー（音声読み上げ機能）を使用しているユーザーにとって、単なる装飾の画像情報はむしろ邪魔になる可能性があります。
   例えば背景画像が単なる装飾であり、情報を伝えない場合、alt属性は設定しない方がよいです。
   この場合、alt属性を空にする（alt=””）ことで、スクリーンリーダーがその画像を無視し、ユーザーが重要なコンテンツに集中できるようになります。
3. 情報を含む背景画像は上記に限らない
   もし背景画像が重要な情報を提供する場合（例えば、インフォグラフィックや特定のデザイン要素が情報を伝える場合）は、その内容を説明するalt属性を設定することが重要です。
4. 不要でも値を空白にしたalt属性を入れる
   画像のタグ（<img>）にalt属性を入れるのはルールのため、「alt=””」のように値を空にして設定しましょう。

画像に関連する属性としてよく使われるのがalt属性とtitle属性です。これらは異なる目的を持っています。