wai-website
wai-website copied to clipboard
Grouping Controls has outdated advice on duplicating legend text
Resource URL
https://www.w3.org/WAI/tutorials/forms/grouping/
Description
Under "Approach 1: Associating related controls with fieldset" in "Example 3: Related Fields" it states:
In case the
<legend>
is not read by screen readers (see note below), labels for the first form control in each group should include the group’s name. This name can be hidden visually.
And then the note it refers to:
Note: Depending on the configuration, some screen readers read out the legend either with every form element, once, or, rarely, not at all. To accommodate this consider the following:
- Make the legend as short as possible for situations in which it is read together with the label each time,
- Make the individual labels sufficiently self-explanatory for situations in which legends are not read aloud, without repeating the legend in every label.
Is this guidance still valid? In our testing, all AT/browser combinations either read the legend text with each input or with the first input when the fieldset was first entered. Duplicating the group's name in the first form control as the advice here suggests results in it being read twice in all combinations.
The advice feels like it may have been true several years ago, but today using <fieldset>
+ <legend>
properly with modern browsers and AT achieves a good result.
Link to CodePen used for testing
Test results:
- VoiceOver + Safari: reads legend with each input
- VoiceOver + Chrome/Edge: reads legend on first input
- VoiceOver + Firefox: reads the legend with each input
- JAWS + Chrome/Edge: reads legend on first input
- JAWS + Firefox: reads legend on first input
- NVDA + Chrome/Edge: reads legend on first input
- NVDA + Firefox: reads legend on first input
Versions:
- VoiceOver: macOS Sonoma 14.5
- JAWS: 2021.2107.12
- NVDA: 2024.3.1
- Safari: 17.5
- Firefox: 130
- Chrome/Edge: 129
Resource Shortname
No response