Test case: nested fieldset elements

The HTML <fieldset> and <legend> elements group together related fields, and provide a label for the group.

Test case

About you


Your address




Test code


<form>
<fieldset>
<legend>About you</legend>

<label for="name">Name</label>
<input type="text" id="name">

<label for="email">Email</label>
<input type="email" id="email">

<fieldset>
<legend>Your address</legend>

<label for="add1">Street</label>
<input type="text" id="add1">

<label for="add2">City</label>
<input type="text" id="add2">

<label for="post">Postcode</label>
<input type="text" id="post">
</fieldset>

<label for="tel">Phone</label>
<input type="tel" id="tel">
</fieldset>

<input type="submit" value="Sign up">
</form>

Expected results

When a screen reader enters a fieldset for the first time, or returns to a fieldset, the legend should be announced folowed by the field and its label.

In this test case the "About you" legend should be announced when focus moves to the "Name" field, the "Your address" legend should be announced when focus moves to the "Street" field, and the "About you" legend should be announced again when focus moves to the "Phone" field.

Note: this assumes the tab key is being used to move forwards through the form.

Results

Screen reader support for nested fieldsets
Chrome Notes Edge Notes Firefox Notes IE Notes Safari Notes
Jaws Yes "About you" announced when "Phone" field receives focus N/A> No "About you" not announced when "Phone" field receives focus Yes "About you" is announced when "Phone" field receives focus N/A
Narrator N/A No No legends announced N/A No No legends announced N/A
NVDA No "About you" not announced when "Phone" field receives focus N/A No "About you" not announced when "Phone" field receives focus No "About you" not announced when "Phone" field receives focus N/A
VoiceOver (OSX) N/A N/A N/A N/A Yes "About you" announced when "Phone" field receives focus