Front-End: Core Web

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 understand the page structure and provide navigation shortcuts to users.
      • SEO: Search engines use tags like <article> and <h1> to better understand and rank your content.
      • Maintainability: Code is easier for other developers to read and understand.
    • The Golden Rule: If a native HTML element exists for the job, use it. (<button> is better than <div role="button">).
  • Accessibility (a11y)
    • What: The practice of making websites usable by everyone, including people with disabilities.
    • WCAG (Web Content Accessibility Guidelines): The global standard for accessibility, based on four principles (POUR):
      • Perceivable: Users must be able to perceive the information (e.g., providing alt text for images).
      • Operable: Users must be able to operate the interface (e.g., everything works with a keyboard).
      • Understandable: The content and UI must be clear and predictable.
      • Robust: Content must be compatible with a wide range of user agents, including assistive technologies.
    • ARIA (Accessible Rich Internet Applications)
      • What: A set of HTML attributes that can enhance accessibility when native semantics are not sufficient.
      • Use Case: To add context to non-semantic elements (like a div pretending to be a button) or to describe the state of dynamic widgets (e.g., aria-expanded="true").

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 when no other element is appropriate.
  • Structural Elements: <header>, <footer>, <nav>, <main>, <section>, <article>, <aside>. These give your page a clear, machine-readable structure.
  • Text Elements: <h1>-<h6>, <p>, <ul>, <ol>, <li>, <blockquote>. These structure your content, which is vital for readability and SEO.
  • Interactive Elements: <button>, <a>, <input>, <form>. Using these native elements is critical because they come with built-in accessibility features, such as being focusable by a keyboard and being understood by screen readers.

2. Accessibility (a11y): Beyond the Visuals

Accessibility means designing for everyone. This includes users who may be blind and use a screen reader, users who cannot operate a mouse and rely on a keyboard, users with low vision who need high contrast, and many others. Using semantic HTML is the foundation of accessibility. A screen reader can announce “Heading level 1” for an <h1> or “Button” for a <button>, giving essential context to a non-sighted user. 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 HTML element with the right semantics exists, use it. However, for complex, dynamic web applications, you sometimes create components that have no native HTML equivalent (like a custom dropdown menu or a tabbed interface). In these cases, ARIA is essential.

  • role: This attribute tells assistive technologies what a generic element is pretending to be. For example, <div role="button"> tells a screen reader to treat this div as a button.
  • aria-label: Provides an accessible name for an element when there is no visible text (e.g., an icon-only button: <button aria-label="Close">X</button>).
  • State Attributes: Attributes like aria-expanded, aria-selected, and aria-hidden describe the state of dynamic components.

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

”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>

Accessibility Issues:

  1. No Structure: A screen reader just sees a series of divs and has no idea what the page structure is.
  2. Fake Heading: The page-title div looks like a heading, but it isn’t programmatically a heading.
  3. Fake Navigation: The nav div and spans are not identifiable as a navigation block or as links.
  4. Fake Button: The button div is the worst offender. It is not focusable with a keyboard, it doesn’t announce itself as a button to screen readers, and it cannot be activated with the Enter or Space keys.

”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. Clear Structure: The page is now structured with <header> and <main>, which is immediately understandable to assistive technologies.
  2. Real Heading: <h1> is used for the main page title. A screen reader user can now use a shortcut to jump directly to the main heading.
  3. Real Navigation: <nav> defines the navigation region. Using a <ul> (unordered list) for the links is a standard, semantic way to structure a list of navigation items. The aria-label on the <nav> helps distinguish it if there were multiple navigation blocks on the page.
  4. Real Button: The <button> element is used. This is a huge improvement:
    • It is automatically focusable via the keyboard (e.g., by pressing Tab).
    • It can be activated with both the Enter and Space keys.
    • It announces itself to screen readers as “Button, Click Me”.

This refactored version is far more accessible, better for SEO, and easier for other developers to understand and maintain.