<?xml version="1.0" encoding="utf-8"?>

Don't skip heading levels

Screen reader users frequently navigate websites by jumping from heading to heading, similar to how visual users scan page headings. When you skip levels (like jumping from <h1> directly to <h3>), you create gaps in this navigation path. These gaps can disorient users, who may wonder if they've missed important content or if the page structure is broken.

Sometimes design considerations might tempt you to skip heading levels. For instance, a section might be visually distinct enough that it doesn't need an <h2> for sighted users, while subsections use <h3> tags. In such cases, you can add an <h2> with appropriate styling to make it visually hidden while keeping it available to screen readers. This maintains the proper heading hierarchy for all users without disrupting your visual design.

Pro Tip: Think of your heading structure as an outline or table of contents. If it wouldn't make sense in document form, it probably doesn't work as a heading hierarchy either.

Improve your UX & Product skills with interactive courses that actually work