Semantic HTML & Accessibility

Difficulty: Beginner

Question

What is semantic HTML? Why does it matter for accessibility and SEO?

Answer

Semantic HTML uses elements that describe their meaning (header, nav, main, article, section, footer) instead of generic divs. This helps:

1. Accessibility: Screen readers understand the page structure 2. SEO: Search engines understand content hierarchy and importance 3. Maintainability: Code is self-documenting 4. Browser features: Reader mode, outline view work correctly

Code examples

Semantic vs Non-Semantic

<!-- BAD: div soup - no meaning -->
<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
  </div>
</div>
<div class="content">
  <div class="article">
    <div class="title">Blog Post</div>
    <div class="text">Content here...</div>
  </div>
</div>
<div class="footer">Copyright 2024</div>

<!-- GOOD: semantic elements -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h1>Blog Post</h1>
    <p>Content here...</p>
  </article>
</main>
<footer>Copyright 2024</footer>

Screen readers announce: 'navigation landmark', 'main content', 'article'. With divs, users hear nothing useful about the page structure.

ARIA Attributes When Needed

<!-- Custom button (use native <button> instead when possible) -->
<div role="button" tabindex="0" aria-label="Close dialog"
     onkeydown="if(event.key==='Enter') this.click()">
  X
</div>

<!-- Better: use native elements -->
<button aria-label="Close dialog">X</button>

<!-- Live region for dynamic content -->
<div aria-live="polite" aria-atomic="true">
  3 items in cart
</div>

<!-- Form accessibility -->
<label for="email">Email Address</label>
<input id="email" type="email"
       aria-required="true"
       aria-describedby="email-hint" />
<span id="email-hint">We'll never share your email</span>

Rule: use native HTML elements first (they have built-in accessibility). Only add ARIA when native elements can't express the semantics you need.

Common Accessibility Checklist

<!-- 1. All images have alt text -->
<img src="chart.png" alt="Sales chart showing 30% growth in Q4" />
<img src="decorative-line.png" alt="" />

<!-- 2. Color is not the only indicator -->
<input style="border-color: red" aria-invalid="true" />
<span class="error">Email is required</span>

<!-- 3. Heading hierarchy is correct -->
<h1>Page Title</h1>
  <h2>Section</h2>
    <h3>Subsection</h3>
  <h2>Another Section</h2>

<!-- 4. Skip navigation link -->
<a href="#main" class="sr-only focus:not-sr-only">
  Skip to main content
</a>

Accessibility isn't just about screen readers - it helps keyboard users, people with low vision, cognitive disabilities, and everyone on mobile.

Key points

• ARIA first rule: don't use ARIA if a native HTML element can do the job
• Test with keyboard-only navigation (Tab, Enter, Escape, Arrow keys)
• Use Lighthouse in Chrome DevTools for accessibility auditing

Concepts covered

Semantic HTML, ARIA, Accessibility, SEO, Screen Readers