E-mail List Archives
Thread: aria-controls
Number of posts in this thread: 7 (In chronological order)
From: Miriam Fukushima
Date: Mon, Jul 06 2020 3:40AM
Subject: aria-controls
No previous message | Next message →
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
From: Patrick H. Lauke
Date: Mon, Jul 06 2020 4:30AM
Subject: Re: aria-controls
← Previous message | Next message →
On 06/07/2020 10:40, Miriam Fukushima 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?
The safest option is to make sure that the newly-revealed content comes
directly after the trigger element that expands/collapses it. If that's
not possible, then one option would be to programmatically move focus to
the start of the newly-revealed content.
P
--
Patrick H. Lauke
https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Birkir R. Gunnarsson
Date: Mon, Jul 06 2020 4:31AM
Subject: Re: aria-controls
← Previous message | Next message →
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 ADDRESS 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.
From: Miriam Fukushima
Date: Tue, Jul 07 2020 12:48AM
Subject: Re: aria-controls
← Previous message | Next message →
Thank you so much for both suggestions!
I guess I'll experiment a bit, just in case and if it comes up, to
advice to put new content after the control.
Have a good day, everyone!
Miriam
On 06.07.2020 12:31, Birkir R. Gunnarsson wrote:
> 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 ADDRESS 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
>>
>> >> >> >> >>
>
From: Jonathan Cohn
Date: Tue, Jul 07 2020 6:46AM
Subject: Re: aria-controls
← Previous message | Next message →
Of more interest to me, is what would one want if aria-controls had screen reader functionality? Should it give a summary of the changes
5 items added to controlled list
Controlled item no longer exists
Perhaps some marker in Braille letting one jump to a controlled item much like the "j" in JAWS jumps one to a specific element number and shift J then jumps you back?
What other ARIA markup that uses ids for the value might be worth providing additional controls, and should they be different than what aria-controls would be provided if they did exist?
Jonathan
Jonathan Cohn
> On Jul 7, 2020, at 2:48 AM, Miriam Fukushima < = EMAIL ADDRESS REMOVED = > wrote:
>
> Thank you so much for both suggestions!
>
> I guess I'll experiment a bit, just in case and if it comes up, to advice to put new content after the control.
>
>
> Have a good day, everyone!
>
> Miriam
>
> On 06.07.2020 12:31, Birkir R. Gunnarsson wrote:
>> 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 ADDRESS 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
>>>
>>> >>> >>> >>> >>>
>>
> > > >
From: Miriam Fukushima
Date: Tue, Jul 07 2020 6:52AM
Subject: Re: aria-controls
← Previous message | Next message →
I think a jump shortcut to the controlled content and maybe having a
label of some sort read out is what I'd expect.
But as I have seen this kind of more-content-control in different
contexts, where sometimes more plain text, sometimes listitems, more
fields of a filter widget and sometimes more whole articles are added, I
think it is too complicated to specify what was added.
Regards Miriam.
On 07.07.2020 14:46, Jonathan Cohn wrote:
> Of more interest to me, is what would one want if aria-controls had screen reader functionality? Should it give a summary of the changes
> 5 items added to controlled list
> Controlled item no longer exists
> Perhaps some marker in Braille letting one jump to a controlled item much like the "j" in JAWS jumps one to a specific element number and shift J then jumps you back?
>
> What other ARIA markup that uses ids for the value might be worth providing additional controls, and should they be different than what aria-controls would be provided if they did exist?
> Jonathan
> Jonathan Cohn
>
>
>
>> On Jul 7, 2020, at 2:48 AM, Miriam Fukushima < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Thank you so much for both suggestions!
>>
>> I guess I'll experiment a bit, just in case and if it comes up, to advice to put new content after the control.
>>
>>
>> Have a good day, everyone!
>>
>> Miriam
>>
>> On 06.07.2020 12:31, Birkir R. Gunnarsson wrote:
>>> 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 ADDRESS 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
>>>>
>>>> >>>> >>>> >>>> >>>>
>> >> >> >> > > > >
From: Birkir R. Gunnarsson
Date: Tue, Jul 07 2020 1:17PM
Subject: Re: aria-controls
← Previous message | No next message
At minimum, a shortcut key to jump from the control to the content,
and from the content back to the control.
Yes, announcement of changes would be nice (similar to what Jaws for
mouseover events) but an accurate summary of the changes is very hard
to predict.
The thing that aria-controls does not provide is identifying the
content that was displayed.
My input into the tab ARIA spec, (minor though it was) was to use
aria-labelledby on the tabpanel rather than aria-controls on the tab
control (or at least require both).
If the element that was disaplyed has a grouping or landmark element
and an accessible name, a screen reader is able to indicate to users
where that content starts and where it ends.
This is harder to do, though not impossible with aria-controls (screen
readers would have to assign an automatic landmark region).
Similar attributes include aria-owns, aria-details, aria-flowto and,
to some degree, aria-describedby.
On 7/7/20, Miriam Fukushima < = EMAIL ADDRESS REMOVED = > wrote:
> I think a jump shortcut to the controlled content and maybe having a
> label of some sort read out is what I'd expect.
>
> But as I have seen this kind of more-content-control in different
> contexts, where sometimes more plain text, sometimes listitems, more
> fields of a filter widget and sometimes more whole articles are added, I
> think it is too complicated to specify what was added.
>
>
> Regards Miriam.
>
> On 07.07.2020 14:46, Jonathan Cohn wrote:
>> Of more interest to me, is what would one want if aria-controls had screen
>> reader functionality? Should it give a summary of the changes
>> 5 items added to controlled list
>> Controlled item no longer exists
>> Perhaps some marker in Braille letting one jump to a controlled item much
>> like the "j" in JAWS jumps one to a specific element number and shift J
>> then jumps you back?
>>
>> What other ARIA markup that uses ids for the value might be worth
>> providing additional controls, and should they be different than what
>> aria-controls would be provided if they did exist?
>> Jonathan
>> Jonathan Cohn
>>
>>
>>
>>> On Jul 7, 2020, at 2:48 AM, Miriam Fukushima < = EMAIL ADDRESS REMOVED = >
>>> wrote:
>>>
>>> Thank you so much for both suggestions!
>>>
>>> I guess I'll experiment a bit, just in case and if it comes up, to advice
>>> to put new content after the control.
>>>
>>>
>>> Have a good day, everyone!
>>>
>>> Miriam
>>>
>>> On 06.07.2020 12:31, Birkir R. Gunnarsson wrote:
>>>> 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 ADDRESS 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.