Landmark
// Definition
An ARIA region role (or native HTML5 element) that maps the major areas of a page — `banner`/`<header>`, `navigation`/`<nav>`, `main`/`<main>`, `contentinfo`/`<footer>`. Screen-reader users jump between landmarks to navigate a page structurally, the way a sighted user scans layout. Native semantic elements provide them implicitly.
// Why it matters
Landmarks are how screen-reader users skip the boilerplate and jump to content — without them, every visit means tabbing through the whole nav each time. QA cares because using one <main>, sensible <nav>s, and a <footer> is a low-effort, high-impact accessibility win that's easy to verify and easy to get wrong (multiple <main>s, missing landmarks).
// How to test
// Assert the page's structural landmarks exist and are singular where required
cy.get('main').should('have.length', 1) // exactly one main
cy.get('nav, [role=navigation]').should('exist')
cy.get('header, [role=banner]').should('exist')
cy.injectAxe(); cy.checkA11y(null, { runOnly: ['cat.semantics'] })// Common mistakes
- No
<main>(or several), so "skip to content" has nowhere to go - Everything in
<div>s, giving screen readers no structural map - Duplicate landmarks with no
aria-labelto tell them apart
// Related terms
Semantic HTML
The practice of using HTML elements according to their intended meaning — heading elements (h1–h6) for headings, button for interactive controls, nav for navigation regions, main for the primary content area — rather than using generic div and span elements for everything. Semantic elements convey role, structure, and sometimes state to browsers, search engines, and assistive technologies without requiring additional ARIA attributes. QA testers check that pages use a logical heading hierarchy, landmark regions are present, and interactive controls use native elements rather than div or span with click handlers.
Screen Reader
Assistive technology software that converts on-screen content into synthesised speech or Braille output, enabling users who are blind or have low vision to navigate and interact with digital interfaces. Common screen readers include NVDA and JAWS (Windows), VoiceOver (macOS and iOS), and TalkBack (Android). QA testers use screen readers to verify that interactive elements have meaningful names, heading and landmark structure is navigable, dynamic content changes are announced, and no information is conveyed visually only.
Skip Link
A link — usually the first focusable element, visually hidden until focused — that lets keyboard and screen-reader users jump straight past repeated navigation to the main content. "Skip to main content" appears on the first Tab press and, when activated, moves focus to `<main>`.