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

Hi,

Thanks for your feedback.

Yes, I'm building an accordion, and for project reasons, I have to use this code (which doesn't use headings): https://github.com/10up/component-library/tree/develop/packages/accordion

I'm trying to include the headings to the html, so that's why I thought of aria-level, because if I use heading tags (h2, h3…) the plugin doesn't work.

--
Bernat Lleonart

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

El diumenge, 7 de juliol 2024 a les 09:32, Adam Cooper <cooperad@bigpond.com> va escriure:

> Assuming you’re trying to construct an accordion or a disclosure of some variety?
>
> How about the following:
>
> <h1>heading level 1</h1>
>
> <h2><button type=”button”>accordion title 1</button></h2>
>
> …
>
> <h2><button type=”button”>accordion title 2</button></h2>
>
> …
>
> <h2><button type=”button”>accordion title 3</button></h2>
>
> Here’s a starting point for accordions/disclosures:
>
> https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/
>
> assuming, also, that you’re talking about an HTML validator? I wouldn’t bother because validation per se has little discernible impact on the interoperability of user agents these days …
>
> Also, how about downloading NVDA and checking for yourself?
>
> From: Bernat Lleonart <bernat.lleonart@proton.me>
> Sent: Sunday, July 7, 2024 4:19 PM
> To: w3c-wai-ig@w3.org
> Subject: Aria role="heading" and aria-level inside buttons
>
> 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/).