Re: Aria role="heading" and aria-level inside buttons

Hi,

What I'm building is a page for an item in an archaeological museum's collection.
This is the code I have (the content inside every div.accordion-content can be any kind of element). Inside <h2>Resources</h2> there is a nested accordion.

<h1>Name of the object in the collection</h1>

<div class="accordion">
<h2 class="accordion-header" id="tab0-0">
<button type="button" aria-expanded="false" aria-controls="panel0-0">Technical information</button>
</h2>
<div class="accordion-content" id="panel0-0" aria-hidden="true" aria-labelledby="tab0-0">
<p>lorem ipsum…</p>
</div>
<h2 class="accordion-header" id="tab0-1">
<button type="button" aria-expanded="false" aria-controls="panel0-1">Related content</button>
</h2>
<div class="accordion-content" id="panel0-1" aria-hidden="true" aria-labelledby="tab0-1">
<p>Related content…</p>
<ul>
<li>Related content…</li>
<li>Related content…</li>
<li>Related content…</li>
</ul>
</div>
<h2 class="accordion-header" id="tab0-2">
<button type="button" aria-expanded="false" aria-controls="panel0-2">Resources</button>
</h2>
<div class="accordion-content" id="panel0-2" aria-hidden="true" aria-labelledby="tab0-2">
<div class="accordion">
<h3 class="accordion-header" id="tab2-0">
<button type="button" aria-expanded="false" aria-controls="panel2-0">Audiovisual Material</button>
</h3>
<div class="accordion-content" id="panel2-0" aria-hidden="true" aria-labelledby="tab2-0">
<h4>Activities</h4>
<ul>
<li>
<a href="#">Activity 1</a>
</li>
<li>
<a href="#">Activity 2</a>
</li>
<li>
<a href="#">Activity 3</a>
</li>
</ul>
<h4>Learning Material</h4>
<ul>
<li>
<a href="#">Learning Material 1</a>
</li>
<li>
<a href="#">Learning Material 2</a>
</li>
<li>
<a href="#">Learning Material 3</a>
</li>
</ul>
</div>
<h3 class="accordion-header" id="tab2-1">
<button type="button" aria-expanded="false" aria-controls="panel2-1">3D Objects</button>
</h3>
<div class="accordion-content" id="panel2-1" aria-hidden="true" aria-labelledby="tab2-1">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus odio veniam architecto unde quis distinctio, vitae nam consequatur ipsum, porro enim quaerat atque, facere debitis velit assumenda adipisci tempora quasi?</p>
</div>
<h3 class="accordion-header" id="tab2-2">
<button type="button" aria-expanded="false" aria-controls="panel2-2">PDFs</button>
</h3>
<div class="accordion-content" id="panel2-2" aria-hidden="true" aria-labelledby="tab2-2">
<ul>
<li>
<a href="#">PDF 1</a>
</li>
<li>
<a href="#">PDF 2</a>
</li>
<li>
<a href="#">PDF 3</a>
</li> </ul>
</div>
</div>
</div>
<h2 class="accordion-header" id="tab0-3">
<button type="button" aria-expanded="false" aria-controls="panel0-3">Restoration</button>
</h2>
<div class="accordion-content" id="panel0-3" aria-hidden="true" aria-labelledby="tab0-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit…</p>
<ul>
<li>Lorem ipsum dolor…</li>
<li>Lorem ipsum dolor…</li>
<li>Lorem ipsum dolor…</li>
</ul>
</div>
<h2 class="accordion-header" id="tab0-4">
<button type="button" aria-expanded="false" aria-controls="panel0-4">Bibliography</button>
</h2>
<div class="accordion-content" id="panel0-4" aria-hidden="true" aria-labelledby="tab0-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae quas consectetur fugit necessitatibus fuga? Ex itaque repudiandae voluptate. Iure quisquam molestiae quas officia magni voluptatem praesentium minus necessitatibus. Velit, laboriosam?</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li>Eum, quibusdam neque molestias, delectus enim nesciunt et nisi</li>
<li>Odio natus placeat possimus laudantium</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li>Odio natus placeat possimus laudantium</li>
</ul>
</div></div>

The use of accordions is a design decision, as the content inside each "accordion-content" can be pretty long.

Thanks for your indications.

