Radio group using role="radiogroup"
← Return to main list
This is a test case designed to determine how the radiogroup
role is announced in relation to a radio group by various screen readers.
Example
Code
<div role="radiogroup" aria-labelledby="group-heading">
<h3 id="group-heading">Do you like boats?</h3>
<div>
<input type="radio" id="boats-y" name="boats">
<label for="boats-y">Yes</label>
</div>
<div>
<input type="radio" id="boats-n" name="boats">
<label for="boats-n">No</label>
</div>
</div>
Assistive technologies
VoiceOver
- Chrome: Yes. Radio button. 1 of 2. Do you like boats? Group.
- Firefox: Yes. Radio button. 1 of 2. Do you like boats? Group.
- Safari: Yes. Radio button. 1 of 2. Do you like boats? Group.
NVDA
- Chrome: Do you like boats? Grouping. Yes. Radio button. Not checked. 1 of 2.
- Firefox: Do you like boats? Grouping. Yes. Radio button. Not checked. 1 of 2.
- Edge: Do you like boats? Grouping. Yes. Radio button. Not checked. 1 of 2.
JAWS
- Chrome: Do you like boats? Yes. Radio button. Not checked. 1 of 2. [Group not announced]
- Firefox: Do you like boats? Yes. Radio button. Not checked. Yes. Radio button. Not checked. 1 of 2. [Group not announced]
- Edge: Do you like boats? Yes. Radio button. Not checked. 1 of 2. [Group not announced]
← Return to main list