【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
新しいウィンドウを開くウェブページ
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、自動的に新しいウィンドウまたはタブを開く前に利用者に知らせることである。リンクを動作させたときに自動的に新しいウィンドウを開くことは、もし事前にそのことを知らせていなければ、視覚的なコンテンツを知覚するのに困難を伴う利用者や認知障害のある利用者が混乱する原因となりうる。事前に知らせることによって、利用者は現在のウィンドウから離れるかどうかを判断することができるようになる。また、利用者が新しいウィンドウを開くことを選んだ場合にも、元のウィンドウに戻りやすくなる。さらに、ブラウザの [戻る] ボタンが使えないことや、直前まで自分がいた場所を見つけるためには元のウィンドウに戻らなければならないことを利用者が理解する手助けにもなる。
コントロールを説明する名前 (name) またはラベルを用いて、新しいウィンドウで開くことを知らせることができる。
コード例:
<a href="knitting.html" target="_blank">All about Knitting
(opens in new window)</a>
以下のコードでは、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>
利用者の要求によるコンテキストの変化が生じたときに自動的に新しいウィンドウ又はタブで開くリンクに対して:
このリンクを新しいウィンドウで開くことが支援技術で読み上げられることを確認する。
このリンクを新しいウィンドウで開くことが視覚的に示されていることを確認する。
1. 及び 2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。