What does this mean?
The GOV.UK css classes for headings are being used on non-heading elements. This will make it look like there is a heading strucure visually, but semantically these are not part of the page's heading hierarchy.
For example:
<div class="govuk-heading--l">Contact details</div>
Impact on users
This will impact screen-reader users by not providing the same hiearchy of page content which users who can see the screen are getting. This can make it more difficult for screen-reader users to find information.
If the user is a screen-reader user who has some visual acuity then it can be even more confusing as they will not be able to use screen-reader shortcuts to access the headings they can see on the screen.
How to fix
Sometimes this can require some more design input as this situation can arise where the team struggled to implement a consistent heading hierarchy, opting to use visual classes instead.
Review the current page hierarchy from a content standpoint. Ensure the page is correctly broken up into sections and headings are used to identify these sections.
Whilst it is not always desirable for heading size to match the semantics (more so on heavily designed commercial sites), any element which looks like a heading should likely be a heading. The exception to this might be legends or labels which tend to be larger than surrounding copy.
References
- GOV.UK guidance on headings
- Guides to testing headings with a screen-reader: