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

Naming Form Controls with the Label Element recommends incorrect technique #2870

Closed
dotjay opened this issue Nov 30, 2023 · 4 comments
Closed
Assignees
Labels
editorial Changes to prose that don't alter intended meaning, e.g., phrasing, grammar. May fix inaccuracies. Inaccuracy Incorrect statement in prose (not a code bug) Practice Page Related to a page within the practices section of the APG

Comments

@dotjay
Copy link

dotjay commented Nov 30, 2023

On the Providing Accessible Names and Descriptions practices page under the heading Naming Form Controls with the Label Element, the text describes two techniques, commonly known to accessibility professionals as implicit and explicit labeling.

Implicit:

Wrapping the checkbox and the labeling text in a label element as follows gives the checkbox an accessible name.

Explicit:

A form control can also be associated with a label by using the for attribute on the label element.

The guidance goes on to state the following, which I believe to be incorrect:

When possible, use the above encapsulation technique for association instead of the following for attribute technique.

However, explicit labeling using for and id attributes has long been established as the preferable technique due to better support in browsers and assistive technology software, which is echoed by the WAI's own tutorial on Labeling Controls (with my emphasis):

Associating labels implicitly
In some situations, form controls cannot be labeled explicitly. For example, a content author might not know the id of a form field generated by a script, or that script might not add an id at all. In this case, the label element is used as a container for both the form control and the label text, so that the two are associated implicitly. Generally, explicit labels are better supported by assistive technology.

This is backed up by experts reporting issues with voice control software like Dragon Naturally Speaking not working with implicit labeling techniques, and more recent testing with screen readers.

I suggest that the advice on the Providing Accessible Names and Descriptions page be reworded to something like:

When possible, use the following for attribute technique for association instead of the above encapsulation technique.

@patrickhlauke
Copy link
Member

The guidance goes on to state the following, which I believe to be incorrect

good lord, well spotted. that sounds like advice from some long-forgotten past (and then it turns out this was all because of a bug in Netscape Navigator 4.x on OS 9, or something)

patrickhlauke added a commit to patrickhlauke/aria-practices that referenced this issue Dec 1, 2023
Explicit `<label>`s are preferred over implicit ones, as they have better AT support.

Closes w3c#2870
@patrickhlauke
Copy link
Member

Pull request submitted here @dotjay #2871

@daniel-montalvo
Copy link
Contributor

Thanks much @dotjay and @patrickhlauke for your comments and for opening a PR on this.

@mcking65 Could we discuss this in the next APG meeting?

@mcking65 mcking65 added editorial Changes to prose that don't alter intended meaning, e.g., phrasing, grammar. May fix inaccuracies. Practice Page Related to a page within the practices section of the APG Inaccuracy Incorrect statement in prose (not a code bug) labels Dec 5, 2023
mcking65 added a commit that referenced this issue Dec 18, 2023
…when using 'label' element (pull #2882)

Resolves issue #2870 by revising the content of the section describing usage of the HTML label element. Revisions include:
1. Move description of the `for` attribute technique before the description of the encapsulation technique.
2. Note that using the `for` attribute is known as 'explicit association' and using encapsulation is known as 'implicit association'.
3. State that explicit association has better AT/browser support than implicit association.

---------

Co-authored-by: Patrick H. Lauke <[email protected]>
@mcking65
Copy link
Contributor

PR #2882, which resolves this issue is merged. The change is scheduled for publication tomorrow, December 19.

Thank you @dotjay and @patrickhlauke for raising the issue and shaping the resolution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
editorial Changes to prose that don't alter intended meaning, e.g., phrasing, grammar. May fix inaccuracies. Inaccuracy Incorrect statement in prose (not a code bug) Practice Page Related to a page within the practices section of the APG
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants