WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.0 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

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

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

解説

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

事例

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

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

コード例:


       <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. このリンクは新しいウィンドウを開くことが視覚的に示されている。

期待される結果

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。