Landmark Region
In RGAA terminology, a landmark region designates a large structural section of a web page: header, navigation, main content, footer. It must be marked up with a semantic HTML5 element so that screen readers can offer direct access to each section.
Open your site in a screen reader. Press D in NVDA or rotate the VoiceOver rotor to "Landmarks". If the list is empty, your visitors must navigate through every line of HTML, from the first logo to the last footer link. The RGAA designates these missing sections with a precise term: "landmark region".
#What RGAA Expects
The RGAA glossary defines a landmark region as a large structural area of the page: header, main navigation, content, footer, complementary zone.
Criterion 12.6 requires that each of these regions be identifiable by assistive technologies. The most direct method: use semantic HTML5 tags.
<body>
<header><!-- site header --></header>
<nav><!-- main navigation --></nav>
<main><!-- page content --></main>
<aside><!-- complementary content --></aside>
<footer><!-- page footer --></footer>
</body>These tags create landmarks that screen readers expose in their regions list. Adding role="banner" to a <header> is redundant.
Landmark regions complement skip links. A "Skip to main content" link jumps a block in one click. Landmarks go further: they allow free navigation between all sections, in any order.
One detail many developers overlook: a <header> nested within an <article> or <section> does not create a banner landmark. The same rule applies to <footer> and contentinfo. Only direct children of <body> count.
#The Orphaned Content Trap
The most common issue with criterion 12.6 is not the complete absence of semantic tags. It's orphaned content. A promotional banner slipped between </header> and <main>. A search form floating outside any container.
The W3C recommends that all perceivable content reside within a landmark region. Anything outside no landmarks disappears from regions navigation.
Another frequent mistake: two <nav> elements without distinction. The screen reader announces "navigation" twice, without clarifying which is the main menu and which is the breadcrumb trail. An aria-label on each element resolves the ambiguity:
<nav aria-label="Main menu">...</nav>
<nav aria-label="Breadcrumb">...</nav>#In Summary
Use <header>, <nav>, <main>, <aside>, and <footer> as direct children of <body>. Place all visible content within one of these regions. Label with aria-label when the same type of region appears multiple times.