Chrome extension
See the headings, not the styling.
A heading looks like a heading whether or not it is one in the code. The extension shows what is actually there — which is all a screen reader has to go on.
Load it unpacked from chrome://extensions until the store listing is live.
Errors
- Empty heading — no accessible name at all.
- More than one h1.
- The page does not start at h1.
- A level is skipped, h2 straight to h4.
Going up several levels, h4 back to h2, is not an error. That is a section ending.
Worth a look
- An h1 whose name comes from an image — almost always the logo.
- A heading in the footer or nav nested under the page content.
- Headings that read like a menu row or a breadcrumb, or run past 70 characters.
These are usually wrong and sometimes deliberate. They are kept apart from the errors on purpose.
Headings you cannot see
A heading hidden with the visually-hidden technique is invisible on screen and read by a screen reader, so it is in the list and labelled. Headings hidden from everyone — display:none, hidden, aria-hidden — are left out, because no screen reader reads them either.