RE: Why are conflicts between native markup semantics and WAI-ARIA so complicated?

I'm probably going to misspeak here, but this is my understanding: ARIA lets you tell assistive technology to interpret something differently from how the browser sees it.  ARIA cannot, however, change an element's behavior in any way.

When you say a div has the role of "button", you're telling the screen reader (or any piece of AT) that you have a button, but the browser won't actually treat that as a button if you don't also specify behavior via JavaScript.  So while ARIA "wins", you actually haven't done anything to change the element itself into a button.

With the ARIA label, it's very similar, but ARIA really does have complete control.  In this case, the element is nothing but a bit of text, so you have no behaviors to worry about.  You're simply telling any AT that the piece of text should be interpreted as if it were "foo" regardless of what the browser would render to screen.  e.g., there are no underlying behaviors or semantics that you have to worry about beyond the element's text.

The hidden element is also similar - the browser has been instructed via the "hidden" attribute not to render the element in any way.  It won't be rendered to the screen, it won't be sent to a screen reader, etc.  It's not that ARIA "loses" here; it's that the element doesn't get processed.  Since the element is irrelevant (per the definition of the "hidden" attribute), the ARIA attribute is also irrelevant.

-----Original Message-----
From: Tobias Bengfort <tobias.bengfort@posteo.de> 
Sent: Tuesday, May 01, 2018 12:42 AM
To: WAI IG <w3c-wai-ig@w3.org>
Subject: Why are conflicts between native markup semantics and WAI-ARIA so complicated?

I always assumed that WAI-ARIA will always override native semantics.
But now I found <https://www.w3.org/TR/core-aam-1.1/#mapping_conflicts>.

Some examples:

- `<div role="button"></div>` has role "button" (ARIA wins)
- `<div aria-label="foo">bar</div>` has label "foo" (ARIA wins)
- `<div aria-hidden="false" hidden></div>` is hidden (native wins)

This seems overly complicated to me. What were the reasons this was decided?

tobias

Received on Tuesday, 1 May 2018 14:52:55 UTC