Levels of heading

Tab through the example. The fake title is skipped — it is a paragraph. Then the outline jumps 4, 6, 3. A screen reader headings list (VoiceOver rotor, NVDA Insert+F7) shows the same gaps.

Example

DevFest 2026

Schedule

Friday talks, Saturday workshops.

Venue

City library, main hall. Get directions

Get tickets

Markup

Edit the HTML. The example above is live in this page, so Tab and a screen reader read it the same way they would on any other site.

HTML for the example

<div class="lab-outline" data-headingsource>
  <p class="lab-fakehead">DevFest 2026</p>
  <h4>Schedule</h4>
  <p>Friday talks, Saturday workshops.</p>
  <h6>Venue</h6>
  <p>City library, main hall. <a href="#heading-levels">Get directions</a></p>
  <h3>Get tickets</h3>
  <p><a href="#heading-levels">Register for DevFest</a></p>
</div>

<div class="lab-outline" data-headingsource>
  <p class="lab-fakehead">DevFest 2026</p>
  <h4>Schedule</h4>
  <p>Friday talks, Saturday workshops.</p>
  <h6>Venue</h6>
  <p>City library, main hall. <a href="#heading-levels">Get directions</a></p>
  <h3>Get tickets</h3>
  <p><a href="#heading-levels">Register for DevFest</a></p>
</div>