Nested <fieldset>
← Return to main list
This is a test case designed to determine how nested <fieldset> and <legend> elements are announced by various screen readers.
Example
Code
<fieldset>
<legend>What type of cars do you like?</legend>
<fieldset>
<legend>Size</legend>
<ul>
<li>
<input type="checkbox" id="large">
<label for="large">Large</label>
</li>
<li>
<input type="checkbox" id="small">
<label for="small">Small</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>Type</legend>
<ul>
<li>
<input type="checkbox" id="sedan">
<label for="sedan">Sedan</label>
</li>
<li>
<input type="checkbox" id="wagon">
<label for="wagon">Wagon</label>
</li>
</ul>
</fieldset>
</fieldset>
Assistive technologies
VoiceOver
- Chrome: Large. Unticked. Tick box. List. 2 items. [Neither of the legends are announced]
- Firefox: Large. Unticked. Checkbox. List. 2 items. [Neither of the legends are announced]
- Safari: Large. Unticked. Tick box. Size. List 2 items [Outer legend not announced]
NVDA
- Chrome: What type of cars do you like? Grouping. Size. Grouping. List with 2 items. Large. Checkbox. Not checked.
- Firefox: What type of cars do you like? Grouping. Size. Grouping. List with 2 items. Large. Checkbox. Not checked.
- Edge: What type of cars do you like? Grouping. Size. Grouping. List with 2 items. Large. Checkbox. Not checked.
JAWS
- Chrome: What type of cars do you like? Group. Size. Group. List with 2 items. Large. Checkbox. Not checked. To check press space bar.
- Firefox: What type of cars do you like? Size. Large. Checkbox. Not checked. To check press space bar.
- Edge: What type of cars do you like? Group. Size. Group. List with 2 items. Large. Checkbox. Not checked. To check press space bar.
← Return to main list