WAI-ARIA Landmarks: Giving Your WordPress Pages Meaningful Structure

Sighted visitors scan a page in a second: header at the top, navigation along the side, content in the middle, footer at the bottom. Screen reader users can’t glance at a page, so they rely on landmarks, the labeled regions that let them jump straight to the part of the page they want. When landmarks are missing or misused, every visit starts with listening to the whole page from the top.

What Landmarks Are and Why They Matter

Landmarks are regions of a page that assistive technology exposes as a list. Screen readers such as NVDA, JAWS and VoiceOver let users pull up that list or press a single key to move between regions. This supports WCAG Success Criterion 1.3.1 (Info and Relationships) and 2.4.1 (Bypass Blocks), which is why landmarks often serve as a complement to skip links.

Modern HTML gives you most landmarks for free. You rarely need to write ARIA roles by hand, as long as you use the right elements.

The Main Landmarks and Their HTML Elements

• banner: the site header, using <header> as a direct child of <body>.
• navigation: a set of links, using <nav>.
• main: the primary content, using <main>. There should be exactly one per page.
• complementary: related but secondary content such as a sidebar, using <aside>.
• contentinfo: the site footer, using <footer> as a direct child of <body>.
• search: a search form, using <search> or role="search" on a form.
• region and form: these only become landmarks when they have an accessible name, for example aria-label.

Common Landmark Problems in WordPress

Missing or duplicate main

Older or poorly built themes wrap content in generic <div> elements, leaving no main landmark. Page builders and plugins sometimes inject a second <main>, which confuses users about where the real content starts.

Several navigation regions with the same name

A typical site has a primary menu, a footer menu and breadcrumbs. If all three are announced simply as “navigation,” users can’t tell them apart. Give each one a distinct label:

<nav aria-label="Primary">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer">...</nav>

Everything is a landmark

Over-labeling is a real problem. If every section gets role="region", the landmark list becomes noise and loses its value. Reserve landmarks for the major areas of the page.

Content outside any landmark

Cookie banners, promo bars and chat widgets often sit outside every landmark. Screen reader users can miss them or encounter them in a confusing order. Place them inside an appropriate region or give them a labeled region of their own.

How to Check Your Landmarks

1. Open your page with NVDA (free on Windows) or VoiceOver (built into macOS and iOS).
2. In NVDA, press D to jump to the next landmark. In VoiceOver, use the rotor and choose Landmarks.
3. Listen to the names. Does each region announce something meaningful? Are two regions named identically?
4. Confirm that the main landmark contains the page’s actual content and that nothing important sits outside all landmarks.
5. Repeat on your key templates: home page, a post, a form page, and checkout if you sell online.

Browser developer tools help too. The accessibility tree in Chrome or Firefox shows how each element is exposed, so you can verify roles without a screen reader. Still, hearing the page the way a user does catches problems that tools can’t judge, such as whether a label makes sense.

Fixing Landmarks in WordPress

Most fixes happen in the theme. If you use a block theme, check the template parts in the Site Editor: the Header block can be set to render as <header>, and Group blocks let you choose the HTML element, such as main, aside or footer. The Navigation block accepts an accessible label in its settings.

For classic themes, look at header.php, footer.php and the page templates for generic wrappers, and replace them with semantic elements. If a plugin is injecting markup, you may need to contact its developer or choose an alternative.

A word of caution: landmarks are only one part of accessibility. A page can have perfect landmarks and still fail on contrast, keyboard access or alt text. Automated scanners can detect missing or duplicate landmarks, but they cannot tell whether your labels are meaningful, so manual review remains necessary.

Take Action

LEWCA’s WCAG scanner checks your WordPress pages for code-level issues, including missing main regions, duplicate landmarks and unlabeled navigation, so you can fix the markup itself rather than cover it up. Pro adds AI-powered code fix suggestions, scheduled scanning and compliance reports. No tool guarantees full compliance, but a scan is a good first step. Download LEWCA to get started, or compare plans to see what Pro includes.