リンク内の画像の代替テキスト

Silktide は、画像を含んでいるものの、読み取れる種類のテキストがないリンクを検出します。このようなリンクには名前がないため、画像を見ることができない人には、リンク先を知る方法がありません。

<!-- 問題: リンクにアクセシブルな名前がない -->
<a href="/apple">
    <img src="apple.png">
</a>

<!-- 修正後: 代替テキストでリンクの名前を示している -->
<a href="/apple">
    <img src="apple.png" alt="赤いリンゴ">
</a>

重要な理由

リンクのコンテンツが画像だけの場合、画像のがリンクの名前になります。これがないと、は「リンク」のように読み上げるか、リンク先の URL や画像ファイル名を読み上げますが、どれもリンク先を聞き手に伝えるものではありません。ロゴやアイコンメニューなど、画像リンクで構成されたナビゲーションは推測に頼ることになります。

キーボードや音声コントロールのユーザーも影響を受けます。名前のないリンクは音声コマンドで指定するのが難しく、リンク一覧の中では意味を持ちません。

修正方法

画像に、画像の見た目ではなく、リンクの目的（リンク先や実行する操作）を説明する代替テキストを追加します。リンクになっているロゴなら、「ロゴ」よりも「ホーム」または組織名のほうが適切です。
または、画像の横にリンク内の見えるテキストを追加します。この場合、画像の alt="" は空にできます。
複数のページで同じラベルのないアイコンリンクが繰り返されている場合は、のテンプレートを修正します。

Silktide によるテスト方法

リンク内にあるすべての画像を検出します。ただし、スクリーンリーダーから隠されているリンクは除外します。
に対してリンクが公開しているすべてのテキストを読み取ります。これには、リンク内にあるすべての要素の代替テキストも含まれます。
それらを組み合わせたテキストに文字や数字が含まれておらず、リンクに使用可能な名前がない場合、その画像を報告します。

他の代替テキストのチェックとは異なり、ここでは空の alt="" は合格になりません。画像がリンクの唯一のコンテンツである場合、画像を装飾用として指定するとリンクに名前がなくなるためです。

トラブルシューティング

画像が装飾用である

他のテキストがないリンク内の画像は、純粋なとして扱うことができません。リンクの名前を示す何らかの情報が必要です。画像にリンク先を説明する代替テキストを付けるか、リンクに見えるテキストを追加してください。

別の方法でリンクにラベルを付けている

このチェックでは、リンク内のテキストと代替テキストを読み取ります。別の方法でリンクに名前を付けていて、スクリーンリーダーで正しく読み上げられることを確認済みの場合は、この検出結果をできます。