label accessibility advice is misleading

[djcsdy]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

What specific section or headline is this issue about?

Accessibility concerns > Interactive content

What information was incorrect, unhelpful, or incomplete?

Don't place interactive elements such as anchors or buttons inside a label. Doing so makes it difficult for people to activate the form input associated with the label.

This text is misleading because button is itself a labellable element.

For example:

<label>
    <button><img src="icon.png" alt=""></button>
    Agree
</label>

In this example, the button is the element being labelled. The text is not intended to discourage this, but I have encountered experienced developers telling me that this pattern is inaccessible citing the above text in MDN.

What did you expect to see?

The text should make it clear that:

• The element that is being labelled may be a descendant of the label, regardless of whether it is a button or some other labellable element.
• Other interactive elements that are not the element being labelled should not be a descendant of the label.

I'm not sure how to word this in a way that isn't overly complicated or confusing, so I'm reporting an issue here instead of trying to fix this myself.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

* Folder: `en-us/web/html/element/label` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/html/element/label/index.md * Last commit: https://github.com/mdn/content/commit/fdd3ac5598c3ddceb71e59949b003936ae99f647 * Document last modified: 2024-02-22T19:57:33.000Z

[stephenlf]

Here's one way to phrase what you're trying to say:

Other than the element being labeled, no interactive elements such as anchors or buttons should be placed inside a label. Doing so makes it difficult for people to activate the form input associated with the label.

However, your coworkers' misconceptions may be more valid than you realize. Check out this paragraph from further down the page.

An <input> element with a type="button" declaration and a valid value attribute does not need a label associated with it. Doing so may actually interfere with how assistive technology parses the button input. The same applies for the <button> element.

[djcsdy]

I don't think that second quote contradicts what I'm saying, but I'm prepared to be corrected. Labelling a button that already provides its own label does seem like it might be a bad idea, and it's not something I would personally do. (To be honest labelling a button with <label> is in any case something I have done maybe once in twenty years).

My assumption is that labelling a button with no text (<input type="button" value="">, or <button></button>) would be ok, but granted it's not something that comes up very often. I would also hope that labelling the rarely used <input type="image"> would be ok. Semantically it seems like a reasonable use of <label>, and the spec does explicitly include <button> as a labelable element.

However assistive technology can behave in surprising ways, and I haven't had an opportunity to test it directly in many years, so I could be completely mistaken.

Suffice to say, clearly there is room for misunderstanding the current text, so I think it should be considered for revision even if (or perhaps especially if) my understanding is not exactly correct.

[estelle]

Is this fixed by https://github.com/mdn/content/pull/33916?

[Josh-Cena]

@estelle No; this issue is about the "Accessibility concerns" section of the <label> page, which implies that interactive elements should not be placed inside a label, while in fact only interactive elements not being labeled should not be placed inside the label.

(I also don't think #33916 made it clear whether buttons, without a value, can be labeled.)