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

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/).