リンクの目的
Silktide は、各リンクのテキストによってリンク先が説明されているかをテストします。「ここをクリック」や「詳細」、または記号だけで構成されたリンクでは、リンク先が分かりません。
<!-- Generic: tells the user nothing -->
<a href="/accessibility-guide">ここをクリック</a>
<!-- Fixed: the destination is clear from the text alone -->
<a href="/accessibility-guide">アクセシビリティガイドを読む</a>
重要な理由
を使用する人は、ページ上のすべてのリンクの一覧を表示し、そこから移動することがよくあります。その際、各リンクのテキストを文脈から切り離して聞くことになります。「詳細」、「続きを読む」、「ここをクリック」の一覧では役に立ちません。リンク先を確認するには、各項目を訪問する必要があるためです。スクリーンリーダーはテキストの前に「リンク」という語も読み上げるため、「ここをクリック」は「リンク ここをクリック」となり、情報のないノイズになります。
説明的なリンクは、他の人にも役立ちます。視覚のある訪問者はリンクを手がかりにページをざっと確認し、検索エンジンはリンクテキストを使ってリンク先を把握します。
修正方法
- リンク先がテキストだけで明確に分かるよう、一般的すぎるリンクテキストを書き換えます。「詳細」を「アクセシビリティガイドラインの詳細」のようにします。
- 矢印や絵文字など、記号だけのリンクを読みやすいテキストに置き換えるか、リンクに画像しか含まれていない場合はを追加します。
- リンクテキストに「リンク」と書かないでください。スクリーンリーダーがすでに読み上げるため、「料金へのリンク」は「リンク 料金へのリンク」と読み上げられます。
- 指摘されたリンクが実際には文脈上明確である場合は、できます。
Silktide によるテスト方法
- スクリーンリーダーに公開されている、リンク先を持つすべてのリンク(
<a>および<area>要素)を検出します。スクリーンリーダーから隠されているリンクは対象外です。 - が読み上げる場合と同じように、画像の代替テキストや CSS によって追加されたテキストも含めて、各リンクのテキストを判断します。
- 記号や絵文字だけなど、テキストに読み取り可能な文字(文字または数字)が含まれていないリンクを指摘します。
- 複数の言語で、「ここをクリック」、「続きを読む」、「詳細」など、一般的なフレーズとして知られている一覧とテキストが一致するリンクを指摘します。
テキストがまったくないリンクは、空のリンクチェックで別途報告されます。