空のリンク

Silktide は、テキストがまったく含まれていないリンク、つまり表示されるテキストもテキストによる代替もないリンクを検出します。スクリーンリーダーを使う人には「リンク」としか聞こえず、どこに移動するのか知る方法がありません。

<!-- Empty: an icon link with no text alternative -->
<a href="\/search"><svg>...</svg></a>

<!-- Fixed: the image's alt text names the destination -->
<a href="\/"><img src="logo.png" alt="Example Corp home"></a>

<!-- Fixed: an aria-label names the destination -->
<a href="\/search" aria-label="Search"><svg>...</svg></a>

重要な理由

リンクはウェブサイト内を移動するための手段ですが、誰もがリンクを見られるわけではありません。は各リンクをそのテキストで読み上げます。テキストがない場合、ユーザーには「リンク」としか聞こえず、推測するか、そのリンクを飛ばすしかありません。

多くの視覚障害者は、ページ上のすべてのリンクの一覧を表示して移動することもあります。名前のない項目の一覧は役に立ちません。

空のリンクは通常、意図せず発生します。テキストがアイコンに置き換えられた、画像からが失われた、または編集者によって不要な <a> タグが残された、といった原因があります。検索エンジンも、空のリンクがどこを指しているのか判断できません。

修正方法

リンクに表示テキストを付けるべき場合は、テキストを追加します。
リンクが画像の場合は、リンク先を示す代替テキストを画像に付けます。たとえば、ホームページにリンクするロゴなら alt="Example Corp home" とします。画像の説明ではありません。
リンクがアイコンの場合は、リンク先を示すを追加するか、視覚的には非表示でもスクリーンリーダーから利用できるテキストを含めます。
内容も目的もない不要なリンクが残っている場合は、削除します。

Silktide によるテスト方法

イメージマップの領域を含め、各ページ上のすべてのリンクを検出します。
動作するリンク先がない要素は除外します。
リンク内のテキストを読み取ります。これには、代替テキスト、リンクおよびリンク内の要素にある aria-label や title などのテキストによる代替も含まれます。
テキストがまったく見つからないリンクを報告します。

トラブルシューティング

ページ上ではリンクが問題なく見える

アイコンやの背景画像によって見た目が表示されているリンクは、空であっても問題なく見えることがあります。これらはいずれもリンクに名前を与えません。基になるを確認し、テキストによる代替があるか確認してください。

アイコンの意味は明らか

それは見える人にとってだけです。虫眼鏡は視覚的には「検索」を示しますが、スクリーンリーダーはテキストによる代替がない画像を説明できません。ラベルをマークアップに記述する必要があります。