Heading Outliner

A small browser extension that shows a page's headings the way the code wrote them — not the way the design makes them look.

Headings look like headings on screen whether or not they are headings in the code. The difference only shows when you take the page apart, and that difference decides whether someone listening to the page can jump between sections instead of listening to all of it.

Two views

Outline headings draws a frame around every heading and writes its level next to it. The rest of the page is left alone. It uses outline rather than border, so nothing shifts when you switch it on.

Show structure opens a panel with the headings indented by level, each one tagged with the landmark it sits in — main, nav, footer, header, sidebar. Click a row to jump to that heading on the page.

What it flags

Errors — things that are wrong:

• empty heading (no accessible name at all)
• more than one h1
• page does not start with h1
• skipped level (h2 followed by h4)

Going up several levels, h4 to h2, is not an error. That is a section ending.

Worth a look — usually wrong, sometimes deliberate:

• h1 whose name comes from an image, which is almost always the logo
• a heading in the footer or nav nested under the page content
• headings that read like a menu row or breadcrumb (|, », •)
• headings long enough to be a sentence (over 70 characters)

The two are kept apart on purpose. Mixing them is how tools lose people's trust.

What it does not do

It reads the rendered page and reports what is there. It cannot tell you whether a heading describes its section well, and it is not an accessibility audit. A sound heading structure is one requirement out of many.

Privacy

The extension collects nothing, sends nothing, and stores nothing. It has no server. activeTab means it can only read the page in the tab where you clicked the button, and only after you clicked.

Install locally

1. Open chrome://extensions
2. Turn on Developer mode
3. Load unpacked and pick this folder

Keyboard

• Alt+Shift+1 outlines the headings
• Alt+Shift+2 shows the structure
• Esc closes the panel

Icons

Redraw with python3 verktyg/ikoner.py (needs Pillow).

Licence

MIT. See LICENSE.

---

By Wish You Were Here, a product and design studio in Gothenburg, Sweden.