新しいタブで開くことを伝えないリンク

ある衣料品のショップの商品ページで、リネンのシャツを4つのサイズで売っています。価格の下には「どのサイズにするか迷ったら」という文があり、サイズガイドへリンクしています。ショップは利用者に戻ってきて買ってほしいので、このリンクは target="_blank" で新しいタブに開くようにしてあります。リンクの言葉は、そのことを何も伝えません。スクリーンリーダーの利用者がリンクへ移動すると「サイズガイドを見る、リンク」と聞こえます。たどると、ほかの新しいページと同じようにガイドが読み上げられます。手持ちのシャツを測ってMサイズだと分かり、選ぶために「戻る」を押します。何も起きません。ガイドは新しいタブの最初のページなので、パソコンのChrome、Edge、Firefoxには戻る先がなく、ボタンは灰色になっています。シャツのページは、左隣のタブで開いたままです。しかし、そこにあることを伝えるものは何もありませんでした。

同じリンクは、ほかの形でもつまずきます。

• リンクの言葉の後に、四角から矢印が出るアイコンがある。新しいタブを表すおなじみの印だが、aria-hidden="true" のため、スクリーンリーダーでは「サイズガイドを見る、リンク」としか聞こえない。アイコンを知らない人にも、知らせとしては伝わらない。
• コンテンツ管理システムが、配送会社の追跡ページなど、サイトの外へ出るリンクすべてに target="_blank" を付ける。ページのリンクのほとんどが新しいタブで開くのに、それを伝えるものは1つもない。
• ボタンやリンクのクリックのハンドラーが window.open() を呼ぶ。結果は同じだが、マークアップを見ても、それと分かる属性がない。

達成基準3.2.5「要求による変化」はレベルAAAです。新しいウィンドウやタブを開くといった状況の変化は、利用者が求めたときにだけ起きるようにするか、そうした変化を止める手段を用意しなければなりません。このリンクは失敗例F22に当たります。新しいウィンドウを開くことを伝える文字のないリンクは、利用者が求めていないウィンドウを開きます。リンクをたどることは新しいページを求めることで、そのページを別の場所で開くことまで求めてはいません。ページは属性1つでこれができ、ブラウザーはそのことを何も伝えないため、利用者は変化が起きてから気づくことになります。

リンクで新しいウィンドウを開く場合の十分な達成方法の1つがH83です。target はそのままにして、知らせる言葉をリンクのテキストに入れるため、誰もが押す前に分かります。同じタブで開けば、リンクをたどって求めたこと以外は何も変わらないため、これも適合します。参考の達成方法G200は、新しいタブを開くのは必要な場合だけにするよう勧めています。アイコンだけでは、文字で伝えたことになりません。この例のように名前がなければスクリーンリーダーは何も読み上げず、見える人にも、意味を知らなければ伝わりません。

スマートフォンでは新しいタブが画面全体に表示され、それまでのページは別のタブに隠れて見えなくなります。これは見落とされがちです。

10グループ中3グループに影響

• 全盲 （影響あり）
• 弱視 （影響あり）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響なし）
• 届く範囲・力 （影響なし）
• 認知 （影響あり）
• 光過敏 （影響なし）

• 視覚を使わない スクリーンリーダーの利用者は「サイズガイドを見る、リンク」と聞いてたどり、サイズガイドが読み上げられます。タブが開いたことは何も伝わらないため、サイズを選ぼうと「戻る」を押しても何も起きず、シャツのページは消えたように思えます。
• 視覚が限られる 画面拡大ソフトの利用者が見ているのはリンクで、画面上端のタブの並びではないため、新しいタブが開いたことが見えません。サイズガイドを読み終えると、「戻る」が灰色になっています。
• 言語・認知・学習の能力が限られる 今どこにいるかを把握するのが難しい人は、シャツのページを2度見失います。1度目は画面が別のページに置き換わったとき、2度目は、いつも戻るときに使う「戻る」が、多くのブラウザーで何も起こさないときです。検索からやり直す人や、諦めてしまう人もいます。

リンクには分かりやすい名前があるため、axeなどの自動チェックは合格にします。どのルールも target を見ていません。EaseWebの診断は、_self、_parent、_top 以外の target を持つリンクや、onclick 属性で window.open() を呼ぶリンクのうち、名前にも説明にも新しいタブやウィンドウを知らせる言葉がないものを、確認の依頼として挙げます。3.2.5はレベルAAAで、新しいタブが必要か、その言葉が知らせになっているかは、人にしか判断できないからです。上の最後の例のように、スクリプトから登録したクリックのハンドラーはマークアップにないため、診断では見つけられません。AIのコードアシスタントに外部へのリンクを頼むと、習慣のように target="_blank" と rel="noopener noreferrer" を付け、言葉のないアイコンを添えることがあります。アクセシブルにしてと頼むと、そのアイコンに aria-hidden="true" を付けることもあり、そうなるとスクリーンリーダーの利用者には何も伝わりません。