Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

Best practice: Best practice: HTML5 landmark elements are used to improve navigation  (WCAG 1.3.1 + 2.4.1)

use-landmarks

This means

HTML5 landmark elements such as <header>, <main>, <nav>, <aside>, and <footer> help to semantically structure the content of a page. They provide assistive technologies such as screen readers with orientation points so that users can jump to specific areas more quickly—such as the main navigation or page content.

 

Impact

If landmark elements are missing, keyboard and screen reader navigation is less efficient. Users have to laboriously move through all the content to find specific areas.

A clear landmark structure significantly improves orientation and complies with WCAG 1.3.1 (A) Information and Relationships and WCAG 2.4.1 (A) Skip Blocks.

 

Recommendation

  • Use landmark elements to logically structure the page:
    • <header> for header or brand area
    • <nav> for navigation elements
    • <main> for main content
    • <aside> for supplementary content
    • <footer> for footer area or legal notices
  • Use only one <main>element per page.
  • If you have multiple areas of the same type (e.g., multiple <nav>elements), label them with aria-label, e.g., aria-label=“main navigation”.
  • Use a screen reader (e.g., NVDA or VoiceOver) to test whether the areas are announced correctly.

 

Examples

Problematic:

<div class="header">Welcome</div>

<div class="navigation">...</div>

<div class="content">Main content</div>

<div class="footer">© 2024</div>

 

The structure only uses <div>containers – screen readers cannot distinguish between the areas.

Better:

<header>Welcome</header>

<nav aria-label=“Main navigation”>...</nav>

<main>Main content</main>

<footer>© 2024</footer>

 

The page is now semantically correct. Screen readers can switch directly between sections.

 

Note

Landmark elements are a simple but effective way to improve accessibility and usability. They make the page not only more understandable for screen readers, but also for search engines and other structured analyses.

 

Related WCAG criteria:

WCAG 1.3.1 – Information and Relationships

WCAG 2.4.1 – Skip Blocks

To the official WCAG documentation →