重複する代替テキスト

Silktide は、代替テキストがすぐ隣にあるテキストと重複しているリンク付き画像を検出します。画像と隣接するテキストが同じ内容を表している場合、スクリーンリーダーを使用する人には同じ言葉が2回聞こえます。

<!-- 問題: 「Apple Apple」と読み上げられる -->
<a href="/apple">
    <img src="apple.png" alt="Apple">
    Apple
</a>

<!-- 修正後: 空の alt にすると、テキストだけでリンクの内容を示せる -->
<a href="/apple">
    <img src="apple.png" alt="">
    Apple
</a>

これが重要な理由

は、画像を見ることができない人のために画像を置き換える目的で使用されます。画像の横に同じ言葉がすでに表示されている場合、代替テキストは何も付け加えません。は「Apple Apple」と読み上げるため、不自然に聞こえ、メリットがないまま聞き取りに時間がかかります。商品カードやニュースのティーザーが並ぶページでは、この繰り返しが本当に疲労につながります。

意味が隣接するテキストだけで完全に伝わる画像は、実質的にであり、そのようにマークする必要があります。

修正方法

画像に空の alt="" を指定し、が画像をスキップして、上の例のように隣接するテキストだけを読み上げるようにします。
あるいは、画像を aria-hidden="true" で非表示にします。によって alt 属性への値の入力が強制される場合に便利です。
画像とテキストが同じ移動先への別々のリンクになっている場合は、まず1つのリンクにまとめます。隣接するリンクを参照してください。

Silktide によるテスト方法

リンク内にあるすべての画像を見つけます。
画像の支援テキスト（alt 属性または aria-label）を読み取ります。
画像の直前と直後にある要素の表示テキストと比較します。
大文字と小文字を区別せず、2つが完全に一致する場合に画像を報告します。

トラブルシューティング

一致するテキストがリンクの一部ではない

比較では、画像の直近にある隣接要素を確認します。この要素には、リンクのすぐ外側にあるテキストが含まれる場合もあります。ページ内を移動するスクリーンリーダーの利用者にとって重複が生じることに変わりはないため、同じ方法で修正できます。

テキストが少し異なる

報告されるのは、大文字と小文字を区別しない完全一致だけです。alt="Apple logo" の隣に「Apple」がある場合のような、ほぼ同じ内容のテキストはこのチェックに合格しますが、聞き手にとって代替テキストが本当に何かを付け加えているかどうかを検討してください。