Lessons · HTML and CSS · regions you can jump to
Regions you can jump to
<header>, <nav>, <main> and <footer> are named regions a screen reader user can jump straight to.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
'Jump to main' is the most-used shortcut there is, and it works only if there is a main to jump to. Four elements instead of four divs buys the whole feature.
How to think about it
Exactly one main: the content of this page, minus everything repeated on every page. Several navs are fine -- primary, breadcrumbs, in-page -- but label them, or they are announced as identical regions.
Worked example
<header>…</header><nav>…</nav><main>…</main><footer>…</footer>The browser reports the four in order, and exactly one main.
Your turn
How many main elements a page should have.
Write a page and watch it render
The trap
Three unlabelled navs are a menu with no names on it. aria-label on each is the whole fix.