スクリーンリーダー用リンク
Silktide は、で正常に機能しない形で不正に構成されたリンク要素を検出します。これには、読み上げ可能なテキストがないリンク、移動先がないリンク、ページ内に残された空のリンクタグが含まれます。
リンクを支援技術で機能させるには、移動先（href 属性）と、リンク内に読み上げ可能な内容の両方が必要です。
<!-- 正常: 移動先と読み上げ可能なテキストがある -->
<a href="/about">私たちについて</a>
<!-- 正常: 代替テキストがある画像リンク -->
<a href="/apple"><img src="apple.png" alt="Apple"></a>
重要な理由
は、各リンクをそのテキストで読み上げます。移動先はあるもののテキストがないリンクは、単に「リンク」とだけ読み上げられます。ユーザーはリンクを実行できますが、どこに移動するのか分かりません。テキストはあるものの移動先がないリンクは、クリックできるように見えてもどこにも移動しません。どちらのパターンも、支援技術を使う人がリンクによってページ内を移動できるようにする基本的な仕組みを損ないます。
修正方法
- 移動先はあるものの読み上げ可能なテキストがないリンクの場合: リンク内にテキストを追加するか、画像だけが含まれている場合はを追加します。
- テキストはあるものの移動先がないリンクの場合: 不足している
hrefを追加します。要素が実際には他のリンクから移動するためのターゲットである場合は、代わりにそのidをリンク以外の要素へ移動します。
<!-- 従来のターゲットアンカー。HTML5では非推奨 -->
<a name="example"></a>
<!-- 推奨: 通常の要素に id を設定 -->
<div id="example">...</div>
- 属性がまったくない空の
<a></a>タグの場合: 何の役割もないため削除します。これらは編集ツールやスクリプトによって残されることがよくあります。 - 要素が実際にはボタンであり、移動ではなくアクションを実行する場合は、
<button>要素を使用するか、既存のタグにrole="button"を追加します。
Silktide によるテスト方法
- ページ上のすべての
<a>要素を検出し、テキスト（画像の代替テキストと CSS で追加されたテキストを含む）、href、およびidまたはname属性を読み取ります。 - 次の3つの問題パターンを検出します。
hrefはあるものの、読み上げ可能なテキストがないリンク。- テキストと
idまたはnameはあるもののhrefがない要素。リンクのように見せたターゲット、または移動先が欠落したリンクです。 - テキスト、
href、id、nameのいずれもない完全に空のアンカー。
- 次の2つのパターンは意図的に検出しません。
- テキストはあるものの
href、id、nameがない<a>。HTML5 ではこれを「プレースホルダーリンク」として使用できます。通常は後から によって内容が設定されます。 idまたはnameはあるもののhrefがない空のアンカー。これらはリンクではなく、従来のジャンプターゲットです。
- テキストはあるものの