HTML5 Landmarks: header, nav, main and footer for Screen Reader UX

HTML5 landmarks - <header>, <nav>, <main>, <aside>, <footer> - are the road signs of a web page for blind users. Without them, the page looks to a screen reader like an enormous pile of meaningless divs.

Why this matters

Screen readers expose shortcuts to jump between landmarks. NVDA: D moves to the next landmark. VoiceOver: Rotor > Landmarks. JAWS: R. A blind user can choose: "Skip past the header and nav, jump straight to main." Without landmarks they have to Tab through every nav item on every page - exhausting and slow.

This is a international accessibility guidelines Level A requirement, 1.3.1 Info and Relationships. 2.4.1 Bypass Blocks also requires a way to skip repeated content - landmarks are the most common solution. The standard landmarks:

• <header> - banner, logo and top nav.
• <nav> - navigation.
• <main> - main content. Exactly one per page.
• <aside> - complementary, sidebar.
• <footer> - contentinfo, page footer.
• <section> and <article> - content blocks.

How to detect

View source on the home page. If you see <div class="header">, <div class="nav">, <div class="content">, there is a problem. You want <header>, <nav>, <main>. Tools: axe DevTools reports "page must have one main landmark". The Landmarks Chrome extension lists every landmark on a page.

How to fix

1. Open the theme: wp-content/themes/THEME/header.php, footer.php, index.php.
2. Replace structural <div>s with semantic tags:

   <header>
       <a href="/">Logo</a>
       <nav aria-label="Primary">
           <ul>...</ul>
       </nav>
   </header>
   
   <main>
       <!-- Page content -->
   </main>
   
   <aside aria-label="Sidebar">
       <!-- Complementary content -->
   </aside>
   
   <footer>
       <!-- Copyright, secondary links -->
   </footer>

3. Ensure exactly one main per page. Two <main> elements confuse screen readers.
4. If a page contains multiple <nav>s (primary, breadcrumbs, footer), give each a unique aria-label: aria-label="Breadcrumbs", aria-label="Footer navigation".
5. For page builders (Elementor, Divi, Bricks): every section/container has an HTML Tag selector. Pick Header, Main, Footer, Nav, Aside instead of Div.
6. In the WordPress 6.0+ Site Editor: a Group block exposes HTML Element in the inspector. Choose the appropriate element.
7. Do not add role="banner", role="main" on the matching HTML5 tags - it is duplicate. <header> already implies role="banner".

Common mistakes

• Two <main> elements on a page: a theme renders <main> and a page builder adds another. Make sure there is just one.
• Duplicating <header> inside <article>: technically valid (article-scoped headers) but exposes two banners to some screen readers. Use carefully.
• Redundant ARIA roles: <nav role="navigation"> - redundant, nav already implies navigation. Add roles only when no semantic element fits.
• Missing <main>: header and footer exist but the middle is just <div class="content">. Blind users cannot jump to main.
• Substituting <section> for <main>: not the same. <section> is generic; <main> marks the primary content.

Verifying the fix

Use the Landmarks Chrome extension. You should at least see banner (header), navigation (nav), main, contentinfo (footer). With an aside - complementary too. Run axe DevTools - Landmarks category passes. In NVDA press D on the page - jumps should be logical between sections. RankPlus turns green.