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

On a practical level, if you put a heading inside a button, screen readers may not see it. Currently, NVDA/Firefox is okay with them but in JAWS/Chrome and VoiceOver/Safari the heading isn't announced as a heading when the button is tabbed to or arrowed to and it cannot be navigated to using the 'h' shortcut.

Mark
________________________________
From: Bernat Lleonart <bernat.lleonart@proton.me>
Sent: Sunday 7 July 2024 07:18
To: w3c-wai-ig@w3.org <w3c-wai-ig@w3.org>
Subject: [EXTERNAL] Aria role="heading" and aria-level inside buttons

You don't often get email from bernat.lleonart@proton.me. Learn why this is important<https://aka.ms/LearnAboutSenderIdentification>
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/>.