web-dev-qa-db-ja.com

画像付きのHTMLリンクは、title属性とalt属性の両方を持つ必要がありますか？

ハイパーリンクのタイトルタグと画像のaltタグを使用するのが一般的に最良の方法であることを理解しています。これは、いくつかの理由で役立ちます。低帯域幅ユーザー向けの追加情報、支援技術向けの追加情報、検索エンジンからの検索結果の表示の向上など。

私の質問は、画像がハイパーリンクである場合です。

<a href="google.com><img src="google.gif"/></a>

タイトル属性でそれを行うべきか

<a href="google.com" title="Google"><img src="google.gif"/></a>

またはimg altタグ

<a href="google.com"><img src="google.gif" alt="Google/></a>

または両方で

<a href="google.com" title="Google"><img src="google.gif" alt="Google"/></a>

または両方に両方がある

<a href="google.com" title="Google" alt="Google"><img src="google.gif" title="Google" alt="Google"/></a>

Qaサイトからここに移動しました。閉じた。

usabilityaccessibilityhtmlhyperlinkstitle
8
Michael Durrant

両方

ただし、画像内のalt説明は、リンクの説明であり、画像自体ではありません。

から ペンの状態でのアクセシビリティとユーザビリティ：HTMLのイメージALTタグのヒント

「ALTタグ」という用語は、IMGタグ内のALT属性を参照するために使用される一般的な省略表現です。

  • 画像を使用する場合は、必ずIMGタグ内にALTタグまたはALTテキストを含めてください。そうすることで、スクリーンリーダーのユーザーに画像の明確な代替テキストが提供されます。 WCAG 2.0ガイドライン1.1.1.—「ユーザーに提示されるすべての非テキストコンテンツには、同等の目的を果たす代替テキストがあります。」
  • ALTタグの説明は、Webページのコンテキストで、特に次のように意味を持つ必要があります。
    • リンクとして使用される画像には、画像自体ではなく、リンクのリンク先を説明する代替（または「alt」）テキストが必要です。
    • 頭字語を含む代替テキストは、文字の間にスペースを入れて書く必要があります。たとえば、（スクリーンリーダーで「ITS at PSU」と読む）が（「It's at Sue」と読む）よりも望ましいです。
    • スペーサーとして、またはツールバーで使用される画像には、空のALTタグ（つまり）が必要です。スクリーンリーダーは、ALTタグが空の画像を単にスキップします。
    • ページのメインテキスト内に既にテキストの説明が含まれている画像には、サマリーALTタグを付けることができます。
  • ビジュアルブラウザーにツールチップを提供する場合は、ALTタグに加えてTITLEタグを使用します。これは、ほとんどのブラウザーでサポートされているためです。例えば：
  • Altテキストの長さに公式の長さの制限はありませんが、JAWSスクリーンリーダー内の制限のため、多くの専門家は125文字以下を推奨しています。 JAWSの多くのバージョンでは、長いテキストトラクトが125文字のブロックに分割されるため、ユーザーを混乱させる可能性があります。
  • チャート、方程式、図などの特に複雑な画像の場合、拡張テキストの説明へのリンクも含める必要があります。
  • ボタンまたはラベルとして使用される画像は、オーディエンスの大部分（おそらく12ピクセル/ポイント以上）が読み取り可能なフォントを使用する必要があります。
  • 場合によっては、装飾またはレイアウト関連の画像を、HRやDIVなど、背景色を変更して背景画像を指定するスタイル付きHTML要素に置き換えることができます。

上記の記事は、画像リンクでのaltの使用法を明確に説明しています。ただし、元の記事のタイトル部分は不完全ですが、リンクのtitleはこれに役立つだけでなく、読みやすさとSEOの向上。

追加の懸念

上記に加えて、titleのみに依存しないでください。 The title attribute を参照してください。

タイトル属性に依存することは、現在のところ推奨されていません。多くのユーザーエージェントは、この仕様で必要とされるアクセス可能な方法で属性を公開していません（たとえば、マウスなどのポインティングデバイスにツールチップを表示させる必要があるため、キーボードのみのユーザーと現代の携帯電話やタブレットを持っている人など、タッチのみのユーザー）。

しかし...それを追加しないことで、あなたはこれを得る：

この属性が要素から省略されている場合は、title属性が設定されている最も近い祖先のHTML要素のtitle属性もこれに関連していることを意味します素子。属性を設定すると、これが上書きされ、祖先の助言情報はこの要素に関連しないことが明示されます。属性を空の文字列に設定すると、要素に助言情報がないことを示します。

要するに

可能な限り両方の要素を使用する必要がありますが、従う必要のある仕様と特別なルールがいくつかあります

7
Devin