空の alt テキストに title がある
Silktide は、空の代替テキストによって装飾としてマークされているにもかかわらず、title も付いている画像を検出します。2 つの属性は互いに矛盾しており、支援技術はこの矛盾を予測不能な方法で処理します。
<!-- 問題: alt は「無視して」と伝え、title は「読んで」と伝えている -->
<img src="logo.png" alt="" title="会社のロゴ">
<!-- 修正済み: 真に装飾的な画像 -->
<img src="logo.png" alt="">
<!-- 修正済み: 本当に意味のある画像 -->
<img src="logo.png" alt="会社のロゴ">
これが重要な理由
空の alt="" は画像がであることを示し、にその画像をスキップするよう伝えます。しかし、title 属性は一部のスクリーンリーダーで読み上げられることがあります。そのため、同じ画像が一部のユーザーには無音で、別のユーザーには読み上げられることになります。作成者がどちらを意図していたとしても、誰かにとっては結果が誤ったものになります。
title 属性は一般的に信頼性がありません。通常はマウスを重ねたときにだけツールチップとして表示されるため、キーボードやタッチスクリーンのユーザーにはいずれにしても表示されません。
修正方法
- 画像が装飾的な場合は、
title属性を削除し、空のalt=""を残します。 - 画像に意味がある場合は、説明をに移し、
titleを削除します。 - どこでも
titleを alt テキストの代わりに使用しないでください。誰に対しても確実に提供されるわけではありません。
Silktide によるチェック方法
- 各ページにあるすべての画像を見つけます。
alt属性が存在するものの、空である画像を選択します。- その中から、空でない
title属性も付いている画像をそれぞれ報告します。