WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

G201: 新しいウィンドウを開くときにはユーザーに事前に知らせる

適用(対象)

新しいウィンドウを開くウェブページ

これは、次の達成基準に関連する実装方法である:

解説

この実装方法の目的は、自動的に新しいウィンドウまたはタブを開く前にユーザーに知らせることである。リンクを押下したときに自動的に新しいウィンドウを開くことは、もし事前にそのことを知らせていなければ、視覚的なコンテンツを知覚するのに困難を伴うユーザーや認知障害のあるユーザーが混乱する原因となりうる。事前に知らせることによって、ユーザーは現在のウィンドウから離れるかどうかを判断することができるようになる。また、ユーザーが新しいウィンドウを開くことを選んだ場合にも、元のウィンドウに戻りやすくなる。さらに、ブラウザの[戻る]ボタンが使えないことや、直前まで自分がいた場所を見つけるためには元のウィンドウに戻らなければならないことをユーザーが理解する手助けにもなる。

事例

事例 1: コントロールを説明するテキストで知らせる

コントロールを説明する識別名またはラベルを用いて、新しいウィンドウで開くことを知らせることができる。

コード例:


              <a href="knitting.html" target="_blank">編み物のすべて 
              (新しいウィンドウで開く)</a>
  

事例 2: CSSを用いて、新しいウィンドウが開く前に知らせる

以下のコードでは、CSSを用いて新しいウィンドウが開く前に知らせている。

コード例:


              <html>
                <head>
                <title>ポップアップによる警告</title>
                <style type="text/css">
                body {
                margin-left:2em;
                margin-right:2em;
                }
                :focus { outline: 0; }
                a.info {
                position:relative;
                z-index:24;
                background-color:#ccc;
                color:#000;
                text-decoration:none
                }
                a.info:hover, a.info:focus, a.info:active {
                z-index:25;
                background-color:#ff0
                }
                a.info span {
                position: absolute;
                left: -9000px;
                width: 0;
                overflow: hidden;
                }
                a.info:hover span, a.info:focus span, a.info:active span {
                display:block;
                position:absolute;
                top:1em; left:1em; width:12em;
                border:1px solid #0cf;
                background-color:#cff;
                color:#000;
                text-align: center
                }
                div.example {
                margin-left: 5em;
                }
                </style>
                </head>
                <body>
                <h1>ポップアップによる警告</h1>
                <p> これは <a class="info" href="popup_advisory_technique.html"
                 target="_blank"><strong>外部へのリンク</strong>
                 <span>新しいウィンドウで開く</span></a>の事例です。
                </p>
                </body>
                </html>
	

参考:CSSを用いて、新しいウィンドウが開く前に知らせるサンプル:英語

検証

チェックポイント

利用者の要求による状況の変化が生じた際に新しいウィンドウまたはタブで開くリンクに対して:

  1. このリンクは新しいウィンドウを開くことが支援技術(音声ブラウザ/スクリーンリーダー)によって読み上げられる。

  2. このリンクは新しいウィンドウを開くことが視覚的に示されている。

判定基準

注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。