《メディアコンテンツの伝え方 Vol.7》代替テキストのケーススタディ：画像を使ったボタンやリンク、画像化されたテキスト

今回は、前回に引き続きケーススタディとして、さまざまな代替テキストの指定方法について解説していきます。

その前に、前回の記事で出したクイズを振り返ってみましょう。問題は「次のうち、代替テキストを「空（alt=””）」にするのが適切なのはどれでしょうか？」というもので、選択肢は以下の3つでした。

• A. ページのデザイン上の区切り線として入れている罫線の画像
• B. 商品一覧ページへのリンクに使われている「カート」アイコン
• C. フッターにある「X（旧Twitter）」へのリンクアイコン

正解は 「A. ページのデザイン上の区切り線として入れている罫線の画像」 です。

装飾目的だけで意味を持たない画像は、代替テキストを空にするのが適切です。これによりスクリーンリーダーが不要な情報を読み上げず、利用者にとって快適な体験になります。

一方で、Bのカートアイコンは、カートページへのリンクを示す意味を持っているため、適切な代替テキストが必要です。CのフッターのSNSアイコンについても、リンク先を示す重要な役割を持つため、やはり代替テキストが必要です。つまり、「あってもなくても意味が変わらない装飾画像」だけが「空（alt=””）」 の対象となります。

はじめに

前回は、アイコンや罫線の代替テキストについて解説しました。今回は、次の代替テキストの指定方法について解説していきます。

• 画像のみのボタン・リンク
• アイコン画像＋テキストのボタン・リンク
• 画像化されたテキスト

画像のみのボタン・リンク

Webサイトのフッターや記事の末尾には、SNSアイコンが置かれることが多くあります。CodeGridにもX（旧Twitter）とGitHubのアイコンが置かれています。これらはXアカウントへのリンクと、GitHubアカウントへのリンクとなっています。

リンクされている画像は、alt属性値がリンクのテキストの一部となるため、次のHTMLの場合、このリンクのテキストは「X（旧Twitter）」となります。

<a href="https://x.com/CodeGrid"><img src="icon-x.png" alt="X（旧Twitter）"></a>

前後の文脈から「CodeGridのTwitterアカウントへのリンク」であると判断できるのであれば、リンクテキストが「X」や「GitHub」でも十分です。Xアカウントが複数ある場合や、媒体のXアカウントではなく、Xのトップページ（x.com）へのリンクであるなど、文脈から推測しづらい場合は、詳細な文言にしてもよいでしょう。

<a href="https://twitter.com/CodeGrid"><img src="icon-x.png" alt="CodeGridのX（旧Twitter）アカウント"></a>
<a href="https://twitter.com/"><img src="icon-x.png" alt="X（旧Twitter）"></a>

スクリーンリーダーでは、画像の代替テキストとは別に、その対象がリンクなのかボタンなのかといった役割も読み上げられます。例えばVoiceOverでは「リンク・イメージ・CodeGridのX（旧Twitter）アカウント」と読み上げられるため、代替テキストをわざわざ「CodeGridのX（旧Twitter）アカウントへのリンク」とする必要はありません。

画像＋テキストのボタン・リンク

CodeGridの上部にあるナビゲーションの検索ページへのリンクは、虫眼鏡のアイコン画像と「記事検索」というテキストを組み合わせたものになっています。

記事検索のリンクについている虫眼鏡のアイコン画像は、装飾的な意味合いが強く、その画像がなくても意味が変わらないため、alt属性値は空（alt=””）にしています。

<a href="https://...">
  <img src="虫眼鏡.png" alt="">
  記事検索
</a>

もし、このテキストと並ぶ画像に意味がある場合は、適切なalt属性を指定する必要があります。たとえば「新着」や「更新」といった意味を持つ画像です。次の例では、商品一覧ページへのリンクに「新着あり」を示す画像を添えています。

<a href="/products/">
  <img src="list.png" alt="">
  商品一覧
  <img src="new.png" alt="（新着あり）">
</a>

