ALTテキストは、リンクでもある画像に対してどのようにすべきですか？
画像alt=""テキストには、ページのコンテキストでその画像に関する情報が含まれている必要があります。たとえば、スケートボード上の猫に関する記事と、スケートボード上の猫の写真がある場合、おそらくそれをalt="Fluffy pulling some mad tricks on his pimped-out board"の代替テキスト。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
しかし、その画像がページ（Wikipediaの猫のページなど）へのリンクである場合はどうなりますか？
スクリーンリーダーはtitle属性が存在する場合にそれを無視するため、ここでalt属性を使用しても意味がないと思います。title属性が表示されるのは、画像にカーソルを合わせるマウスユーザー。キーボードのみのユーザーも除外されます。この状況でタイトルを含めることは、アクセシビリティにとって実際には何のメリットもありません（全体的にtitle属性は少し役に立たないです）。
では、この場合、画像のALTテキストは何を言うべきですか？
WCAGガイドライン1.1 の状態：
非テキストコンテンツの代替テキストを提供して、大判の印刷物、点字、音声、記号、またはより単純な言語など、人々が必要とする他の形式に変更できるようにします。
したがって、cat article page on Wikipediaの代替テキストを与えることは正しくありません。これは画像を説明していないためです。また、skateboarding cat image that links to the wikipedia articleもそうではありません。代替テキストは、関連付けられているリンクではなく、画像自体を参照する必要があるためです。
HTML5（Candidate Recommendation）には、「 画像の代替として機能するテキストを提供するための要件 」というセクションが含まれ、「 画像のみを含むリンクまたはボタン "：
ハイパーリンクである
a要素、またはbutton要素にテキストコンテンツはないが1つ以上の画像が含まれている場合、alt属性にテキストを含めて、一緒にリンクまたはボタンの目的を伝えます。
（HTML5：代替テキストを提供するためのテクニック（草案）には ほぼ同じテキスト があります。）
したがって、altのコンテンツは画像ではなく、リンクのターゲットを記述する必要があります。
WCAG 2.0のテクニック（草案）には、テクニック " H30：アンカー要素のリンクの目的を説明するリンクテキストを提供する "が含まれています。
画像がリンクの唯一のコンテンツである場合、画像の代替テキストはリンクの独自の機能を説明します。
したがって、この特定の手法（これは情報提供であり、規範ではありません！）は同意します。
私見これは多くの（ほとんど？）ケース（たとえば、HTML5仕様で与えられた例の場合）では理にかなっていますが、この要件がユーザーエクスペリエンスの低下につながるケースがあると思います。
たとえば、画像のみを含むブログ投稿。この画像は高解像度バージョンにリンクされています。リンクは画像ファイルを直接開き、HTMLページは含まれません。
<a href="mona-Lisa_high-res.jpg">
<img src="mona-Lisa_medium.jpg" alt="…" />
</a>
HTML5要件に従うと、altコンテンツは次のようになります
「モナリザ」の高解像度JPG
ただし、img要素にはリンクのターゲットを説明する代替テキストを含める必要があるため、画像の実際のコンテンツがテキスト形式で提供されることはありません。ただし、この高解像度の画像にはHTMLドキュメントの一部ではないため、代替テキストを含めることはできません。
画像のみのリンクを追加するときは注意が必要だと思います。リンクされた場合とリンクされていない場合の画像の代替テキストが異なる場合は、リンクのターゲットが画像を説明していることを確認する必要があります。そうでない場合（たとえば、直接ファイルリンクの場合）、次のように設定を変更する必要があります。
- 画像に直接リンクするのではなく、この画像を含むHTMLページにリンクしてください
- 画像自体をリンクせず、別のテキストリンクを追加する
- リンクに画像だけを含めるのではなく、代わりに説明テキストを追加します（「画像のみ」は含まれなくなります）
解決しようとしている問題を言い換えると、スクリーンリーダー（または画像が表示されない別の種類のブラウザ）を持っているユーザーに、リンク先を通知できるようにする必要があります。私はあなたがより大きな問題を実際に解決しようとしていることを忘れていたと思います：あなたはすべてのユーザーがあなたのリンクがどこに向かっているのかを知ることができるようにしたいです。
通常、これを行うには、リンクの本文にリンクのターゲットを記述します。この件について 前の記事 を書きました。 BBC News はそれについて書いた。 私が女王と握手している写真はここをクリック 。 「リンクテキスト」ではなく、「リンク本文」と言ったことに注意してください。リンクが画像の場合、それもユーザーに何を期待するかを伝える仕事をしなければなりません。
あなたの例では、Fluffyの写真から、リンクが彼に関する詳細情報に移動することは明らかですが、Wikipediaに移動することは明らかではありません。
リンク本文が画像であり、リンク先の画像から明確であり、代替テキストが画像を説明している場合、代替テキストからも明確でなければなりません。代替テキストは、リンク先の説明extraを行う必要はありません。一方、リンクの本文が画像で、リンク先がnot明確でない場合は、リンクのキャプションも追加する必要があります画像が表示されるユーザー。
あなたの例では、Fluffy skateboardingがあり、リンク本文のキャプションinsideとして「Fluffy is featured on Wikipedia」というテキストを含めることができます。これを行うと、すべてのユーザーにキャプションが表示されるため、代替テキストstillで特別な操作を行う必要はありません。
何らかの理由で、画像を見ることができるユーザーにリンクターゲットを明確にしたくない場合-多分あなたは説明文がページを乱雑にし、使いやすさよりも可愛らしさがあなたにとって重要であるかもしれません-あなたはそうかもしれませんaタグのtitle属性（imgタグの属性ではない）を使用して追加情報を追加したいと思った。これはスクリーンリーダーには役に立たないので、気にしないでください。 この記事は失敗の仕方を示しています （これは本物のリンクです）、CSSを使用してスクリーンリーダーやその他のテキストブラウザーに追加のテキストを表示し、グラフィカルには表示しないというひどい回避策について説明していますブラウザ。ブルール。しかし、要点は、この手法を使用する場合、リンクstillは代替テキストを変更する必要がないことです。代替テキストは、画像と非表示のキャプションでリンク先を説明します。
要約すると、この質問は「画像がどこにリンクされているかをユーザーに知らせるにはどうすればよいですか？」という質問の特別なケースにすぎません。ナビゲーションからのユーザーの視点を考えることにより、これを行う3つの方法を優先順に思い付きました。
- わかりやすい画像を選択し、代替テキストを使用して画像を説明します。
- 画像からわかりにくい場合は、画像とリンクの関係を明確にするキャプションを（リンク本文の内側に）追加し、代替テキストを使用して画像を説明します。
- レイアウトの制約によりキャプションを追加できない場合は、テキストブラウザとスクリーンリーダー専用のリンクを説明する非表示のキャプションを追加し、代替テキストを使用して画像を説明します。
どちらを選択しても、文字通りの質問に対する答えは同じです。代替テキストは常に画像を説明または表す必要があります。
必要に応じて、この階層はGUIでのボタンの設計と同じです。最適なオプションは、ボタンの機能を明確にすることです。次に、ツールチップを追加することを検討します。最後の手段として、ヘルプファイルまたはマニュアルで説明します。
したがって、あなたの例を要約すると、ウィキペディアの記事をユーザーに明らかにする方法を考えることから始めます。 Wikipediaのページで同じ写真を使用している場合でも、Fluffyの写真がWikipediaにリンクすることは完全に自明ではありません。だからウィキペディアへの写真リンクを作らないでください。ウィキペディアアイコン（および代替テキスト「ウィキペディア」）を使用して、他の場所にあるウィキペディアへのリンクを持っているか、ページのコンテキストにあるFluffy写真のスクリーンショット（および代替テキスト「猫のウィキペディアの記事で紹介されているフルフィ」または類似）。このように、表示または非表示の説明キャプションを使用する必要はありません。また、スクリーンリーダーのユーザーだけでなく、すべてのユーザーにとってユーザーエクスペリエンスが向上しています。必要に応じて、ふわふわの写真を含めることもできますが、リンクである必要はありません。
画像は実際に、周囲のテキストではまだ利用できない追加の（貴重な）情報を提供していますか？質問の例では、画像を囲むテキストは、猫がスケートボードでトリックを引くのが好きな方法を説明しています。添付の画像には、ほとんど同じ内容の別の説明は必要ないと思います。それは冗長です。
WCAGが画像を説明する代替テキストを提供する必要性について話すとき、それは実際には画像と同じ目的を果たす代替テキストを提供することを意味します。このコンテキストでの画像の主な目的はリンクとして機能することだと思うので、画像のコンテンツではなく、リンクのターゲットを記述するためにalt属性を使用します。