Skipped heading level

a11y/heading-skipwarningaccessibilityseolighthouse

Why it matters

Jumping from h1 to h3 breaks the outline that screen-reader users navigate by (Lighthouse: heading elements are not in a sequentially-descending order).

Fix

Use the next level down and style it with classes.

Credit

  • From Deque

    The axe rule heading-order says heading levels should only increase by one.

  • From W3C Web Accessibility Initiative

    The WAI headings tutorial and WCAG 1.3.1 treat headings as structure that assistive technology navigates.

References

See it