Google、ロゴとボタンの代替テキストについて説明

公開: 2022-11-01

Google Search Off the Record ポッドキャストで、Google の Lizzi Sassman と John Mueller が、ロゴと画像ベースのボタンの代替テキストを処理する最善の方法について話し合います。

ロゴとボタンに alt 属性を追加するためのベストプラクティスがあります。

ルールは最初は少し複雑に見えるかもしれませんが、実際には理解するのは簡単です。

alt 属性を適切に設定することはユーザーにとって良いことであり、長期的には収益にもつながります。

機能画像への代替テキストの追加

Lizzi Sassman は、Web ページ上で機能的な目的を持つ画像である機能的な画像を参照することから議論を開始します。

彼女は、ボタンがアイコンである状況でボタンが何をするのか、またはボタン上のイメージが何なのかを代替テキストで説明する必要があるかどうかを尋ねます。

最後に、ボタンなどの機能的な画像に代替テキストを追加することに SEO の目的があるかどうかを尋ねます。

「リジー・サスマン：
…ビジュアルアセットに費やす注意のレベルと同様に、そのアセットを説明する言葉にも同じレベルのエネルギーを注ぐ必要があります。素晴らしいと思います。
画像のもう 1 つのカテゴリは、機能的なもののようなもので、ボタンになることもあります。
何かの機能も兼ねたグラフィックみたいな。
では、代替テキストはこれから何が起こるかを教えてくれるはずですか?

これをクリックすると、ここに移動しますか？
ボタンとしても機能する何かのイメージのようなものかもしれません。
そして、あなたは機能を説明していますか、それともそうでしたか、わかりません… 矢印の絵のように？
また、それはSEOにとって重要ですか？
ジョン・ミューラー:
うん。おもう…
リジ・サスマン：
ロゴのようなものかもしれません。
ジョン・ミューラー:
アクセシビリティについては、おそらくそれを回避することは理にかなっています。
しかし、SEO に関しては、人々はチェックアウトボタンなどを検索することはありません。」

ボタンの代替テキストは SEO ではなくアクセシビリティのためのものです

John Mueller は、代替テキストをボタンに追加することに SEO の目的がないことを明確にしています。

しかし、彼はまた、これらの種類の画像の代替テキストは主にアクセシビリティ上の理由によるものであることにも気付きました。

リジは議論を続けました：

「リジー・サスマン：
…でも、おそらく彼らはロゴ、またはロゴのようなものを望んでいます. クリックすると、ホームページか何かに移動します。
しかし、それはまた、「ああ、これはロゴだ」ということでもあります。
「これは Google 検索セントラルのロゴです」と言いますか。
ジョン・ミューラー:
もちろん。
リジ・サスマン：
または、説明テキストのように。
ロゴの中は Googlebot ですが、画像について知っておくべき最も重要なことは、それがロゴであるという事実ですか?

それともロゴはどのように見えますか？
そういう意味ではロゴを探している人も多いのではないでしょうか。
ジョン・ミューラー:
うん。
リジ・サスマン：
X社のロゴは何ですか？
ジョン・ミューラー:
うん。つまり、私たちが避けようとしている戦略に戻るということです。
あなたは何のために見つけられたいですか？
リジ・サスマン：
ええ、でもそれが最も重要な質問だと思います。
私はこれらすべてのうさぎの穴に夢中になることができるので、私たちが考えるべきことの優先順位を、私にはわかりません.私は推測する。"

ロゴとボタンでの代替テキストの適切な使用

ロゴなどの画像に代替テキストを使用する正しい方法は、画像がリンクであるかリンクではないかによって異なります。

ロゴ画像がホームページへのリンクとして機能する場合、スクリーンリーダーを使用するサイト訪問者がこのロゴがホームページへのリンクであることを拒否できないように、その画像にその機能を示すラベルを付けるのは正しいことです。

公式の HTML 標準作成団体である World Wide Web Consortium (W3C) は、ロゴの処理方法に関する説明書を公開しています。

ロゴホームページリンク

