search

w3c / aria

Accessible Rich Internet Applications (WAI-ARIA)
https://w3c.github.io/aria/
Other
642 stars 124 forks source link

ARIA spec is not clear on use of the role attribute and global ARIA attributes on non-HTML elements #2254

Open Wildebrew opened 3 months ago

Wildebrew commented 3 months ago

The ARIA Spec needs to explicitly state whether global ARIA attributes are valid when used directly on custom elements

I am increasingly seeing design systems apply ARIA attributes directly to custom elements, e.g. Examples: An interactive button: <foo-button role="button" tabindex="0" aria-label="Delete"> </foo-button>

instead of: <foo-button a11yLabel="delete"> producing <button aria-label="delete"> </button>

A tablist container:

<foo-tabs role="tablist"> <button role="tab" aria-selected="true"></button> ...</foo-tabs">

A grouping element <foo-group role="group" aria-labelledby="gTitle"> <div id="gTitle"> .. group of form controls </foo-group>

My assumption has always been that you can only use ARIA attributes on valid markup language elements, but in my reading of the ARIA spec I do not explicitly speaking to this. Also I notice that the Axe Core rules do not flag this use as an ARIA validation fail.

A question and a change request:

The Question: Can ARIA only be used with valid markup language elements?

The change Request: Whether the anser is yay or nay, to add a section to the ARIA spec that speaks to this explicitly, to eliminate confusion. This could e.g. be added as a subsection of the global attributes section.

pkra commented 3 months ago

I think html-aria covers this at https://w3c.github.io/html-aria/#el-autonomous-custom-element

If role defined by ElementInternals, no role Otherwise, any role, though generic SHOULD NOT be used.

scottaohara commented 3 months ago

Autonomous custom elements are considered valid html elements.

aria, as well as native html features and scripting work with invalid custom elements as well (those without a dash in the name)

As mentioned, the aria in html spec already clarifies the question asked. On first thought, I do not think the aria spec needs to be updated further, especially since if there were to be a limitation in what the host language respected, it’d be in that spec / bridge spec (like aria in html) where that limitation would be called out. But what sort of clarification did you have in mind?

aardrian commented 3 months ago

@Wildebrew As Peter and Scott note, the ARIA in HTML spec (in the REC, not just the draft they linked) appears to cover this. Do you have enough information to close this issue?