Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grouping Controls has outdated advice on duplicating legend text #890

Open
dlockhart opened this issue Sep 26, 2024 · 0 comments
Open

Grouping Controls has outdated advice on duplicating legend text #890

dlockhart opened this issue Sep 26, 2024 · 0 comments

Comments

@dlockhart
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants