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

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