--
Bernat Lleonart

Enviat amb el correu segur de [Proton Mail](https://proton.me/).

El dimarts, 9 de juliol 2024 a les 14:41, Benjamin Love <benjamin.james.love@gmail.com> va escriure:

> Maybe describe (if you are unable to link to) the project.
>
> I’ve never been a fan of projects that mix headings with collapse/expand of sectioned content. Of course, there are some cases where this feature can be useful. The code snippet provided is too stripped down to suggest the purpose of collapse feature. To Adam’s comments, it suggests an uncommon or unlikely scenario.
>
> Are you creating a long form publication as single webpage application? You should keep in mind if you’re nesting headings inside your expand/collapse region, user will not have access to the heading structure/outline those nested sections when they are hidden, which may or may not be a barrier depending on the type of reading scenario this application is promoting.
>
> Ben
>
> On Mon, Jul 8, 2024 at 8:19 PM Bernat Lleonart <bernat.lleonart@protonmail.ch> wrote:
>
>> Hi,
>>
>> I'm using headings because there are accordions nested inside other accordions. Finally I've followed this structure:
>>
>> <h1>Main title</h1>
>>
>> <div class="accordion">
>>
>> <h2 class="accordion-header">
>>
>> <button type="button">Heading 2</button>
>>
>> </h2>
>>
>> <div class="accordion-content">
>>
>> <div class="accordion">
>>
>> <h3 class="accordion-header">
>>
>> <button type="button">Heading 3</button>
>>
>> </h3>
>>
>> <div class="accordion-content">
>>
>> <h4>Heading 4</h4>
>>
>> <p>Lorem ipsum dolor sit amet.</p>
>>
>> <h4>Heading 4</h4>
>>
>> <p>Lorem ipsum dolor sit amet.</p>
>>
>> </div>
>>
>> </div>
>>
>> </div>
>>
>> </div>
>>
>> Thanks.
>>
>> --
>> Bernat Lleonart
>>
>> Enviat amb el correu segur de [Proton Mail](https://proton.me/).
>>
>> El dimarts, 9 de juliol 2024 a les 02:57, Benjamin Love <benjamin.james.love@gmail.com> va escriure:
>>
>>> What is motivating you to use headings in this context?
>>>
>>> Headings are meaningful labels noting divisions in blocks of content (often when there is no other reliable structural logic in place to signal such divisions). In other words, what is telling you to introduce a heading structure?
>>>
>>> I do not have access to the specific build, but for example, if this was a “list” of entries that did not include multi-sectioned subcontent within the expanded region, than adding in the functional element (button in this case) is a meaningful enough marker/label… I think.
>>>
>>> If your expanded region content contains “subsections” requiring headings, however, I would apply H2 and position the collapse / expand functional element (button) after/within heading.
>>>
>>> This sounds like it is about selecting an appropriate plugin to support the function. I would go with bootstrap or something akin. All the requirements are “out of the box.”
>>>
>>> I’d have to see the code, but if there’s a reliable pattern, you can use JS to iterate over the plugin’s output to “re-construct.” It looks like it uses class @accordion-header to mark button labels. I would use JS to copy button text to a new header element (h2), insert a new button (removing old) inside new heading and apply an aria-controls to each button pointing to unique identifier of the container it toggles??? Maybe?
>>>
>>> Again, another plugin??? But maybe that’s not possible.
>>>
>>> On Sat, Jul 6, 2024 at 11:24 PM Bernat Lleonart <bernat.lleonart@proton.me> wrote:
>>>
>>>> Hi
>>>>
>>>> I have this markup, and although the validator doesn't show any error, I'd like to know if it would create any problem to users with assistive technologies:
>>>>
>>>> <h1>Main heading</h1>
>>>> <button><span role="heading" aria-level="2">Button with heading 2</span></button>
>>>> <button><span role="heading" aria-level="3">Button with heading 3</span></button>
>>>> <h4>Heading 4</h4>
>>>>
>>>> The validator outline shows that headings 2 and 3 are being skipped.
>>>>
>>>> Any help will be really appreciated.
>>>>
>>>> Thanks.
>>>>
>>>> --
>>>> Bernat Lleonart
>>>>
>>>> Enviat amb el correu segur de [Proton Mail](https://proton.me/).