←
慈愛結ノ宮縁側だより

サイト制作

別タブで開くリンクの伝え方|事前案内と読み上げへの配慮

慈愛妃きづな

2026-10-30

この記事には広告・アフィリエイトリンクが含まれます。

ノートパソコンを使う人物と、そのそばにいる子ども
ノートパソコンを使う人物と、そのそばにいる子ども。パソコンを使う場面のイメージ。モデル本人が操作に困っている場面ではありません。 写真:ACworks/写真AC。掲載画像は長辺1920px以内のJPEGです。 / パソコンを操作するお母さん / ACworks / 写真AC利用規約に基づく通常利用(ブログ本文の補助画像) · 画像出典 · 写真AC利用規約に基づく通常利用(ブログ本文の補助画像)

新しいタブを開くリンクは、押す前にその動作が分かる案内を添えます。文字やアイコンの見え方に加え、読み上げでも説明が伝わるか確認。まず、別タブにする必要があるリンクかを見直します。

別タブで開くことをリンク操作前に知らせる

リンクを押したあと、ブラウザーの戻るで元へ戻ろうとして迷う。実は新しいタブが開いていて、前のページは別のタブに残っている。操作に慣れていれば小さなことでも、変化に気づかなければ戸惑いますよね。

W3Cは、リンクやボタンから新しいタブなどを開く場合、事前に知らせる方法を紹介しています。『別タブで開きます』という短い案内にも、戻り方を理解する助けになる役割があります。

机でノートパソコンを操作する人物の手元
机でノートパソコンを操作する人物の手元。ブラウザーを使う場面を考えるイメージ。別タブ表示の実演ではありません。 写真:ゆうさん_Art/写真AC。掲載画像は長辺1920px以内のJPEGです。 / 机でノートパソコンを操作する男性の手元 / ゆうさん_Art / 写真AC利用規約に基づく通常利用(ブログ本文の補助画像) · 画像出典 · 写真AC利用規約に基づく通常利用(ブログ本文の補助画像)

見た目と読み上げの両方に案内を用意

小さな外部リンク風のアイコンだけで、誰にでも意味が伝わるとは限りません。文字の案内や、支援技術へ伝わる説明を組み合わせる方法を考えます。

なお、このW3Cの手法は推奨される実装例であり、案内がないだけで直ちに特定の達成基準へ不適合になる、と断定するものではありません。規則の名前で責めるより、利用者が変化を理解できるかを確認したいですね。

私なら、まず別タブにする必要があるかを考えます。必要な箇所では、その動きを先に知らせる。押したあとの驚きを、小さな一言で減らせるなら取り入れたいです。

読み物の一覧へ

慈愛妃きづなについて・記事の編集方針

あわせて読みたい関連記事

記事一覧へ