Description
Currently, the input-requires-label
rule forces the input tag to have an id attribute to associate a label tag, but the input tag without id attribute can be considered to be associated with a nesting label tag.
Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:
<label>: The Input Label element - HTML: HyperText Markup Language | MDN
According to HTML Standard,
If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.
So, my idea is to modify the rule to allow the first input tag nested inside a label tag without the for attribute.
Here is a small example: clicking on the "bar" label toggles the "baz" checkbox associated with the for attribute, instead of the nested "bar" checkbox.
https://jsfiddle.net/pL5s0mvk/