Making content reachable beyond the visual order

A screen reader user facing a long, content-heavy page doesn't want to read straight through from top to bottom. They rely on assistive technology features that let them jump to specific kinds of content. The "rotor" available in tools like VoiceOver, NVDA, and JAWS can list page headings, links, form controls, and landmark regions so the user can move directly to whatever they need. Good semantics are what make those navigation lists useful.

Headings are a primary navigation tool

The heading list in a screen reader follows the DOM order, not the visual order. Since screen readers work from the accessibility tree, which mirrors the DOM, where an element appears on screen doesn't matter—its position in the markup does. A heading structure that matches the document's logical flow is therefore critical for users who scan by headings.

The WebAIM WCAG checklist ties semantic markup and heading structure to several success criteria, including 1.3.1 (semantic markup designates headings), 2.4.1 (heading structure is a way to bypass blocks), 2.4.6 (headings should be useful), and 2.4.10 (sections of content are designated with headings where appropriate).

Headings don't always need to be visible. A common technique is the off-screen heading, used by sites like Wikipedia, which places heading text out of the visual rendering so that only assistive technologies perceive it. For complex apps where a visible title doesn't fit the design, this is a reasonable way to keep the page navigable.

Rotor link lists only help if the screen reader can find the links and the link text is instructive. Several common patterns break this:

  • Anchor tags without a href, often found in single-page apps, may not be exposed as links at all.
  • Elements styled as buttons but marked up as links—screen readers treat them as navigation, losing the button behavior. Use a real button and style it instead.
  • Images used as the entire link content. Make sure the linked image has an alt attribute so the link has a name to read.

Vague link copy like "learn more" or "click here" is also a barrier. Descriptive text, such as "learn more about responsive design," gives a screen reader user context when jumping to a link list.

Landmarks and the other rotor lists

Beyond headings and links, many screen readers list form controls and landmark regions. These discrete lists let users jump to a specific input or skip to a known section of the page.

HTML5 structural elements—header, footer, nav, article, section, main, and aside—provide these landmarks without adding styling, which is left to CSS. Replacing repeated div blocks with these elements gives both authors and assistive technologies an explicit description of the page structure.

One temptation to resist: spelling out words phonetically for screen-reader-only text. A screen reader may mispronounce a name or read digits oddly, and while experienced users are used to that quirk, providing a corrected phonetic text harms braille display users, who would see a misspelled word. Leave pronunciation up to the user, who can always ask the reader to spell a word aloud.