HTML input type="radio" element test
Test
- The legend should be announced with the first radio button in each fieldset
- The label should be announced for each radio button
- The radio element should be announced as "radio button" or similar
Example
Code sample
<form class="example" method="get" action="#">
<fieldset>
<legend>Subscribe</legend>
<input type="radio" id="a" name="c" checked> <label for="a">Weekly</label><br>
<input type="radio" id="b" name="c"> <label for="b">Monthly</label><br>
</fieldset>
<fieldset>
<legend>Delivery</legend>
<input type="radio" id="d" name="f" required> <label for="f">Online</label><br>
<input type="radio" id="e" name="f" required> <label for="f">Address</label><br>
</fieldset>
<fieldset>
<legend>Agree to terms</legend>
<input type="radio" id="g" name="i" aria-required="true"> <label for="i">Agree</label><br>
<input type="radio" id="h" name="i" aria-required="true"> <label for="i">Disagree</label><br>
</fieldset>
<fieldset>
<legend>Signed</legend>
<input type="radio" id="j" name="l" required aria-required="true"> <label for="l">Yes</label><br>
<input type="radio" id="k" name="l" required aria-required="true"> <label for="l">No</label><br>
</fieldset>
</form>
| OS | Browser | NVDA 2014.4 | JAWS 16 | VoiceOver |
|---|---|---|---|---|
| Windows 7 | IE 11 |
Example 1: "Subscribe grouping. Weekly. Radio button. Checked" "Monthly. Radio button. Checked" Example 1: "Delivery grouping. Online. Radio button. Not checked" "Address. Radio button. Checked" Required not announced Example 1: "Agree to terms grouping. Agree. Radio button. Required. Not checked" "Disagree. Radio button. Checked. Required" Example 1: "Signed grouping. Yes. Radio button. Required. Not checked" "No. Radio button. Checked. Required" |
Example 1: "Subscribe. Weekly. Radio button. Checked" "Subscribe. Monthly. Radio button. Not checked" Example 1: "Delivery. Online. Radio button. Not checked" "Delivery. Address. Radio button. Not checked" Required not announced Example 1: "Agree to terms. Agree. Radio button. Not checked. Required" "Agree to terms. Disagree. Radio button. Not checked. Required" Example 1: "Signed. Yes. Radio button. Not checked. Required" "Signed. No. Radio button. Not checked. Required" |
|
| Windows 7 | IE 8 | x | x | |
| Windows 7 | Chrome 39 |
Example 1: "Subscribe grouping. Weekly. Radio button. Checked" "Monthly. Radio button. Checked" Example 2: "Delivery grouping. Online. Radio button. Half checked. Required" "Address. Radio button. Checked. Required" Example 3: "Agree to terms grouping. Agree. Radio button. Half checked. Required" "Disagree. Radio button. Checked. Required" Example 4: "Signed grouping. Yes. Radio button. Half checked. Required" "No. Radio button. Checked. Required" |
Example 1: "Subscribe. Weekly. Radio button. Checked" "Radio button. Not checked. Monthly" Example 2: "Delivery. Online. Radio button. Not checked. Partially checked. Required" "Not checked. Partially checked. Required. Radio button. Address" Example 3: "Agree to terms. Agree. Radio button. Not checked. Partially checked. Required" "Not checked. Partially checked. Required. Radio button. Disagree" Example 4: "Signed. Yes. Radio button. Not checked. Partially checked. Required" "Not checked. Partially checked. Required. Radio button. No" |
|
| Windows 7 | Firefox 34 |
Example 1: "Subscribe grouping. Weekly. Radio button. Checked. 1 of 2" "Monthly. Radio button. Checked. 2 of 2" Example 2: "Delivery grouping. Invalid entry. Online. Radio button. invalid entry. Required. Not checked. 1 of 2" "Address. Radio button. Checked. Required. 2 of 2" Example 3: "Agree to terms grouping. Agree. Radio button. Required. Not checked. 1 of 2" "Disagree. Radio button. Checked. Required. 2 of 2" Example 4: "Signed grouping. Invalid entry. Yes. Radio button. Invalid entry. Required. Not checked. 1 of 2" "No. Radio button. Checked. Required. 2 of 2" |
Example 1: "Subscribe. Weekly. Radio button. Checked. 1 of 2. To change the selection press up or down arrow" "Monthly. Radio button. Checked. 2 of 2. To change the selection press up or down arrow" Example 2: "Delivery. Invalid entry. Online. Radio button. Not checked. Required. Invalid entry. 1 of 2. To change the selection press up or down arrow" "Address. Radio button. Checked. Required. 2 of 2. To change the selection press up or down arrow" Example 3: "Agree to terms. Agree. Radio button. Not checked. Required. 1 of 2. To change the selection press up or down arrow" "Disagree. Radio button. Checked. Required. 2 of 2. To change the selection press up or down arrow" Example 4: "Signed. Invalid entry. Yes. Radio button. Not checked. Invalid entry. 1 of 2. To change the selection press up or down arrow" "No. Radio button. Checked. Required. 2 of 2. To change the selection press up or down arrow" |
|
| OSX 10.9 | Chrome 39 |
Example 1: "Weekly. Selected. Collapsed. Radio button" "Monthly. Selected. Collapsed. Radio button" Legend not announced Example 2: "Online. Collapsed. Radio button" "Address. Selected. Collapsed. Radio button" Legend not announced Required not announced Example 3: "Agree. Collapsed. Radio button" "Disagree. Selected. Collapsed. Radio button" Legend not announced Required not announced Example 4: "Yes. Collapsed. Radio button" "No. Selected. Collapsed. Radio button" Legend not announced Required not announced |
||
| OSX 10.9 | Firefox 34 |
Example 1: "Weekly. Subscribe. Subscribe. Radio button" "Monthly. Subscribe. Subscribe. Radio button" Example 2: "Online. Delivery. Delivery. Radio button" "Address. Delivery. Delivery. Radio button" Required not announced Example 3: "Agree. Agree to terms. Agree to terms. Radio button' "Disagree. Agree to terms. Agree to terms. Radio button" Required not announced Example 4: "Yes. Signed. Signed. Radio button" "No. Signed. Signed. Radio button" Required not announced |
||
| OSX 10.9 | Safari 7 |
Example 1: "Weekly. Subscribe. Selected. Radio button. 1 of 2" "Monthly. Subscribe. Selected. Radio button. 2 of 2" Example 2: "Online. Delivery. Radio button. 1 of 2" "Address. Delivery. Selected. Radio button. 2 of 2" Required not announced Example 3: "Agree. Agree to terms. Radio button. 1 of 2" "Disagree. Agree to terms. Selected. Radio button. 2 of 2" Required not announced Example 4: "Yes. Signed. Radio button. 1 of 2' "No. Signed. Selected. Radio button. 2 of 2" Required not announced |