GOV.UK Footer component fails accessibility test

[davet1985]

Description of the issue

It's been reported in an accessibility test that the "Support links" h2 in the GOV.UK Footer component is causing a failure to comply. This failure is due to ordering of headings, meaning it only becomes an issue on screens which use headings down to the level 3 as it appears to a screenreader that the heading order is h1 -> h2 -> h3 -> h2, for example.

The suggestion is to remove the h2 tag, but I'm hesitant because it's in this design system.

Steps to reproduce the issue

Visit the DARTS login page: https://darts.staging.apps.hmcts.net/login and view the source for the footer.

This screenshot shows the h2 Support links header.

Actual vs expected behaviour

It's currently failing an accessibility test. I would expect using the GOV.UK Footer component not to result in a failure.

Environment (where applicable)

• Operating system: MacOS Sonoma 14.5
• Browser: Chrome
• Browser version: 129.0.6668.89 (Official Build) (arm64)

[querkmachine]

Can you elaborate on what tool or audit is calling this a failure?

It isn't a WCAG failure for heading levels to decrease as a page goes on, that's a natural part of defining the content hierarchy of the page. It's only when with increased nesting that the headers should be sequential (i.e. h2 → h3 rather than h2 → h4), but this doesn't apply going from lower to higher levels.

[davet1985]

Thanks for the quick reply @querkmachine.

One tool was JAWS and it raised a point about visually hidden links confusing screen reader users. The point raised about heading levels was an observation and upon reading it again I think it was actually an issue with the headings in the application content, which we can fix.

I would appreciate some advice on the visually hidden headings though please.

[github-actions]

Uh oh! @davet1985, at least one image you shared is missing helpful alt text. Check your issue body to fix the following violations:

• Images should have meaningful alternative text (alt text) at line 23

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.