新しいウィンドウを開くときに、利用者へ事前に知らせる

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

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

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

解説

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

事例

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

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

              <a href="knitting.html" target="_blank">All about Knitting 
                (opens in new window)</a>
            

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

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

              <html>
                <head>
                <title>Pop-Up Warning</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>Pop-Up Warning</h1>
                <p> This is an example of an <a class="info"
                href="popup_advisory_technique.html" target="_blank">
                <strong>External link</strong><span>Opens a new
                window</span></a>
                </p>
                </body>
                </html>
            

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

検証

手順

利用者の要求によるコンテキストの変化が生じたときに自動的に新しいウィンドウ又はタブで開くリンクに対して:

  1. このリンクを新しいウィンドウで開くことが支援技術で読み上げられることを確認する。
  2. このリンクを新しいウィンドウで開くことが視覚的に示されていることを確認する。

期待される結果

  • #1 及び #2 の結果が真である。