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.