Skip to main content
All website issues
Ease of Use

Hard for screen readers to navigate page sections

What this means for your business

Your page content isn't organized into proper landmark sections. This makes it harder for screen reader users to quickly jump to the section they need, like skipping straight to the main content or navigation.

How to fix it
Easy
20–30 minutes

  1. 1Wrap your major page sections in semantic HTML5 landmark elements so screen reader users can jump directly to them.
  2. 2Use <header> for your site header/logo/navigation, <nav> for navigation menus, <main> for your primary page content, and <footer> for the footer.
  3. 3If a section doesn't fit a semantic element, use <section> with an aria-label: <section aria-label="Customer testimonials">
  4. 4Every page should have exactly one <main> element — it's the target for "skip to main content" links.
  5. 5Add a visible "Skip to main content" link as the very first element in your <body>: <a href="#main-content" class="sr-only focus:not-sr-only">Skip to main content</a>

On WordPress

Modern WordPress themes (Twenty Twenty-Four, etc.) use landmark elements correctly. If you're on an older theme, edit the theme's header.php, footer.php, and page.php templates to replace <div> wrappers with semantic elements.

On Shopify

Edit theme.liquid and section liquid files. Replace <div id="header"> with <header>, <div id="content"> with <main>, and <div id="footer"> with <footer>.

Does your site have this problem?

SiteSprout scans your site, tells you which issues you actually have in plain English, and keeps watch so nothing breaks silently.

Scan your site free