Standards on behaviour of nested labels

Question

I was wondering what would happen if I'd nest 2 <label> tags, and it turns out, in all the most recent versions of all browsers, except for Opera, clicking the inner label results in only that label being clicked. Here's a demo of nested label tags' behaviour.

My question is: Are there any standards on the behaviour of browsers when handling click events in nested labels? All I could find was this MDN section about Gecko's behaviour, but I couldn't find anything about the other browsers.

The reason this is interesting to me is because if it is possible to nest label tags and still be able to select the correct input with its closest surrounding label, then it's possible to make awesome things like this. If nested label behaviour is not defined in any standards (so any browser could do whatever they want), this won't be an option at all, not even in the future. The format for any of such tabs would be:

<label>
    <input type="radio" name="1">
    <span>Shown label</span>
    <div>Contents of the tab</div>
    <!--repeat, put further identically-formatted <label>s here-->
</label>

This tab system is already possible when not nesting labels, by assigning a for attribute to the label, and an id to the input, but then you'd have to worry about unique ids for every input, and that's a lot more effort than just doing it this way. Here is another demo of that (and as you can see, it's impossible to correctly mark the label that is checked now).

<label for="tabN">
    <span>Shown label<span>
</label>
<input type="radio" name="1">
<div>Contents of the tab</div>
<!--repeat, put further identically-formatted structures here-->

PS: Please don't answer this question with "this is not what inputs and labels were designed to do!". I know that, I am just wondering about if there are any hopes for this becoming possible, including in Opera.

Hypertonic

Answer 1

As you know, it is not allowed to nest label elements, as label has the following content model:

Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements.

HTML5 defines what happens when a user activates interactive content:

Certain elements in HTML have an activation behavior, which means that the user can activate them. This triggers a sequence of events dependent on the activation mechanism, and normally culminating in a click event, as described below.

Step 3 of "When a pointing device is clicked" says:

Let e be the nearest activatable element of the element designated by the user (defined below), if any.

To find the nearest activatable element, an algorithm is defined:

1. If target has a defined activation behavior, then return target and abort these steps.
2. If target has a parent element, then set target to that parent element and return to the first step.
3. Otherwise, there is no nearest activatable element.

This section doesn’t explicitly include the case of an invalid nesting of interactive content. I’m not sure if this algorithm also applies for invalid code (probably not). But if it would apply, only the inner label should fire.

Papst

Thanks for the detailed answer! I've decided not to use nested labels because the standard doesn't allow it, but your answer really helps in understanding what is supposed to happen. So basically, Opera is not doing what it should do when handling the click event on the label, right? – Hypertonic

@joeytje50: I don’t know for sure. If this algorithm also applies in case of invalid nesting of interactive content, then yes, Opera is doing it wrong. But it may also be the case that this algoritm only needs to work that way for valid HTML. The latter is the safe bet here (specs could never consider all possible cases of invalid markup, so why should they here, if not explicitly stated). – Papst

Answer 2

The html5 spec explicitly says:

The label element must not contain any nested label elements.

The way browsers deal with nested labels therefore is undefined. Beyond that, for attributes are important for accessibility and useability and should not be omitted.

Alisaalisan

the for attribute is optional, you can also nest an input element inside a label to get the exact same result. That site seems unaware of this, but I've seen enough sites that say that omitting the for and id labels is perfectly fine. Omitting those doesn't mean the accessibility is reduced at all. Thanks for the answer though. – Hypertonic