E-mail List Archives
Re: ARIA roles and multiple descendants
From: Jonathan Avila
Date: May 12, 2020 7:56AM
- Next message: Nolan Darilek: "Re: ARIA roles and multiple descendants"
- Previous message: Nolan Darilek: "ARIA roles and multiple descendants"
- Next message in Thread: Nolan Darilek: "Re: ARIA roles and multiple descendants"
- Previous message in Thread: Nolan Darilek: "ARIA roles and multiple descendants"
- View all messages in this Thread
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.
- Next message: Nolan Darilek: "Re: ARIA roles and multiple descendants"
- Previous message: Nolan Darilek: "ARIA roles and multiple descendants"
- Next message in Thread: Nolan Darilek: "Re: ARIA roles and multiple descendants"
- Previous message in Thread: Nolan Darilek: "ARIA roles and multiple descendants"
- View all messages in this Thread