隣接するリンク
Silktide は、すぐ隣に配置され、同じ移動先を指しているリンクの組み合わせを検出します。このような重複は、ほとんどの場合、1 つのリンクにまとめる必要があります。
最も一般的なパターンは、同じページへのテキストリンクに続いて、同じページを指す画像リンクが配置されている場合です。
<!-- 問題: 同じ移動先への別々のリンクが 2 つある -->
<a href="news.html">
<img src="photo.jpg" alt="">
</a>
<a href="news.html">
ニュース
</a>
<!-- 修正後: 1 つにまとめたリンク -->
<a href="news.html">
<img src="photo.jpg" alt="">
ニュース
</a>
重要な理由
多くの人は、ページを順番に利用します。キーボードユーザーはすべてのリンクを順に Tab キーで移動し、 のユーザーはリンクが読み上げられるのを聞きます。隣接する重複リンクは、何の利点もなく作業を 2 倍にします。同じ移動先が 2 回読み上げられ、リンク一覧に重複項目が並び、空の を持つ画像リンクがそのテキストリンクの隣にあると、名前がまったくない状態で読み上げられることがあり、混乱を招きます。
2 つのリンクを 1 つにまとめることで、誰にとっても明確な名前の付いた移動先が 1 つになり、 も簡潔になります。
修正方法
- 上の例のように、画像とテキストを 1 つの
<a>要素の中に移動します。 - まとめたリンク内の画像には空の
alt=""を指定します。隣のテキストですでに移動先が示されているためです。詳しくは 重複する代替テキスト を参照してください。 - やテーマによって重複リンクが生成される場合(ニュース一覧やカードレイアウトでよくあります)は、テンプレートを一度修正して、すべての該当箇所を解消します。
Silktide によるテスト方法
- 各ページ上のすべてのリンクを探します。
- ほとんどの場合 のプレースホルダーである
#を指すリンクと、 を受け取れないリンクを無視します。後者は にリンクとして公開されないためです。 - 各リンクについて、その直後にある要素を確認します。2 つのリンクの間に空白以外のものがある場合、それらは隣接していないため、報告しません。
- 次のリンクが同じ絶対 URL に解決される場合、その組み合わせを報告します。
トラブルシューティング
2 つのリンクの動作が異なる
同じ URL を共有していても、onclick 属性に目に見える違いがある場合、異なる JavaScript を実行するリンクは報告されません。Silktide では確認できない方法で組み合わせの動作が異なる場合は、検出結果を できます。ただし、その違いが訪問者にとっても同じように見えないものかどうかを検討してください。
リンクが視覚的に隣り合っていない
隣接しているかどうかは画面上ではなく、ページのコードに基づいて判断されます。スタイル設定後に 2 つのリンクが大きく離れて表示される場合でも、HTML では隣接していることがあります。支援技術は HTML の順序を読み取るため、そのユーザーにとって重複は実際に存在します。