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

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