Here are some heading-related situations you might find on a web page and whether they are WCAG fails or just a bit weird.
An element looks like a heading, but isn’t marked up as a heading
For example div class=“looks-like-a-heading” instead of h2.
WCAG fail!
This comes under 1.3.1 Info and Relationships – Level A: “Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.”
If it looks like a duck, it should quack like a duck. Hey, did you do a QAC? 🦆
There are multiple h1s (or no h1)
Not a WCAG fail!
It’s a bit weird though. Ideally every page should have one h1 at the start of the main content. The text content of the h1 should be similar to the page title.
Skipped heading levels
For example: h1 then h3 then h4.
Not a WCAG fail!
It’s a bit weird though. Keeping a correct hierarchy lets people use the headings a bit like a table of contents.
Out of order headings
For example: h1 then h3 then h2.
WCAG fail!
This is 1.3.1 Info and Relationships – Level A again.
The markup needs to match the meaning. The h-level should match its importance in the hierarchy of the page.