Checkbox group with list
← Return to main list
This is a test case designed to determine how the <fieldset>
and <legend>
elements are announced in relation to a checkbox group by various screen readers.
Example
Code
<fieldset>
<legend>Favourite animal</legend>
<ul>
<li>
<input type="checkbox" id="dog">
<label for="dog">Dog</label>
</li>
<li>
<input type="checkbox" id="cat">
<label for="cat">Cat</label>
</li>
<li>
<input type="checkbox" id="rabbit">
<label for="rabbit">Rabbit</label>
</li>
</ul>
</fieldset>
Assistive technologies
VoiceOver
- Chrome: Dog. Unticked. Tick box. List 3 items. [Role and legend not announced]
- Firefox: Dog. Unticked. Checkbox. List 3 items. [Role and legend not announced]
- Safari: Dog. Unticked. Tick box. Favourite animal. Favourite animal. Group. [Legend announced twice]
NVDA
- Chrome: Favourite animal. Grouping. List with 3 items. Dog. Checkbox. Not checked.
- Firefox: Favourite animal. Grouping. List with 3 items. Dog. Checkbox. Not checked.
- Edge: Favourite animal. Grouping. List with 3 items. Dog. Checkbox. Not checked.
JAWS
- Chrome: Favourite animal. Group. List with 3 items. Dog. Checkbox. Not checked.
- Firefox: Favourite animal. Dog. Checkbox. Not checked.
- Edge: Favourite animal. Group. List with 3 items. Dog. Checkbox. Not checked.
← Return to main list