Can the content grouping areas present on several web pages (header, main navigation, main content, footer and search engine areas) be reached or skipped?
A user navigating by keyboard retraces the same path from the beginning with each page load. Without a bypass mechanism, they traverse the entire menu before reaching content, sometimes 40 to 50 Tab presses to access an article. Criterion 12.6 requires solving this problem.
Five zones are concerned: the header, main navigation, main content, footer, and search engine, as soon as they appear on multiple pages. For each, at least one method must be in place: a WAI-ARIA landmark role, a heading describing the zone, a hide button directly preceding the zone in source order, a bypass link directly preceding the zone, or a quick access link visible by default or on focus.
ARIA landmarks are the most economical solution to deploy: role="banner" on the header, role="navigation" on navigation, role="main" on main content, role="contentinfo" on the footer, role="search" on the search engine. Semantic HTML5 tags <header>, <nav>, <main> and <footer> implicitly carry these roles, which already covers most zones without an additional attribute.
A bypass link to main content does not dispense with treating other zones. This is the most frequent error in audits.
Un test to verify the correct identification of major page areas
ARIA landmark or quick access mechanism on each zone
- Identify all recurring zones present on the page: header, main navigation, main content, footer, search engine.
- For each identified zone, verify that at least one of the following conditions is met:
a. The zone has an ARIA landmark role corresponding to its nature (
role="banner",role="navigation",role="main",role="contentinfo",role="search"), or an equivalent semantic HTML5 tag (<header>,<nav>,<main>,<footer>) used in the correct context; b. The zone is directly preceded, in source order, by a heading whose content describes the nature of the zone; c. The zone is directly preceded by a button allowing it to be hidden; d. The zone is directly preceded by a bypass link; e. The zone is accessible via a quick access link visible by default or visible on focus during tabulation. - Result: all zones satisfy at least one condition → test validated. A single zone satisfies none → test failed.
Examples
❌ Non-compliant : Structural zones without access mechanism or skip link
<div class="header">
<div class="logo"><img src="logo.png" alt="My site"></div>
<div class="nav">
<a href="/">Home</a>
<a href="/services">Services</a>
<a href="/blog">Blog</a>
<a href="/contact">Contact</a>
</div>
</div>
<div class="main">
<h1>Welcome</h1>
<p>Page content.</p>
</div>
<div class="footer">
<p>© 2025 My site</p>
</div>Zones are delimited by <div> elements without ARIA role and without a bypass link. A screen reader detects no navigable regions: the user cannot skip directly to navigation or main content. A keyboard user must traverse each menu link every time the page changes.
✅ Compliant : Zones with ARIA landmarks and bypass link
<a href="#main-content" class="skip-link">Skip to main content</a>
<header role="banner">
<nav role="navigation" aria-label="Main navigation">
<a href="/">Home</a>
<a href="/services">Services</a>
<a href="/blog">Blog</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main id="main-content" role="main">
<h1>Welcome</h1>
<p>Page content.</p>
</main>
<footer role="contentinfo">
<p>© 2025 My site</p>
</footer>Each zone carries an ARIA landmark role: screen readers offer a list of navigable regions directly accessible via the dedicated shortcut. The bypass link, the first focusable element on the page, allows keyboard users to reach main content without traversing navigation. Explicit role attributes complement the implicit roles of HTML5 tags for maximum coverage.
Tips and pitfalls
⚠️ A bypass link to content does not cover all zones
This is audit error number one: the developer implements <a href="#main">Skip to content</a> and considers the criterion satisfied. But the header, navigation, footer and search engine still have no access mechanism. Criterion 12.6 requires a solution for each zone present on multiple pages, not just main content.
⚠️ A bypass link hidden with display:none does not work
A bypass link hidden by display:none or visibility:hidden is ignored by assistive technologies and cannot be activated by keyboard. The correct technique is to position the link off-screen (for example position:absolute; left:-9999px) and bring it back into the visible flow only on focus via :focus { position:static }. To verify proper operation, press Tab immediately after page load.
💡 Semantic HTML5 tags provide ARIA roles implicitly
<header> carries role="banner", <nav> carries role="navigation", <main> carries role="main", <footer> carries role="contentinfo". If your template uses these tags correctly, most zones are already covered without adding a single ARIA attribute. Be careful however: <footer> nested within <article> or <section> loses its implicit contentinfo role and becomes a generic element.
⚠️ Multiple <nav> zones on the same page: distinguish them with aria-label
If the page contains multiple navigation zones (main menu, breadcrumb, footer navigation), each <nav> must carry a distinct aria-label. Without this, a screen reader lists multiple regions titled "Navigation" and the user does not know which corresponds to main navigation. Since criterion 12.6 specifically targets main navigation, name it explicitly: aria-label="Main navigation".
⚠️ role="search" has no universally supported native HTML5 equivalent
Unlike <main> or <nav>, there is no HTML tag with role="search" implicitly with widespread support. To identify a search engine zone, explicitly add role="search" on the form container element: <form role="search"> or <div role="search">. Without this, the search zone is not detected as a region by screen readers.
Frequently asked questions
When do HTML5 tags <main> or <nav> require an explicit ARIA role according to RGAA?
Semantic HTML5 tags are sufficient in the vast majority of cases: <header>, <nav>, <main> and <footer> carry their ARIA roles implicitly and are accepted by RGAA. Adding role="main" on a <main> is redundant but not incorrect. Add explicit roles only if you use <div> or <span> instead of semantic tags, or if you need to cover browsers that do not correctly map HTML5 elements to their ARIA roles.
What ARIA role does a <footer> nested within an <article> have according to RGAA?
None. <footer> only has the implicit contentinfo role when it is a direct descendant of <body>, outside any <article>, <section>, <aside> or <nav>. In these nested contexts, <footer> becomes a generic element with no landmark role. If your structural footer is found in such nesting, explicitly add role="contentinfo" on the element.
How do you audit RGAA criterion 12.6 on grouping zones without a screen reader?
Three checks are sufficient for an initial diagnosis: (1) inspect the source code and search for role="banner", role="navigation", role="main", role="contentinfo", role="search" or their HTML5 equivalents; (2) press Tab on page load and verify that a bypass link appears, then activate it and confirm that focus lands on the target; (3) use the 'Accessibility' tab in Chrome DevTools or Includdy to visualize detected regions.
How does RGAA criterion 12.6 apply to pages without recurring navigation, such as a landing page?
It does not, in this specific case. The criterion targets zones "present in multiple web pages". A zone absent from a page is not concerned for that page. If your landing page has no main navigation or search engine, these zones are out of scope. Only zones actually present and recurring must satisfy one of the five admitted methods.
What is the difference between a <h2> heading and an ARIA attribute for identifying a grouping zone?
Yes, under two conditions: the heading content must allow understanding the nature of the zone (for example <h2>Main navigation</h2>), and the heading must directly precede the zone in source order. This method is less practical than an ARIA landmark because it constrains the user to navigate heading by heading, but it is valid under RGAA 12.6.1.