A couple of issues with headings have been highlighted by everyone’s best mate: Siteimprove. On one hand they’re small details but on the other hand they do negatively impact the Accessibility ratings of our website. So we’re asking everyone to be a bit more careful with headings please.
Headings must appear in sequence. That means you shouldn’t use an H3 after the page title (which is always an H1) just because you like the way it looks. You MUST use an H2 before you can let your favourite H3 get any action. The sequence of the headings structure a page for screen readers, so users with visual impairments can move swiftly through the headings to the information they want.
Don’t leave empty heading tags. If there appears to be a bit of empty space below some copy please delete it, as this is where empty heading tags often hide, especially with multi-box layouts. You can see in the image below that the empty space after the copy, and that it has an Heading 2 styling already applied to it.
As you can imagine, a space created by pressing return that has had the heading style applied, will confuse a screen reader as it will be listed in the page structure but contains no content.
Thank you. That’s all. Don’t lose your head…