WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA roles and multiple descendants

for

From: Nolan Darilek
Date: May 12, 2020 7:58AM


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 REMOVED> > On Behalf Of Nolan Darilek
> Sent: Tuesday, May 12, 2020 8:52 AM
> To: <EMAIL 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.
>
> > > > > > >