nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Encuentra más publicaciones etiquetadas con

Accepted answers

CatherineWendland

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

All comments

CatherineWendland

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

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.

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

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.

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.

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.

HeaderCheck_Edge.png

4class_trainModel_input.png

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.