Heading levels should only increase by one
Estimated effort: about 15 minutes.
Screen reader users often scan a page's heading structure like a table of contents. Headings should step down one level at a time (h1, then h2, then h3), never skip a level (h2 straight to h4). Skipped levels usually happen when a heading tag is chosen for its visual size rather than its place in the outline, which makes the structure misleading even though the page looks fine visually.
How to fix it
- List every heading tag on the page (<h1> through <h6>) in document order and check that each one only increases by exactly one level compared to the previous heading (e.g. h1 -> h2 -> h3 is fine, h2 -> h4 is not).
- On a typical product page this often means: <h1> product title, <h2> for major sections like "Description" and "Reviews", and <h3> for sub-sections within those (e.g. individual review headings) — do not jump from the <h1> straight to an <h3> or <h4>.
- Fix any skipped level by changing the heading tag to the correct next level in the outline, not by changing its visual size — adjust the font size separately with CSS if the corrected tag now looks wrong.
- Do not use a heading tag purely to make text look bold or large (e.g. wrapping a price or a badge in <h4> just for styling); use a <p> or <span> with CSS styling instead and reserve heading tags for actual section titles.
- Re-check the full heading outline after fixing to confirm no level is skipped anywhere on the page.
Elementor note
Elementor's Heading widget has an "HTML Tag" control that lets you pick H1–H6 (or Div/Span/Paragraph) completely independently of the widget's visual size — per Elementor's own documentation, changing the tag does not affect how large the text looks. This makes it easy to accidentally pick a heading level based on how big you want the text to appear rather than where it belongs in the page outline, which is a common cause of skipped heading levels built with Elementor. Check each Heading widget's HTML Tag setting against its actual position in the outline, not its visual size.
Before and after
Before
<h1>Red Leather Wallet</h1>
<h2>Description</h2>
<p>...</p>
<h4>Customer Reviews</h4>
<p>...</p>
After
<h1>Red Leather Wallet</h1>
<h2>Description</h2>
<p>...</p>
<h2>Customer Reviews</h2>
<p>...</p>