Skip to main content

Headings and a skip link

Step heading levels by one, add a skip link, offset anchored headings.

From web-design-guidelines (Web Interface Guidelines).

Twelve Tabs, or two

Tab to the search box. In the good pane, press Enter first.

No skip linkBad
0 Tabs
Skip link firstGood
Skip to main content
0 Tabs

What a screen reader sees

Change a level, add a heading, or press Next heading.

Levels picked for sizeBad

      <h1> → <h4>
      One level at a timeGood

          <h1> → <h2> → <h3>

          Anchors under a sticky header

          Jump both panes to #pricing, then drag the slider.

          No scroll marginBad

          Features

          Pricing

          $29 per month

          FAQ

          scroll-margin-top: 0
          Offset by the headerGood

          Features

          Pricing

          $29 per month

          FAQ

          scroll-margin-top: 80px

          Why it matters, pros and cons

          Why it matters

          Screen reader users skim by heading. Keyboard users pay a Tab per nav link.

          Pros

          • Headings double as navigation.
          • A skip link is one element.
          • scroll-margin-top is one line.

          Cons

          • A fixed margin drifts when the header height changes.
          • Components hard-coding <h3> break nesting; pass the level.
          • The skip target needs tabindex="-1" to take focus.