WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: aria-controls

for

From: Birkir R. Gunnarsson
Date: Jul 6, 2020 4:31AM

It's a tricky situation. aria-controls does not rearrange content
order for a screen reader. It merely indicates the relationship
between the button and the content affected by the button (and it has
very limited screen reader support, I think only Jaws exposes it).
I think master Hayden wrote the "aria-controls is poop" article, too
lazy to Google the URL but it's both amusing and he's basically
correct.
Best to change the content order, it's going to be a bit of a fight
with the designersw I suppose.
If not possible, there is another sort of hack.

You can use aria-owns to rearrange the content, provided you have an
element that owns both the content and the button and that both have
unique id attributes.

<div aria-owns="b1 c1">

<div id="c1">I am the content displayed when you press a button</div>

<button id="b1">I am the button</button>
</div>


Jaws shows the button before the content in Chrome, I'm also too lazy
to check other combinations (just got up), but in previous aria-owns
testing this appears to work in Chrome and, I think, Firefox but no
idea about the rest, it won't have universal support.
#NeedCoffee

On 7/6/20, Miriam Fukushima < <EMAIL REMOVED> > wrote:
> Hello everyone,
>
> I just read about aria-controls and that JAWS doesn't announce it.
>
> I recently saw a button to reveal more content beneath a text.
> When you press it, it slides downwards and reveals more content above
> itself.
> It has aria-expanded and aria-controls.
>
> How would be the recommendation for that kind of control to communicate
> where to find the expanded content?
>
>
> Thank you very much for the input!
>
>
> Regards,
>
> Miriam
>
> > > > >


--
Work hard. Have fun. Make history.