ariaLabelledByElements describes naming "generic container elements", a prohibited "generic" role by default?

[TomStrepsil]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabelledByElements

What specific section or headline is this issue about?

Element: ariaLabelledByElements property

What information was incorrect, unhelpful, or incomplete?

The introduction states:

The property is primarily intended to provide a label for elements that don't have a standard method for defining their accessible name. For example, this might be used to name a generic container element, such as a <div> or <span>

However the w3c spec states:

Authors MUST NOT specify aria-labelledby on an element which has an explicit or implicit WAI-ARIA role where aria-labelledby is prohibited

With "Roles which cannot be named (Name prohibited)" including:

generic

With <div> or <span> being given as the canonical example:

The generic role is intended for use as the implicit role of generic elements in host languages (such as HTML div or span)

The suggestion is that ariaLabelledByElements is a direct correspondence to aria-labelledby.

See also here.

What did you expect to see?

Perhaps a caveat around providing accessible names to prohibited roles? Or a reference on why ariaLabelledByControls is not a direct correspondence to aria-labelledby and thus is able to label these?

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

https://w3c.github.io/aria/#aria-labelledby
https://w3c.github.io/aria/#namefromprohibited
https://w3c.github.io/aria/#generic
https://w3c.github.io/aria/#accessibilityroleandproperties-correspondence
https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#:~:text=generic,Prohibited

Do you have anything more you want to share?

No response

[Josh-Cena]

@hamishwillee

[hamishwillee]

Thanks @TomStrepsil .

So the property is a flexible alternative to aria-labelledby, where the difference is that you can use it to specify an element that does not have an id. As documented: "The property reflects the element's aria-labelledby attribute when it is defined, but only for listed reference id values that match valid in-scope elements. ..."

Therefore there is a near direct correspondence between the two, in particular for the aspects you are pointing out.

The confusion here is ARIA prohibits generic elements using the "labelledby" - elements that have a role of "generic" -which is true of div and span by default. However you can give these elements a role, at which point they are no longer generic.
That's what you see in the examples in aria-labelledby.

Note also that you can GET the name from a div or span that has a generic role.

The example for this property is correct - it gets the label for an input from some generic elements.
To fix this I've clarified that you can't just label a div/span unless you give it an appropriate role.

See #43779