Radio group with error - aria-describedby applied to <input>
← Return to main list
This is a test case designed to determine how an error message associated with a radio group will be announced by various screen readers.
Example
Code
<fieldset>
<legend>Do you like boats?</legend>
<div class="form-group">
<input type="radio" id="boats-y" name="boats" aria-describedby="e01">
<label for="boats-y">Yes</label>
</div>
<div class="form-group">
<input type="radio" id="boats-n" name="boats" aria-describedby="e01">
<label for="boats-n">No</label>
</div>
<p class="error-message" id="e01">Error: Choose at least one option</p>
</fieldset>
Assistive technologies
VoiceOver
- Chrome: Yes. Radio button. 1 of 2. Do you like boats? Group. [Pause] Error: Choose at least one option.
- Firefox: Yes. Radio button. 1 of 2. Do you like boats? Group. [Pause] Error: Choose at least one option.
- Safari: Yes. Radio button. 1 of 2. Do you like boats? Do you like boats? Group. [Pause] Error: Choose at least one option.
NVDA
- Chrome: Do you like boats? Grouping. Yes. Radio button. Not checked. Error: Choose at least one option. 1 of 2.
- Firefox: Do you like boats? Grouping. Yes. Radio button. Not checked. Error: Choose at least one option. 1 of 2.
- Safari: Do you like boats? Grouping. Yes. Radio button. Not checked. Error: Choose at least one option. 1 of 2.
JAWS
- Chrome: Do you like boats? Group. Yes. Radio button. Not checked. 1 of 2. Error: Choose at least one option
- Firefox: To change the selection use the up or down arrow. Do you like boats? Yes. Radio button. Not checked. Error: Choose at least one option. Yes. Radio button. Not checked. 1 of 2. Error: Choose at least one option
- Edge: Do you like boats? Group. Yes. Radio button. Not checked. 1 of 2. Error: Choose at least one option
← Return to main list