diagnostic · one of 36 free, no counter
Outline
What does this page look like to a screen reader?
A screen reader’s rotor is a list of landmarks and a list of headings, and it is the primary way many people navigate a page. This is that list, in the order it is met, indented by real containment rather than by DOM depth - so what you see is the structure somebody will actually move through rather than a pretty-printed tree.
Reach it Press ⌘ + K on any tab and type outline. Ctrl + K on Windows and Linux
in the panel · free, no counter
What this actually is
landmarks and headings in the order a screen reader meets themBefore any page ships, and on any page where the visual hierarchy and the heading levels have drifted apart - which happens the moment a heading is chosen for its size.
Asked about this diagnostic
4 of themWhy keep an unnamed section in the list?
Because that is the row the filter exists to surface. A <section> with no accessible name is announced as an unlabelled region, which is worse than not being a landmark at all.
Why is a heading’s mark its level rather than its tag?
Because an <h2> with role="heading" aria-level="4" is a level four heading, and the tag would say two. The level is what gets announced.
Does it check the heading order?
It shows it. A jump from h2 to h4 is visible in the indentation, and the panel names it - but whether a skipped level matters depends on the page, and this reading does not grade.
Why does the indentation not match the DOM?
Because DOM depth is an implementation detail - three wrapper divs do not make a heading more nested. The indent is containment among the nodes on this list, which is the structure a rotor presents.
how to use outline
- Open Outline to read the landmarks and headings in the order they are met.
- Read the indentation as containment among those nodes, not as DOM depth.
- Find the unnamed regions. They are kept rather than hidden, and they are the rows worth fixing.
- Check each heading's level against the visual hierarchy it is standing in for.
written about at length
- accessibility 5 min Contrast checkers measure a colour you never shipped Two hex fields cannot describe a gradient, a translucent card or a photograph. What a contrast ratio means when the background is painted rather than declared.
- css 4 min Measuring AI-generated markup without guessing What a generated page actually looks like, which of those signals survive contact with real sites, and why a score has to show its working.
70 of these · no host permissions · three free audits