Skip to content

テクニック F37:達成基準 3.2.2 の失敗例 － ラジオボタン、チェックボックス、又はセレクトリストの選択を変更すると、事前の予告なしに新しいウィンドウを開いている

このテクニックについて

このテクニックは 3.2.2: 入力時 (失敗) に関連する。

この失敗例は、HTML に適用される。

解説

この文書では、ラジオボタン、チェックボックス、またはセレクトリスト内の項目の選択を変更すると、新しいウィンドウが開く失敗例について解説する。要素が選択されたとき、コンテキストの変更 (フォームの送信、新しいページを開く、新しいウィンドウ) を引き起こす input 要素を生成するために、スクリプトを使用することができる。 開発者は代わりに送信ボタンを使用する (コンテキストの変化を開始する送信ボタンを提供するを参照)、又はそこで起こる動作を明確に示す必要がある。

事例

事例 1

下記の例では、送信ボタンを使うのではなく、ラジオボタンが選択されたときにフォームが処理されるため、達成基準を満たしていない。

<script> 
   function goToMirror(theInput) {
    var mirrorSite = "https://download." + theInput.value + "/"; 
    window.open(mirrorSite); 
   }
</script>
...
<form name="mirror_form" id="mirror_form" action="" method="get">
  <p>Please select a mirror download site:</p> 
  <p> 
    <input type="radio" onclick="goToMirror(this);" name="mirror" 
     id="mirror_belnet" value="belnet.be" /> 
    <label for="mirror_belnet">belnet (<abbr>BE</abbr>)</label><br /> 
    <input type="radio" onclick="goToMirror(this);" name="mirror" 
     id="mirror_surfnet" value="surfnet.nl" /> 
    <label for="mirror_surfnet">surfnet (<abbr>NL</abbr>)</label><br /> 
    <input type="radio" onclick="goToMirror(this);" name="mirror" 
     id="mirror_puzzle" value="puzzle.ch" /> 
    <label for="mirror_puzzle">puzzle (<abbr>CH</abbr>)</label><br /> 
    <input type="radio" onclick="goToMirror(this);" name="mirror" 
     id="mirror_voxel" value="voxel.com" /> 
    <label for="mirror_voxel">voxel (<abbr>US</abbr>)</label><br /> 
  </p> 
</form>

検証

手順

  1. ページ中の各フォームを探す。
  2. ラジオボタン、チェックボックス、又はセレクトリストの項目であるフォームコントロールそれぞれに、コントロールの選択を変更すると、新しいウィンドウが立ち上がるかどうかをチェックする。
  3. 手順 2 に由来するそれぞれの新しいウィンドウごとに、事前に利用者に警告されているかどうかをチェックする。

期待される結果

チェック 3 が偽である場合、この失敗条件は適用され、コンテンツは達成基準に失敗する。

注記

ラジオボタンのセットの場合、ラジオボタンを選択するとコンテキストが変更されることを示す表示又は警告が追加されれば、3.2.2 の要件に合格することに注意する。しかし、このシナリオは、利用者が変更イベントをトリガーせずにキーボードでラジオボタンのセットを移動することは (現在のユーザエージェントでは) 不可能であるため、2.1.1 キーボードの要件に依然として失敗する可能性が高い。
Back to Top