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

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