WebAIM - Web Accessibility In Mind

E-mail List Archives

ARIA roles and multiple descendants

for

From: Nolan Darilek
Date: May 12, 2020 6:51AM

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.