ホームページリンクとして機能するロゴには、ロゴがホームページリンクであることをスクリーンリーダーのユーザーに伝える代替テキストを含める必要があります。

W3C では、次のコード例を使用しています。

 <a href="https://www.w3.org/">
<img src="w3c.png" alt="W3C ホーム">
</a>

上記のコードは、ホームページへのリンクとしても機能するページの上部に表示されるロゴ用です。

W3C が提供する alt テキストの例では、単に「W3C ホーム」と表示されていますが、必要に応じてより説明的なものにすることもできます。

ロゴとテキストのホームページリンク

他の種類のロゴリンクがあり、イメージロゴとテキストがそのすぐ隣または下にあり、イメージとテキストの両方が同じリンクコード内にコード化されています。

つまり、ロゴへのリンクとテキストへのリンクのような 2 つのリンクはなく、ロゴとテキストの両方へのリンクが 1 つだけです。

その場合、テキストはリンクの機能を説明しているため、ロゴリンクの機能を繰り返すことになります。

したがって、その場合のベストプラクティスは、null 代替テキストを使用することです。

これは、W3C が提供する例です。

 <a href="https://www.w3.org/">
<img src="w3c.png" alt=""> W3C ホーム
</a>

画像の alt 属性がどのようにコーディングされているかに注意してください。

 img src="w3c.png" alt=""

代替テキストの空の引用符は、null 代替属性 (または null 代替テキスト) と呼ばれます。スクリーンリーダーは単純にスキップします。

null の alt テキストが適切な理由は、リンク機能が何であるかを説明するテキストがあるためです。

W3C ホーム

アイコンリンクの代替テキスト

場合によっては、リンクがアイコンの形式であり、その機能を説明するテキストがないことがあります。たとえば、封筒 (電子メールまたはメッセージを表す) やプリンター (リンクがプリンターをアクティブにすることを示す) の形式のアイコンです。

このような状況では、画像が何であるか (封筒やプリンターなど) を説明するのは悪い習慣です。

ベストプラクティスは、画像が何をするかを説明することです (電子メールを開始したり、Web ページを印刷したりします)。

W3C では、次のコードと代替テキストを含むプリンターアイコンの例を使用しています。

 <a href="javascript:print()">
<img src="print.png" alt="このページを印刷する">
</a>

ご覧のとおり、プリンターの形をしたアイコンには、代替テキストとして「このページを印刷する」という言葉があります。アイコンが何をするかを示します。それは役に立ちます。

ボタンの代替テキスト

アイコンの例と同様に、ボタン画像の代替テキストは画像の機能を説明する必要があります。

W3C では、送信ボタンに虫めがねのある検索ボックスの例を使用しています。

悪い方法は、代替テキストを使用して、画像が虫眼鏡であることを説明することです。

ベストプラクティスは、代替テキストを使用して画像の機能を説明することです。

これは、W3C が例として示しているサンプルコードです。

 <input type="image" src="searchbutton.png" alt="検索">

ご覧のとおり、検索ボタンの代替テキストは「検索」という単語で、ボタンの機能を説明しています。

ボタンとロゴの代替テキスト

Lizzi と John は、ロゴとボタンのさまざまなシナリオを処理する方法の詳細には触れませんでした。

ただし、John は、ボタンやロゴの代替テキストに SEO の価値はなく、アクセシビリティのためであることを指摘しました。

スクリーンリーダーを使用して Web ページにアクセスするユーザーに機能する Web ページを適切に提供することをお勧めします。

前述のように、スクリーンリーダーを使用する人は、お客様またはビジネスや Web サイトの支持者である可能性があります。

したがって、アクセシビリティのベストプラクティスを使用することは、最終的には良いことです。

引用

W3C でのボタンとロゴのアクセシビリティの詳細

機能画像

同じリソースの隣接する画像とテキストのリンクを組み合わせる

送信ボタンとして使用される画像に alt 属性を使用する

15:57 分の時点で Search Off the Record Podcast を聞いてください。

Shutterstock/Evgeny Atamanenko の主な画像