制作事例からクライアントのサイトへ進む。記事から出典を読む。サービス案内から予約サイトを開く。いずれも外部へのリンクですが、すべて新しいタブで開く必要があるわけではありません。大切なのは、読者が次の動きを予測でき、元の作業へ迷わず戻れることです。
別のサイトと別のタブを同じ意味にしない
まずは現在のタブで開く、普通のリンクを基本にします。必要なら利用者自身がブラウザーの機能で新しいタブを選べます。サイト側が外部リンクのたびに新しいタブを増やすと、画面が散らかり、「戻る」ボタンが効かなくなったように感じられることもあります。入力途中の作業を残したまま長い説明を参照する場合など、新しいタブが役立つ場面はあります。ただし、それは目的のある例外であり、外部リンクすべてに適用する自動的な規則ではありません。
クリックする前に変化を伝える
新しいタブを開く設計なら、リンクの近くに「メーカーの説明書を読む（新しいタブで開きます）」と書きます。外向きの矢印は補助になりますが、その意味を推測させないようにします。マウスを重ねたときだけ現れる説明ではなく、キーボード操作や支援技術でも事前に確認できる情報にしてください。W3CのG200とG201は参考となる助言的な技法です。案内が一つあるだけで、ページ全体がWCAGに適合すると判断することはできません。
移動の設計と保護の仕組みを分ける
リンクのように見えるスクリプトではなく、実際の行き先を持つリンク要素を使います。新しいタブが必要な場合は、targetとrelの役割も確認します。MDNでは、現代のtarget="_blank"付きリンクは暗黙にnoopenerと同様に動作すると説明されています。rel="noopener"を明示すれば、ソース上でも意図が読み取れます。一方、noreferrerは参照元の情報を送らないための別の値です。すべてを同じ安全対策だと考えず、何を変えるのか理解して選びましょう。
開けるかだけでなく、戻れるかも試す
通常のクリック、キーボードでの実行、ブラウザーの新しいタブで開く操作をそれぞれ確認します。スマートフォンでも外部ページを開き、元へ戻ってみてください。どこまで読んだかが分かるでしょうか。入力途中のフォームから移動する場合は、実際に入力内容がどうなるかを試します。別のタブを用意することは、下書きを保存する仕組みの代わりにはなりません。各言語で、リンク先と表示される案内が一致していることも確認します。
サイト全体で小さな編集方針を共有する
どの場面で新しいタブを使うかを書き残し、案内の表現をそろえます。提携先のドメインや予約サービスが変わったときには、リンクを見直します。目的は利用者を自分のサイトへ閉じ込めることではありません。外へ進み、資料を確かめ、必要に応じて戻る一連の行動を、理解しやすい作業の続きにすることです。