Landmark regions
The named zones of a page (banner, nav, main, footer) that screen reader users can jump between like chapters.
See it
What it is
Landmarks are the big structural zones of a page, exposed to assistive tech so users can jump straight to one. You get them free from HTML elements: nav becomes navigation, main becomes main, aside becomes complementary, and form or section become regions once they have an accessible name. header and footer are the conditional pair: they map to banner and contentinfo only when they sit at page level, so a header tucked inside an article or a section is just a header and shows up in no landmark list at all. Screen reader users pull up a landmarks list the same way you would glance at a page and find the sidebar.
Reach for them on any page with more than one zone. The single highest value move is wrapping your actual content in one main, because that is what a skip link targets and what 'jump to main content' means in every reader. Beyond that, keep it sparse: five landmarks is a map, twenty is a maze.
Gotchas: if you have two navs (primary and footer, say), give each an aria-label like 'Primary' and 'Footer' or they announce identically. Every visible chunk of content should sit inside some landmark, since orphaned content between regions is easy to miss. And a div with role='main' is a last resort, not a style: use the real element.
Ask AI for it
Restructure this page with proper landmark regions. Wrap the top bar in header, the primary menu in nav, the page content in a single main, side content in aside, and the bottom in footer, so no visible content sits outside a landmark. Keep that header and footer at page level: nested inside an article or section they do not become banner and contentinfo landmarks at all. Give each nav and each named section a distinct aria-label (for example 'Primary' and 'Footer'). Use the native elements rather than divs with ARIA roles, and keep the total number of landmarks small.