画像とテキストが並ぶようなリンクの場合、かならずしも画像のalt属性値を空にするわけではありません。テキストと並ぶ画像があってもなくても、そのリンクの意味が変わらなければ、画像のalt属性値は空で良いでしょう。ただし、画像がないとそのリンクの意味が変わってしまう場合は、必ず画像にalt属性値を指定するようにしましょう。

画像化されたテキスト

ウェブフォントが一般化する以前は、テキストを画像化して配置するケースが多くありました。そのような「画像化されたテキスト」の場合は、画像内に表示されている文字と同じ内容をalt属性に指定します。

XのCodeGridアカウントでは、毎週の配信内容に加えて、お役立ちTipsを発信しています。Tipsでは過去記事の内容を引用しており、コード例が含まれる場合があります。そのコード例は、長い場合やそのまま本文に載せると見づらいため、画像化して添付します。そのコード例の画像には、コード例の内容をそのまま代替テキストとして指定しています。

上記のポストに添付されている画像に設定された代替テキストは次のとおりです。

コードのスクリーンショット

<video>
  <source src="transparent.mp4" type='video/mp4; codecs="hvc1";'>
  <source src="transparent.webm">
</video>"

「画像化されたテキスト」に関しては、画像に記載されているテキストをそのままalt属性値に指定します。画像に書かれていないものは、alt属性値には指定しません。たとえば、前述のコード例のように、画像内に「About」の文字が書かれている場合、alt属性値には「About」のみを指定します。しかし、alt属性値に「CodeGridについて」と指定するのは誤りです。画像内にある情報以上のものを含めないように気をつけましょう。

ここまでのまとめ

今回の記事では、ウェブサイトにおける画像を使ったボタンやリンク、そして画像化されたテキストに対する適切な代替テキストの指定方法について解説しました。

• 画像のみのボタン・リンク：アイコン画像など、それ単体でリンク先や機能を示す場合は、その目的やリンク先を簡潔に伝える代替テキストが必要です。
• アイコン画像＋テキストのボタン・リンク：テキストとアイコンが併記されている場合、アイコンが純粋な装飾目的で、アイコンがなくてもテキストだけで意味が十分に伝わるのであれば、画像の alt 属性は空（alt=””）にします。しかし、アイコンが「新着」や「更新」といった重要な意味を補足している場合は、代替テキストを必ず指定する必要があります。
• 画像化されたテキスト：画像として表示されているが、本来はテキストでもよいコンテンツ（例：長いコードのスクリーンショットなど）の場合、alt 属性値には画像内に表示されている文字と全く同じ内容を記述します。画像に書かれていない情報を含めないように注意が必要です。

代替テキストの指定は、単に画像の内容を説明するだけでなく、その画像がウェブページ全体の中でどのような役割を果たしているか、どのような文脈で使われているかを深く理解し、 「その画像がなくてもページの意味が変わらないか」 という視点で考えることが大事です。

おまけ：確認クイズ

記事の内容を理解できたかどうか、簡単なクイズでチェックしてみましょう。

次のうち、代替テキストを「空（alt=””）」するものはどれでしょうか。

• A. サイトのフッターにある、単独で「GitHub」のロゴが表示されており、GitHubアカウントへのリンクとなっている画像
• B. ウェブサイトのグローバルヘッダ内にある、会社ロゴの画像と並んで会社名がテキストで記述されている場合のロゴ画像
• C. オンラインショップで、商品一覧ページへのリンクの横に「New!」という文字が画像化されて表示されており、「新着商品がある」ことを示している画像

回答と解説は、次回の記事でご紹介します。どれが適切なのか、考えてみましょう。

執筆

＜過去記事はこちら＞

• 《Vol.1》 その画像、ちゃんと伝わっている？　コンテンツ運用におけるアクセシビリティの考え方
• 《Vol.2》 Webサイトやアプリにおける画像の代替テキスト
• 《Vol.3》 Web以外での画像の代替テキスト
• 《Vol.4》代替テキストを指定する
• 《Vol.5》代替テキストはどう書けばいい？　具体例とAI活用のヒント
• 《Vol.6》代替テキストのケーススタディ：アイコンや罫線の指定方法