異なる移動先へのリンク

Silktide は、同じテキストを共有しているものの、異なる移動先を指しているページ上のリンクを検出します。同じように見える2つのリンクが異なる場所に移動する場合、それぞれをたどらない限り、利用者はそれらを区別できません。

<!-- 異なるページに移動する2つの「News」リンク -->
<p>製品に関する最新情報をご覧ください: <a href="\/products\/news">News</a></p>
<p>サービスに関する最新情報をご覧ください: <a href="\/company\/news">News</a></p>

重要な理由

スクリーンリーダーを使用する人は、ページ上のすべてのリンクを文脈から切り離して一覧表示することがよくあります。どちらも「News」と読み上げられる一方で異なるページに移動する2つのリンクは、その一覧では区別できないため、利用者は移動先を確認するためにそれぞれを開かなければなりません。同じ曖昧さは、リンク名を声に出して指定する音声認識ユーザーにも影響します。

修正方法

1. 「Product news」や「Company news」のように、移動先を説明する異なる表示テキストを各リンクに付けます。
2. デザインを変更できない場合は、表示される内容を変えずにリンクを区別できるよう、ARIA ラベルを追加します。

<!-- aria-label はスクリーンリーダーが読み上げる名前になります -->
<a href="\/products\/news" aria-label="Product news">News</a>
<a href="\/company\/news" aria-label="Company news">News</a>

3. または、リンク内に追加テキストを含め、そのテキストを視覚的には非表示にしつつ、スクリーンリーダーには読み上げさせます（たとえば、スクリーンリーダー専用の CSS クラスを設定した <span> を使用します）。
4. リンクが利用者にとって機能的に同等である場合（たとえば同じページにリダイレクトされる場合）は、この指摘を承認します。

Silktide によるテスト方法

1. ページ上のすべてのリンクを検出します。ただし、チェック対象から除外した要素はスキップします。
2. 各リンクのアクセシブルな名前を特定します。これは、表示されるテキストだけでなく、ARIA ラベルや画像の代替テキストも含め、支援技術が読み上げるテキストです。
3. 比較のために各リンクの移動先を正規化します。フラグメント（# の後の部分）、クエリ文字列（? の後の部分）、URL スキーム、末尾のスラッシュは無視します。
4. 同じアクセシブルな名前を持つリンクが複数の異なる移動先を指している場合、それらすべてにフラグを立てます。

トラブルシューティング

同じページ内の異なるセクションへのリンクがフラグ付けされない

移動先を比較する際にフラグメントは無視されるため、\/guide#intro と \/guide#pricing のようなリンクは同じ移動先として扱われます。これは、どちらも同じページに移動するため意図された動作です。

トラッキングパラメーターだけが異なるリンクがフラグ付けされない

移動先を比較する際にクエリ文字列は無視されるため、\/offers?src=header と \/offers?src=footer は異なる移動先ではなく、同じページとして扱われます。

詳細情報

• 成功基準 2.4.4 の理解: リンクの目的（コンテキスト内） (WCAG 2.2)
• リンクの目的