E-mail List Archives
Thread: ARIA roles and multiple descendants
Number of posts in this thread: 8 (In chronological order)
From: Nolan Darilek
Date: Tue, May 12 2020 6:51AM
Subject: ARIA roles and multiple descendants
No previous message | Next message →
Hey folks, new here. I tried searching for my answer in the archives but
didn't find anything, so apologies if this is obvious and I've missed it.
I'm trying to add accessibility to Organice, an open source web-based
org-mode notetaking app. You can see the currently inaccessible starting
point here:
https://organice.200ok.ch/sample
The lines beginning with "*" are collapseable headers, and I'm trying to
use aria-expanded to convey that. Unfortunately, each <div> has multiple
children, which throws a monkeywrench into just slapping on a heading
role and calling it a day. And yes, ideally these should be <h1>,<h6>,
but I'm blind and would likely have a tough time swapping out the divs
for semantically-better tags and fixing the styling.
I threw together this HTML snippet that demonstrates my problem:
   <div aria-expanded="false" role="heading">
     * Text1
   </div>
   <div aria-expanded="false" role="heading">
     <span class="bullet">*</span><span> Text2</span>
   </div>
   <div aria-expanded="false" role="heading">
     <div class="bullet">*</div><div> Text3</div>
   </div>
For me, text1 and text2 appear collapsed, while text3 doesn't. Is there
any way to easily make text3 present as collapsed? Failing that, if I
just change all the child divs to spans, will that work without breaking
the visual appearance? Trying to avoid my PR being held up because of
things I can't fix, and I don't know how divs and spans compare
visually, though obviously they affect how accessible text is calculated.
Thanks a bunch.
From: Jonathan Avila
Date: Tue, May 12 2020 7:56AM
Subject: Re: ARIA roles and multiple descendants
← Previous message | Next message →
Hi, aria-expanded should be on the control that expands the content and not the expanded content itself. The content would ideally be wrapped in a region and associated with the control that controls it via aria-controls and aria-labelledby.
Jonathan
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Nolan Darilek
Sent: Tuesday, May 12, 2020 8:52 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] ARIA roles and multiple descendants
CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
Hey folks, new here. I tried searching for my answer in the archives but didn't find anything, so apologies if this is obvious and I've missed it.
I'm trying to add accessibility to Organice, an open source web-based org-mode notetaking app. You can see the currently inaccessible starting point here:
https://organice.200ok.ch/sample
The lines beginning with "*" are collapseable headers, and I'm trying to use aria-expanded to convey that. Unfortunately, each <div> has multiple children, which throws a monkeywrench into just slapping on a heading role and calling it a day. And yes, ideally these should be <h1>,<h6>, but I'm blind and would likely have a tough time swapping out the divs for semantically-better tags and fixing the styling.
I threw together this HTML snippet that demonstrates my problem:
<div aria-expanded="false" role="heading">
* Text1
</div>
<div aria-expanded="false" role="heading">
<span class="bullet">*</span><span> Text2</span>
</div>
<div aria-expanded="false" role="heading">
<div class="bullet">*</div><div> Text3</div>
</div>
For me, text1 and text2 appear collapsed, while text3 doesn't. Is there any way to easily make text3 present as collapsed? Failing that, if I just change all the child divs to spans, will that work without breaking the visual appearance? Trying to avoid my PR being held up because of things I can't fix, and I don't know how divs and spans compare visually, though obviously they affect how accessible text is calculated.
Thanks a bunch.
From: Nolan Darilek
Date: Tue, May 12 2020 7:58AM
Subject: Re: ARIA roles and multiple descendants
← Previous message | Next message →
Got it. In this case, the header itself expands the content when
clicked. I just need to figure out how to get my screen reader reporting
the correct state for this HTML, in a way that doesn't visually modify
the content.
Thanks.
On 5/12/20 8:56 AM, Jonathan Avila wrote:
> Hi, aria-expanded should be on the control that expands the content and not the expanded content itself. The content would ideally be wrapped in a region and associated with the control that controls it via aria-controls and aria-labelledby.
>
> Jonathan
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Nolan Darilek
> Sent: Tuesday, May 12, 2020 8:52 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] ARIA roles and multiple descendants
>
> CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
>
>
> Hey folks, new here. I tried searching for my answer in the archives but didn't find anything, so apologies if this is obvious and I've missed it.
>
>
> I'm trying to add accessibility to Organice, an open source web-based org-mode notetaking app. You can see the currently inaccessible starting point here:
>
>
> https://organice.200ok.ch/sample
>
>
> The lines beginning with "*" are collapseable headers, and I'm trying to use aria-expanded to convey that. Unfortunately, each <div> has multiple children, which throws a monkeywrench into just slapping on a heading role and calling it a day. And yes, ideally these should be <h1>,<h6>, but I'm blind and would likely have a tough time swapping out the divs for semantically-better tags and fixing the styling.
>
>
> I threw together this HTML snippet that demonstrates my problem:
>
>
> <div aria-expanded="false" role="heading">
> * Text1
> </div>
> <div aria-expanded="false" role="heading">
> <span class="bullet">*</span><span> Text2</span>
> </div>
> <div aria-expanded="false" role="heading">
> <div class="bullet">*</div><div> Text3</div>
> </div>
>
>
> For me, text1 and text2 appear collapsed, while text3 doesn't. Is there any way to easily make text3 present as collapsed? Failing that, if I just change all the child divs to spans, will that work without breaking the visual appearance? Trying to avoid my PR being held up because of things I can't fix, and I don't know how divs and spans compare visually, though obviously they affect how accessible text is calculated.
>
>
> Thanks a bunch.
>
> > > > > > >
From: glen walker
Date: Tue, May 12 2020 1:51PM
Subject: Re: ARIA roles and multiple descendants
← Previous message | Next message →
To expand on what Jonathan said, a heading is not typically thought of as
an interactive thing so one would not think that a heading is expandable.
Ideally, you should have a heading that contains a button and the button
would have aria-expanded. That would also allow the keyboard user to
navigate to the button and expand it. Your current example is not
accessible from the keyboard since headings are not natively focusable.
After selecting the button and toggling the aria-expanded value, then your
content can be unhidden.
You may want to look at the Accordion design pattern -
https://www.w3.org/TR/wai-aria-practices/#accordion
On Tue, May 12, 2020 at 7:58 AM Nolan Darilek < = EMAIL ADDRESS REMOVED = >
wrote:
> Got it. In this case, the header itself expands the content when
> clicked. I just need to figure out how to get my screen reader reporting
> the correct state for this HTML, in a way that doesn't visually modify
> the content.
>
>
> Thanks.
>
> On 5/12/20 8:56 AM, Jonathan Avila wrote:
> > Hi, aria-expanded should be on the control that expands the content and
> not the expanded content itself. The content would ideally be wrapped in a
> region and associated with the control that controls it via aria-controls
> and aria-labelledby.
> >
> > Jonathan
> >
>
From: Birkir R. Gunnarsson
Date: Sat, May 16 2020 3:51AM
Subject: Re: ARIA roles and multiple descendants
← Previous message | Next message →
You can use <details>/</summary> for this
<details>
<summary>What is an email address?</summary>
<p>Glad you asked.</p>
</details>
The summary element becomes a real button with aria-expanded, the
paragraph with "glad you asked" is the content that is
displayed/hidden when you toggle the button.
Browser handles the displaying or hiding and setting the aria-expanded
attribute to match.
On 5/12/20, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> To expand on what Jonathan said, a heading is not typically thought of as
> an interactive thing so one would not think that a heading is expandable.
>
> Ideally, you should have a heading that contains a button and the button
> would have aria-expanded. That would also allow the keyboard user to
> navigate to the button and expand it. Your current example is not
> accessible from the keyboard since headings are not natively focusable.
>
> After selecting the button and toggling the aria-expanded value, then your
> content can be unhidden.
>
> You may want to look at the Accordion design pattern -
> https://www.w3.org/TR/wai-aria-practices/#accordion
>
>
> On Tue, May 12, 2020 at 7:58 AM Nolan Darilek < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Got it. In this case, the header itself expands the content when
>> clicked. I just need to figure out how to get my screen reader reporting
>> the correct state for this HTML, in a way that doesn't visually modify
>> the content.
>>
>>
>> Thanks.
>>
>> On 5/12/20 8:56 AM, Jonathan Avila wrote:
>> > Hi, aria-expanded should be on the control that expands the content and
>> not the expanded content itself. The content would ideally be wrapped in
>> a
>> region and associated with the control that controls it via aria-controls
>> and aria-labelledby.
>> >
>> > Jonathan
>> >
>>
> > > > >
--
Work hard. Have fun. Make history.
From: glen walker
Date: Sat, May 16 2020 9:29AM
Subject: Re: ARIA roles and multiple descendants
← Previous message | Next message →
I had tried using detail/summary in the past and didn't get good results
across NVDA, JAWS, and VoiceOver with various browsers but it's been a
while. Have you tested it widely to see if things have gotten better?
On Sat, May 16, 2020 at 3:52 AM Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:
> You can use <details>/</summary> for this
> <details>
> <summary>What is an email address?</summary>
> <p>Glad you asked.</p>
> </details>
> The summary element becomes a real button with aria-expanded, the
> paragraph with "glad you asked" is the content that is
> displayed/hidden when you toggle the button.
> Browser handles the displaying or hiding and setting the aria-expanded
> attribute to match.
>
>
>
From: Birkir R. Gunnarsson
Date: Sat, May 16 2020 11:08AM
Subject: Re: ARIA roles and multiple descendants
← Previous message | Next message →
It's getting better, but I only tested the combinations I mentioned
(Jaws with most recent versions of Edge, Chrome and Firefox).
Edge - almost works, once you open the accordion and close it again
the accordion content is still exposed.
* Chrome and Firefox - works
* IE11 - does not work and never will, but it's time we move past IE11.
Have not had a chance to test on iOS/Android/OSX.
Since the control is exposed by the browser, NVDA should yield the
same result as Jaws.
Since I have a girl who is turning 8 years old today I won't have time
to "muck around" with testing until tomorrow.
On 5/16/20, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> I had tried using detail/summary in the past and didn't get good results
> across NVDA, JAWS, and VoiceOver with various browsers but it's been a
> while. Have you tested it widely to see if things have gotten better?
>
> On Sat, May 16, 2020 at 3:52 AM Birkir R. Gunnarsson <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> You can use <details>/</summary> for this
>> <details>
>> <summary>What is an email address?</summary>
>> <p>Glad you asked.</p>
>> </details>
>> The summary element becomes a real button with aria-expanded, the
>> paragraph with "glad you asked" is the content that is
>> displayed/hidden when you toggle the button.
>> Browser handles the displaying or hiding and setting the aria-expanded
>> attribute to match.
>>
>>
>>
> > > > >
--
Work hard. Have fun. Make history.
From: Nolan Darilek
Date: Sat, May 16 2020 11:13AM
Subject: Re: ARIA roles and multiple descendants
← Previous message | No next message
Oh, that's neat. Thanks, I'll probably switch to that and hope someone
else can fix the styling for me. The accordion option is also sort of
what I want, but I'd hoped to make the entire header row expandable,
which is what I think this does. I'll try it if details/summary isn't
accepted.
Also confirming that this works under latest Orca and Firefox, for
anyone here interested in Linux accessibility.
Thanks again.
On 5/16/20 4:51 AM, Birkir R. Gunnarsson wrote:
> You can use <details>/</summary> for this
> <details>
> <summary>What is an email address?</summary>
> <p>Glad you asked.</p>
> </details>
> The summary element becomes a real button with aria-expanded, the
> paragraph with "glad you asked" is the content that is
> displayed/hidden when you toggle the button.
> Browser handles the displaying or hiding and setting the aria-expanded
> attribute to match.
>
>
> On 5/12/20, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>> To expand on what Jonathan said, a heading is not typically thought of as
>> an interactive thing so one would not think that a heading is expandable.
>>
>> Ideally, you should have a heading that contains a button and the button
>> would have aria-expanded. That would also allow the keyboard user to
>> navigate to the button and expand it. Your current example is not
>> accessible from the keyboard since headings are not natively focusable.
>>
>> After selecting the button and toggling the aria-expanded value, then your
>> content can be unhidden.
>>
>> You may want to look at the Accordion design pattern -
>> https://www.w3.org/TR/wai-aria-practices/#accordion
>>
>>
>> On Tue, May 12, 2020 at 7:58 AM Nolan Darilek < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>> Got it. In this case, the header itself expands the content when
>>> clicked. I just need to figure out how to get my screen reader reporting
>>> the correct state for this HTML, in a way that doesn't visually modify
>>> the content.
>>>
>>>
>>> Thanks.
>>>
>>> On 5/12/20 8:56 AM, Jonathan Avila wrote:
>>>> Hi, aria-expanded should be on the control that expands the content and
>>> not the expanded content itself. The content would ideally be wrapped in
>>> a
>>> region and associated with the control that controls it via aria-controls
>>> and aria-labelledby.
>>>> Jonathan
>>>>
>> >> >> >> >>
>