wai-website icon indicating copy to clipboard operation
wai-website copied to clipboard

Grouping Controls has outdated advice on duplicating legend text

Open dlockhart opened this issue 5 months ago • 0 comments

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

dlockhart avatar Sep 26 '24 14:09 dlockhart