HTML Course 10.5 Semantic landmarks and their importance for accessibility

10.5 Semantic landmarks and their importance for accessibility

Semantic landmarks are HTML elements (or ARIA roles) that identify major regions of a page. They allow assistive technologies (screen readers, voice control, braille displays) to navigate rapidly between sections, improving the user experience for people with disabilities.

Why landmarks matter

• Enable screen reader users to jump directly to key areas (header, main content, navigation, footer).
• Facilitate keyboard-only navigation through skip links and region shortcuts.
• Provide a logical document outline, aiding cognitive accessibility by grouping related content.
• Ensure consistency across pages, so users learn landmark patterns once and apply them site-wide.

Common semantic landmarks

Accessibility benefits in detail

• Landmark list navigation: Screen readers offer a list of landmarks (e.g., by pressing “D” in NVDA). Users can skip directly to <main>.
• Skip links: A hidden link at the top to jump to main content, avoiding repetitive navigation on each page load.
• ARIA landmark roles: When a native element is unavailable or custom components are used, you can add role='banner', role='navigation', role='main', role='complementary', role='contentinfo'.

Example: Basic page layout with landmarks and skip link

Skip to main content

<header>
  <!-- Site logo and title -->
  <h2>My Website</h2>
  <nav role='navigation'>
    <ul>
      <li><a href='/home'>Home</a></li>
      <li><a href='/about'>About</a></li>
      <li><a href='/contact'>Contact</a></li>
    </ul>
  </nav>
</header>

<main id='main-content' role='main'>
  <!-- Main article or section -->
  <article>
    <h3>Welcome</h3>
    <p>This is the main content area. Screen reader users can jump here using landmarks.</p>
  </article>
</main>

<aside role='complementary'>
  <!-- Related links or advertisements -->
  <h4>Related</h4>
  <ul>
    <li><a href='/blog'>Latest Blog</a></li>
    <li><a href='/news'>News</a></li>
  </ul>
</aside>

<footer role='contentinfo'>
  <p>© 2024 My Website. All rights reserved.</p>
</footer>
  

Example: Form within a section landmark

<section aria-labelledby='contact-form-heading'>
  <h3 id='contact-form-heading'>Send us a message</h3>
  <form action='/submit' method='post' role='form'>
    <fieldset>
      <legend>Your details</legend>
      <label for='name'>Name:</label>
      <input type='text' id='name' name='name' required />

      <label for='email'>Email:</label>
      <input type='email' id='email' name='email' required />
    </fieldset>

    <fieldset>
      <legend>Message</legend>
      <label for='message'>Message:</label>
      <textarea id='message' name='message' rows='5'></textarea>
    </fieldset>

    <button type='submit'>Submit</button>
  </form>
</section>
  

Key takeaways

• Always use a single <main> per page.
• Place <nav> and skip links before <main> for early access.
• Use appropriate ARIA roles when native semantics aren’t available.
• Test with screen readers (NVDA, VoiceOver) and keyboard-only navigation.