Basic <fieldset> and <legend>
← Return to main list
This is a test case designed to determine how the <fieldset> and <legend> elements are announced in relation to an <input> by various screen readers.
Example
Code
<fieldset>
<legend>Contact details</legend>
<div>
<label for="name">Full name</label>
<input type="text" id="name">
</div>
</fieldset>
Assistive technologies
VoiceOver
- Chrome: Full name. Edit text. Contact details. Group.
- Firefox: Full name. Edit text. Contact details. Group.
- Safari: Full name. Edit text. Contact details. Contact details. Group. [Legend announced twice]
NVDA
- Chrome: Contact details. Grouping. Full name. Edit. Blank.
- Firefox: Contact details. Grouping. Full name. Edit. Has autocomplete. Blank.
- Edge: Contact details. Grouping. Full name. Edit. Blank.
JAWS
- Chrome: Contact details. Group. Full name. Edit. Type in text.
- Firefox: Contact details. Full name. Edit. Type in text.
- Edge: Contact details. Group. Full name. Edit. Type in text.
← Return to main list