HTML Semantics & Accessibility

Mind Map Summary

• Semantic HTML
  • What: Using HTML elements according to their meaning, not their appearance.
  • Why It Matters:
    • Accessibility (a11y): Screen readers use semantic tags (<nav>, <h1>, <button>) to provide navigation shortcuts.
    • SEO: Search engines use tags like <article> and <h1> to rank content.
    • Maintainability: Code is easier for other developers to read.
  • The Golden Rule: Use native elements whenever possible (<button> over <div role="button">).
• Accessibility (a11y)
  • WCAG Principles (POUR):
    • Perceivable: Information must be readable (e.g., alt text).
    • Operable: Interface must be keyboard-accessible.
    • Understandable: Content and UI must be predictable.
    • Robust: Compatible with diverse user agents and assistive tech.
• ARIA (Accessible Rich Internet Applications)
  • What: Attributes that enhance accessibility when native semantics are insufficient.
  • Use Case: Describing dynamic states (e.g., aria-expanded) or adding roles to custom widgets.

Core Concepts

1. Semantic HTML: Writing with Meaning

At its core, semantic HTML is about choosing the right element for the right job. A <div> is a generic container; it tells you nothing about its contents. A <nav> element, however, explicitly tells browsers, search engines, and screen readers that its contents are the primary navigation links for the page.

• Non-Semantic Elements: <div>, <span>. Use these for purely presentational styling.
• Structural Elements: <header>, <footer>, <nav>, <main>, <section>, <article>, <aside>.
• Interactive Elements: <button>, <a>, <input>, <form>. These come with built-in keyboard support and screen reader recognition.

2. Accessibility (a11y): Beyond the Visuals

Accessibility means designing for everyone. This includes users who may be blind, use only a keyboard, or have low vision. Using semantic HTML is the foundation. A screen reader can announce “Heading level 1” for an <h1>, giving essential context. If you use a <div> for everything, that context is lost.

3. ARIA: Bridging the Gap

The first rule of ARIA is: don’t use ARIA if a native element exists. However, for complex widgets (like tabs or accordions), ARIA is essential.

• role: Tells assistive technologies what a generic element is pretending to be.
• aria-label: Provides an accessible name when there is no visible text.
• State Attributes: aria-expanded, aria-selected, and aria-hidden describe the current state of interactive logic.

Practice Exercise

Audit a simple webpage for accessibility issues. Refactor non-semantic elements (divs used for buttons or headers) into their correct semantic counterparts (button, h1, etc.) and add necessary ARIA attributes.

Answer (Refactoring for Accessibility)

“Bad” Code: Non-Semantic and Inaccessible

<div class="header">
  <div class="logo">My Awesome Site</div>
  <div class="nav">
    <span>Home</span>
    <span>About</span>
    <span>Contact</span>
  </div>
</div>

<div class="main-content">
  <div class="page-title">Welcome to my site!</div>
  <p>This is some content.</p>
  <div class="button" onclick="doSomething()">Click Me</div>
</div>

Issues:

1. No Structure: Assistive technology sees a flat list of divs.
2. Fake Heading: The title isn’t programmatically a heading.
3. Fake Button: The “button” isn’t focusable via keyboard and cannot be triggered by the Enter key.

”Good” Code: Semantic and Accessible

<header>
  <a href="/" class="logo">My Awesome Site</a>
  <nav aria-label="Main Navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Welcome to my site!</h1>
  <p>This is some content.</p>
  <button type="button" onclick="doSomething()">Click Me</button>
</main>

Improvements:

1. Real Content Landmarks: Browsers and screen readers now know where the navigation and main content are.
2. Keyboard Support: The <button> is now reachable via Tab and activatable via Space/Enter without extra JavaScript.
3. SEO Hierarchy: The <h1> clearly defines the primary topic for search engine bots.