新しいタブで開くことを説明する

Silktide は、新しいタブまたはウィンドウで開くリンクを見つけ、そのことを説明していないリンクを報告します。リンクによって現在のページから移動する前に、訪問者に警告する必要があります。

これが重要な理由

警告なしで新しいタブを開くと、訪問者の予想に反します。戻るボタンが機能しなくなり、新しいタブが存在すること自体に気付かない場合もあります。を使うユーザーは、状況が変わったことを示す手がかりを聞き取れない可能性があります。また、認知に困難がある人やウェブの利用経験が限られている人は、戻り方が分からず取り残されることがあります。リンクテキストに数語の警告を加えるだけで、こうした問題をすべて防げます。

多くの場合、最善の修正方法は新しいタブを開かないことです。訪問者自身が選べるようにしましょう。新しいタブを開く必要がある場合、このチェックではリンクにそのことが記載されているかを確認し、の達成基準3.2.5（要求時の変更）を満たせるようにします。これはの要件です。

修正方法

target="_blank" を削除し、リンクが通常どおり開くようにすることを推奨します。
新しいタブを開くことが適切な場合は、リンクテキストに説明を追加します。

<a href="products.html" target="_blank">
  商品（新しいタブで開きます）
</a>

画像リンクの場合は、説明をに入れます。

<a href="products.html" target="_blank">
  <img src="products.jpg" alt="商品（新しいタブで開きます）">
</a>

多数のリンクを一度に対応するには、でテキストを自動的に追加できます。

/* すべての新しいタブで開くリンクに警告を追加 */
a[target="_blank"]::after {
  content: "（新しいタブで開きます）";
}

代わりにラベルを使用することもできます。リンクの見た目を変えずに、読み上げられる内容を変更できます。ただし、aria-label はリンクのテキスト全体を置き換えるため、リンクテキストを繰り返して含める必要があります。

<a href="products.html" target="_blank" aria-label="商品（新しいタブで開きます）">
  商品
</a>

アイコンだけでは不十分です。スクリーンリーダーが読み上げられるテキストとして警告が存在している必要があります（アイコンの alt テキストも該当します）。

Silktide によるテスト方法

target="_blank" が設定されたページ上のすべてのリンクを見つけます。この属性はリンクを新しいタブまたはウィンドウで開きます。チェック対象から除外されている要素はスキップします。
各リンクの読み取り可能なテキストを収集します。リンク内のテキストコンテンツ、代替テキスト、要素の title テキスト、ARIA ラベル、CSS の ::before および ::after で追加されたテキストが対象です。
そのテキストに、認識される説明（「新しいタブ」、「新しいウィンドウ」、「新しいブラウザータブ」、「新しいブラウザーウィンドウ」、「外部リンク」など）が含まれていれば、リンクを合格とします（ウェールズ語の同等表現も認識されます）。
それ以外の新しいタブで開くリンクをすべて報告します。

トラブルシューティング

リンクの説明を別の表現で記載しています

上記のフレーズだけが認識されます。「ポップアップで開きます」のように、意味が同等の表現を使用している場合は、認識されるフレーズに統一するか、検出結果をしてください。

「ウィンドウ」と「タブ」のどちらを使うべきですか？

現在のほぼすべてのブラウザーでは、target="_blank" のリンクはタブで開かれるため、「新しいタブで開きます」のほうが通常は分かりやすい表現です。ただし、どちらでも合格します。