Heading levels in Instant Apps

[CatherineWendland]

I'm working on doing accessibility assessments for some of our public-facing Instant Apps. When I run them through the WAVE extension, they're always missing a level 1 heading, and H2 is often skipped. 

Is there something I can change in the settings to get the headings correct? Would it make sense to have the App title be coded as an H1?

For example, here is one of the apps I'm assessing - the Seattle Parks and Recreation Resource Management Plan.

And another, the Seattle Public Utilities Litter Abatement Program Routes app.

Both of them are missing an H1 and sometimes the nesting order seems off.

[andrewdfahey]

This isn't my wheelhouse, but I see the titles as h1 when I use MS Developer tools in MS Edge and Google Chrome. I can't access my personal device to test much more since my organization doesn't allow for browser extensions but wanted to offer two cents to you and the next viewer in case it's the somehow related to the WAVE extension.

[CatherineWendland]

Oh!! Thank you! And how annoying that Wave isn't picking that up. I'll try the extension in Chrome and see if that's different.

[CatherineWendland]

Chrome wasn't any different. It seems like Wave doesn't pick up the heading levels correctly. I'll have to make it clear to my testers that "it will give you an error, but ignore it". I don't love that. 

If someone else has a preferred testing approach, I'm all ears.

[KlaraSchmitt]

Hi @CatherineWendland,

Another thought: It might be a bug with WAVE. They don't seem to have an external repo for reporting bugs, but they do have a contact form on their Help page: https://wave.webaim.org/help You might be able to reach out with your issue and see what they say.

[CatherineWendland]

Thank you! I sent them a message. 

Hopefully this helps anyone else who finds this post. 

Summary:

When you test with the Wave extension, it claims there is no H1 on instant apps. SiteImprove and browser Developer tools show that it does have an H1. So, if you get a "no H1" error in Wave, it might be a false alarm.

[CatherineWendland · Accepted solution]

I reported this possible bug to WAVE and they replied back:

"On your site the <h1> is located within a shadow DOM element. WAVE does not yet support these, so content within these elements is not tested. We’re working on a solution for this."