Review the different HTML landmarks.
<header>A top level <header> element generates a banner landmark:
A nested <header> element does not generate a banner landmark:
<footer>A top level <footer> element generates a contentinfo landmark:
A nested <footer> element does not generate a contentinfo landmark:
<main>A <main> element generates a main landmark:
<nav>A <nav> element generates a navigation landmark:
The <nav> element can be given a label via aria-label:
Or via aria-labelledby:
<aside>An <aside> element generates a complementary landmark:
The <aside> element can be given a label via aria-label:
Or via aria-labelledby:
A nested <aside> element without an accessible name does not generate a complementary landmark. Under the current HTML Accessibility API Mapping, a nested <aside> is only exposed as a landmark when it has an accessible name via aria-label or aria-labelledby.
This is a nested <aside> element:
This is a nested <aside> element with a name:
<section>The <section> element without an accessible name is generally not exposed as a landmark:
The <section> element is generally exposed as a region landmark only when it has an accessible name (typically via a heading or ARIA labelling). The example below uses aria-labelledby to associate the heading directly with the <section>.
<search>The <search> element generates a search landmark.
<form>The <form> element generates a form landmark.