適用 (対象)
新しいウィンドウを開くウェブページ
これは、次の達成基準に関する達成方法である:
- 達成基準 3.2.1: フォーカス時 (参考)
- 達成基準 3.2.2: 入力時 (参考)
解説
この達成方法の目的は、自動的に新しいウィンドウ又はタブを開く前に利用者に知らせることである。リンクを動作させたときに自動的に新しいウィンドウを開くことは、もし事前にそのことを知らせていなければ、視覚的なコンテンツを知覚するのに困難を伴う利用者や認知障害のある利用者が混乱する原因となりうる。事前に知らせることによって、利用者は現在のウィンドウから離れるかどうかを判断することができるようになる。また、利用者が新しいウィンドウを開くことを選んだ場合にも、元のウィンドウに戻りやすくなる。さらに、ブラウザの [戻る] ボタンが使えないこと及び、直前まで自分がいた場所を見つけるためには元のウィンドウに戻らなければならないことを利用者が理解する手助けにもなる。
事例
例 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>
検証
手順
利用者の要求によるコンテキストの変化が生じたときに自動的に新しいウィンドウ又はタブで開くリンクに対して:
- このリンクを新しいウィンドウで開くことが支援技術で読み上げられることを確認する。
- このリンクを新しいウィンドウで開くことが視覚的に示されていることを確認する。
期待される結果
- #1 及び #2 の結果が真である。