How do I decide what to put in a sticky header?

the header earns its space or it should scroll away. This guide answers it in 8 minutes.

The invisible header

The page has two interfaces

Sighted users navigate by scanning: they see the sidebar, the hero, the footer. Screen-reader users navigate by structure: landmarks (header, nav, main, footer) and headings (h1, h2, h3) form the outline they jump through — the equivalent of a table of contents that the page generates from your HTML. A page with a beautiful visual layout but no landmarks is, to a screen-reader user, an unlabeled warehouse: everything is in there, and nothing says where.

landmarks.html

<body>
  <a class="skip" href="#main">Skip to content</a>
  <header>           <!-- banner landmark -->
    <nav aria-label="Main">…</nav>
  </header>
  <main id="main">
    <h1>Page title</h1>      <!-- exactly one h1 -->
    <section aria-labelledby="s1"><h2 id="s1">Latest work</h2>…</section>
    <aside aria-label="Related">…</aside>
  </main>
  <footer>           <!-- contentinfo landmark -->
</body>

The outline audit

One h1 per page, and it names the page: the h1 is what the screen-reader user hears first when they jump to the top — 'About us' beats 'Welcome to our website, where innovation meets excellence' for actually saying where they are.
Headings are a ladder with no skipped rungs: h1 → h2 → h3 in order, and heading levels reflect structure, not font size — the visual style of an h3-sized h2 does not change what the outline says.
Landmarks announce regions: a screen-reader user can jump 'to main', 'to navigation', 'to the complementary content' — pages without landmarks force them to walk every element in order, which is like reading a book with no chapters, no contents and no page numbers.
aria-label on navs that repeat: two navs on a page both announce as 'navigation' — label them ('Main', 'Footer') so the outline distinguishes them.

Structure is design

The outline is not an accessibility afterthought bolted onto a finished layout; it is the layout of the page for a whole class of users. When a redesign is planned, the outline audit is part of the design review: does the new visual hierarchy match the heading hierarchy? When a component library ships a card, it ships the heading level the card expects. Designing structure first is not extra work — it is doing the visual design with the outline open, which is how you discover that the sidebar was never really part of the story.

The keyboard walk →