Converting label-id examples to label-enclose examples

[allan-bonadio]

This work converts how <label tags are used in a wide variety of MDN examples.

There are two ways to attach a label tag to its input (or other) control:

• Put an ID attribute on the input element, and use the for attribute on the label
• Enclose the input element with a label element, along with the text of the label

Unfortunately, the ID method is more difficult and complex: you have to make up an arbitrary ID for each instance. The IDs have to be unique on the page, by the laws of ID. For large pages, this results in extra difficulty. Specifically, if a nontrivial widget appears in many places in the site, each might need a unique string to put into its ID(s). This is common on html-assembling systems like React, Angular, and others.

The Enclose method is the easiest. In particular, no ID is needed. Both of these methods have been available since HTML 4.01, when label was introduced.

In almost all cases in MDN documentation, the ID method is used. I have no idea why. This is tragic as other programmers copy this, and so the difficult method is propagated. Many programmers don't seem to realize the enclose method exists, because there's rarely MDN examples.

There are 600-some-odd instances of ID-style labels in examples in mdn/content/files. Aided by global search/replace with regexes, I've converted more than 200 or 300 of these instances in my repo, mostly those that follow patterns I used in my regex scans.

Given the number of files changed, this might be hard to get through a PR. Is this good? How should I proceed?

You can see the changes I have, so far, in

[wbamberg]

OK so as promised I asked around for some opinions and will try to summarise here.

I don't think there's consensus among maintainers for making this change to MDN, but we should do a better job of explaining the issues, especially in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label.

For clarity, we'll call "label-enclose" implicit labeling, and call "label-id" explicit labeling. The best resource I could find on this was https://css-tricks.com/html-inputs-and-labels-a-love-story/, which recommends explicit labeling:

an implicit label is not handled correctly by all assistive technologies, even if for and id attributes are used. Therefore, it is always the best idea to use an explicit label instead of an implicit label.

People also raise the issue that implicit labeling is semantically weird, because the input isn't part of the label, so why is it inside the label?

On the other side, yes, adding IDs for inputs is cumbersome, and especially so with a componentized UI. But especially the accessibility consideration seems like a strong one, and it doesn't seem that we have a justification for the proposed change.

But we don't explain this well in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label, and we should.

[wbamberg]

I filed mdn/content#37665 to document this better.