HTML · Module 09 · Lesson 44 of 54

Landmark Roles (Accessibility)

What are Accessibility Landmarks?

Think of a tactile map at a museum. It has clearly defined raised borders for the main halls, the entrance, and the bathrooms, allowing visually impaired visitors to feel the layout and find their way without getting lost.

In HTML, Accessibility Landmarks are attributes or tags that mark structural regions on a page. The role="navigation" attribute tells screen readers that the element wraps navigation menus. Other common landmark roles include:

role="main": The primary content area.

role="banner": The header.

role="contentinfo": The footer.

Why does it matter?

Using landmarks allows assistive technologies (like screen readers) to identify the major zones of a page. Users can press quick keys to jump directly from the header to the main content or navigation bar, skipping repetitive list links.

How to write it

Add the role attribute to generic elements like <div>:

<div class="nav-bar" role="navigation">
  <a href="/">Home</a>
</div>

role="navigation" Landmark

Common Mistakes

Overusing roles on everything: Don't add roles to every single div on your page. Only mark major landmark sections (like header, navigation, main content, and footer).

Not using native tags first: If you can use the native HTML5 <nav> element instead of <div role="navigation">, use <nav>! Browsers apply the landmark role automatically to native tags.

Quick Reference

role="navigation" — Marks a navigation landmark.

role="main" — Marks the main content landmark.

Your Task

Give the navigation div an accessibility role: add the attribute `role="navigation"` to the `<div>` tag.

index.html

Type code above to start the lesson.

Live Preview