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

Hi,

children inside a button element are presentational, i.e. they won't be passed on to the accessibility tree. The button must be inside the heading.

You might want to try
<details>
<summary><h4>heading</h4></summary>
... expandable content ...
</details>

Jan 

> -----Original Message-----
> From: Bernat Lleonart <bernat.lleonart@proton.me>
> Sent: Sunday, July 7, 2024 8:19 AM
> 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/> .

Received on Sunday, 7 July 2024 11:47:31 UTC