Not sure which size to choose? See the size guide
``` `target="_blank"` で、ブラウザーはガイドを新しいタブに開きます。リンクの名前は「See the size guide」で、どこに開くかは何も伝えません。利用者が新しいタブに気づくのは、開いた後です。気づかないこともあります。 ## 修正前：名前のないアイコン ```htmlNot sure which size to choose? See the size guide
``` アイコンは、それが見えて意味を知っている人のためにあります。しかし `aria-hidden="true"` でリンクの名前から外れるため、スクリーンリーダーでは「See the size guide、リンク」としか聞こえません。ほかの人にとっても、知らせになるかどうかはアイコンを知っているかどうか次第です。 ## 修正後：ガイドを同じタブで開く ```htmlNot sure which size to choose? See the size guide
``` `target` がなければ、ガイドは同じタブで開き、「戻る」でシャツのページに元のまま戻れます。ガイドをシャツの横に並べたい人は、中クリック、CtrlキーかCommandキーを押しながらのクリック、コンテキストメニュー、スマートフォンでの長押しで、自分で新しいタブに開けます。リンクをたどって求めたこと以外は何も変わらないので、知らせる必要もありません。 ## 修正後：リンクの言葉で伝える ```htmlNot sure which size to choose? See the size guide (opens in a new tab)
``` 達成方法H83の形です。言葉は画面にもリンクの名前にもあるため、誰もがリンクをたどる前に、読むか「See the size guide (opens in a new tab)、リンク」と聞くことになります。言葉はリンクの最初にある見える言葉の後に続くため、名前は今までどおり、見えている言葉で始まります。音声操作の利用者が口にするのも、この言葉です。 ## 修正後：アイコンに名前を付ける ```htmlNot sure which size to choose? See the size guide
``` デザインのアイコンはそのまま残し、アイコンに名前を付けます。この名前がリンクの名前の一部になります。スクリーンリーダーでは「See the size guide (opens in a new tab)、リンク」と聞こえます。リンクの名前を聞いたり読んだりする人には、これで適合します。ページを見る人に見えるのはアイコンだけなので、四角から出る矢印の意味を知っている人にしか伝わりません。認知障害のある人をはじめ、知らない人は多くいます。 ## どの方法を選ぶか 3つとも3.2.5を満たします。ガイドは同じタブで開いてください。どのブラウザーでも「戻る」が使えたままになるのはこの方法だけで、言葉もいらず、新しいタブがほしい人は自分で開けます。新しいタブは、入力途中のフォームの横で開くヘルプのように、それがないとページが何かを失う場合だけにし、その場合は知らせる言葉をリンクに入れて、誰にでも見えて聞こえるようにします。アイコンに名前を付けるのは、デザインにアイコンがあり、言葉を表示できない場合です。スクリーンリーダーの利用者には伝わりますが、アイコンを知らない人には推測を強いることになります。 ## 実装の判断 新しいタブで開くリンクがいくつも並ぶ場合は、GOV.UKが勧めるように、「以下のリンクは新しいタブで開きます」のような一文をその前に置くと、リンクごとに言葉を繰り返さずに済みます。ただし、リンクからリンクへ移動するスクリーンリーダーの利用者はその一文を聞かないため、各リンクの名前にも、隠した文字で言葉を加えてください。 知らせる言葉を `title` 属性に入れないでください。ブラウザーはマウスを載せたときのツールチップとして表示し、ほとんどはキーボードやタッチ操作では何も表示しません。スクリーンリーダーも確実には読みません。G201の例の1つのように `aria-describedby` だけで伝える方法は、スクリーンリーダーの利用者にしか届かず、説明を読み上げない設定のスクリーンリーダーもあります。達成方法H83は知らせる言葉をリンクのテキストに入れるため、誰にでも届きます。 上の例のように、見えている言葉を名前の先頭に置いたままにし、名前が利用者に見えるラベルで始まるようにします。[表示と名前が食い違うボタンとリンク](/ja/learn/label-in-name)も参照してください。 新しいウィンドウを開く方法には、どれにも同じ知らせが必要です。`target="help"` のようにほかの名前の `target` も、`window.open()` を呼ぶスクリプトも同じです。ページを離れると入力した内容が失われるフォームでは、ヘルプを新しいタブで開くより、入力した内容を保持して、ヘルプを同じタブで開けるようにするほうがよい解決です。 ## 修正の確認 1. ページのリンクをすべてたどり、`target` かスクリプトで新しいタブやウィンドウを開くものを書き留める。 2. スクリーンリーダーで、そうしたリンクへそれぞれ移動し、たどる前に、名前の一部として知らせる言葉が聞こえるか確認する。 3. リンクにアイコンがある場合は、アイコンに新しいタブで開くことを伝える名前があるか、言葉がリンクのテキストにあるか確認する。 4. 画面拡大ソフトとスマートフォンで、そうしたリンクをそれぞれたどり、元のページへ戻る方法が分かるか確認する。それぞれ、そもそも新しいタブが必要かも考える。 OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。ページのリンクや、それを書き出すコンテンツ管理システムを変更した際は、再度確認します。 ## 制限 このサンプルは、どのページでも同じ結果になることを保証するものではありません。対象は新しいタブを開くリンクです。PDFを開くリンクやファイルをダウンロードするリンクも、ファイルの種類と大きさでそのことを伝えるべきで、文書そのものもアクセシブルである必要があります。[スクリーンリーダーで読めない、スキャンやタグなしのPDF](/ja/learn/accessible-pdfs)を参照してください。リンクの言葉がリンク先を伝えているかは、別の問題です。[名前のないバナーや画像のリンク](/ja/learn/empty-links)を参照してください。ページを読み込んだときなど、リンクを押していないのに開くウィンドウは、別の形で同じ基準に適合しません。利用者が使うスクリーンリーダー、画面拡大ソフト、スマートフォンで確認してください。 --- このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）