Technique F37:Failure of Success Criterion 3.2.2 due to launching a new window without prior warning when the selection of a radio button, check box or select list is changed
About this Technique
This technique relates to 3.2.2 On Input (Failure).
This failure applies to HTML.
Failure techniques show examples of how content can fail particular WCAG success criteria. However, content may still satisfy those criteria if it includes equivalent/alternative content or functionality that does meet the normative requirements. See About WCAG Techniques.
Description
This document describes a failure that occurs when changing the selection of a radio button, a check box or an item in a select list causes a new window to open. It is possible to use scripting to create an input element that causes a change of context (submit the form, open a new page, a new window) when the element is selected. Developers can instead use a submit button (see Providing a submit button to initiate a change of context) or clearly indicate the expected action.
Examples
Example 1
The example below fails the success criterion because it processes the form when a radio button is selected instead of using a submit button.
<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>Tests
Procedure
- Find each form in a page.
- For each form control that is a radio button, check box or an item in a select list, check if changing the selection of the control launches a new window.
- For each new window resulting from step 2, check if the user is warned in advance.
Expected Results
If check #3 is false, then this failure condition applies and content fails the success criterion.
Note