accname unclarified

so so intro

It is unclear to web developers, browser developers and assistive tech developers when an accessible name provided via aria-label/aria-labelledby should replace the child content as the accessible name or be announced in addition to subtree content. This results in bugs and frustration for anyone that this issue touches.

Taking the ARIA in HTML specification, Allowed descendents of ARIA roles as a starting place, which defines what are allowed descendents in terms of the HTML content model, I have some suggestions.

It should be noted at this point that I haven’t looked exhaustively for discussions on this subject and they may well be underway. The motivation for this article was a JAWS bug and a post by Jamie Teh on Mastodon

This is the age old question about whether a label should override content. That absolutely makes sense for buttons, links, etc., but it’s never been quite as clear for containers like paragraphs, table cells, etc. where there can be some nasty consequences if the label completely overrides the content.

half arsed suggestion

Any role that is allowed to contain the listed content types as descendents may have the accessible name provided via aria-label/aria-labelledby (if allowed to be named), but not mask the content it contains:

• Flow content
• Sectioning content
• Interactive content
• Palpable content
• Phrasing content

Any content defined as Phrasing content may have the accessible name provided via aria-label/aria-labelledby (if allowed to be named) and will mask its child content.

Example

In the  code example the <nav> element is named aria-labelledby the reference the heading element and the <ul> it contains is named using an aria-label In both cases as these elements are defined as allowing flow content as expected the accessible name is announced when a screen reader user navigates to the content, the user can then naviagte through the child content.

<h1 id="CM">HTML Content Models</h1>

<nav aria-labelledby="CM">
<ul aria-label="some content models">
<li><a href="#flow-content-2">Flow content</a>
<li><a href="#sectioning-content-2">Sectioning content</a>
<li><a href="#interactive-content-2">Interactive content</a>
</ul>
</nav>

The above suggestions are not fullproof and there may be some carve outs required, but everything has to start somewhere…

listen

This wrinkle in time, I can't give it no credit
I thought about my space and I really got me down
(got me down)
Got me so down, I got me a headache
My heart is crammed in my cranium and it still knows how to pound
I was counting the rings
And I fell me into sleep
I peeked to see if you were way back when
I was counting the trees
Until a day when there was one
I'd hoped beneath, asleep is where that you had been
This wrinkle in time, I can't give it no credit
I thought about my space and I really got me down
(got me down)
Got me so down, I got me a headache
My heart is crammed in my cranium and it still knows how to pound
Well, I found you
Maybe you can help me
And I can help you
This wrinkle in time, I can't give it no credit
I thought about my space and I really got me down
(got me down)
Got me so down, I got me a headache
My heart is crammed in my cranium and it still knows how to pound
Got me so down, I got me a headache
My heart is crammed in my cranium and it still knows how to pound
This wrinkle in time, I can't give it no credit
I thought about my space and I really got me down
(got me down)