Semantic HTML: The First Accessibility Tool

Prerequisites

Before you start:

Learners should understand:

• basic HTML document structure
• headings and paragraphs
• links and images
• simple CSS classes

Core explanation

Semantic HTML means using HTML elements according to their meaning.

For example:

• Use h1 to h6 for headings.
• Use p for paragraphs.
• Use ul, ol, and li for lists.
• Use a for links to another page, section, file, or URL.
• Use button for actions that happen on the current page.
• Use nav for major navigation.
• Use main for the main content of the page.
• Use form, label, input, and button for forms.

When you use the correct element, the browser gives you useful behaviour for free.

A real button:

• can receive keyboard focus
• can be activated with keyboard controls
• is announced as a button by assistive technology
• works with forms and JavaScript event handling

A div with a click event does none of that automatically.

HTML is not merely the box the design arrives in. HTML is the document’s structure.

Page landmarks

Landmarks help users understand and move through a page.

Common landmarks include:

<header>
  <!-- Introductory page or site content -->
</header>

<nav aria-label="Main navigation">
  <!-- Major navigation links -->
</nav>

<main>
  <!-- Unique main content for this page -->
</main>

<aside>
  <!-- Related supporting content -->
</aside>

<footer>
  <!-- Footer content -->
</footer>

A typical page should have one main main element. This helps assistive technology identify the primary content.

Heading order

Headings create an outline.

A good structure:

<h1>Accessibility Essentials</h1>

<h2>Semantic HTML</h2>
<h3>Page landmarks</h3>
<h3>Heading order</h3>

<h2>Keyboard navigation</h2>
<h3>Focus states</h3>

A confusing structure:

<h1>Accessibility Essentials</h1>
<h4>Semantic HTML</h4>
<h2>Page landmarks</h2>
<h6>Heading order</h6>

Do not choose headings based on visual size. Choose headings based on structure, then style them with CSS.

Links vs buttons

This distinction matters.

Use a link when the user goes somewhere:

<a href="/tutorials/accessibility/">View accessibility tutorials</a>

Use a button when the user does something on the current page:

<button type="button">Open menu</button>

A useful test:

• “Go to...” usually means a link.
• “Do something...” usually means a button.

Examples:

Starter code

<div class="page">
  <div class="top">
    <div class="brand">Black Swan Bistro</div>
    <div class="nav">
      <div>Home</div>
      <div>Menu</div>
      <div>Bookings</div>
    </div>
  </div>

  <div class="content">
    <div class="title">Modern Australian dining</div>
    <div class="subtitle">Seasonal food, local produce, relaxed evenings.</div>
    <div class="cta">Book a table</div>

    <div class="section-title">Today’s specials</div>
    <div class="card">
      <div class="card-title">Grilled barramundi</div>
      <div>Served with lemon myrtle butter.</div>
    </div>
  </div>

  <div class="bottom">
    Copyright Black Swan Bistro
  </div>
</div>

Improved code

<header class="site-header">
  <a class="site-logo" href="/">Black Swan Bistro</a>

  <nav aria-label="Main navigation">
    <ul class="nav-list">
      <li><a href="/">Home</a></li>
      <li><a href="/menu.html">Menu</a></li>
      <li><a href="/bookings.html">Bookings</a></li>
    </ul>
  </nav>
</header>

<main>
  <section class="hero">
    <h1>Modern Australian dining</h1>
    <p>Seasonal food, local produce, relaxed evenings.</p>
    <a class="button" href="/bookings.html">Book a table</a>
  </section>

  <section aria-labelledby="specials-heading">
    <h2 id="specials-heading">Today’s specials</h2>

    <article class="card">
      <h3>Grilled barramundi</h3>
      <p>Served with lemon myrtle butter.</p>
    </article>
  </section>
</main>

<footer class="site-footer">
  <p>&copy; Black Swan Bistro</p>
</footer>

Supporting CSS

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

.site-header,
.site-footer {
  padding: 1rem;
  background: #161616;
  color: #ffffff;
}

.site-logo,
.site-header a {
  color: #ffffff;
}

.nav-list {
  display: flex;
  gap: 1rem;
  padding: 0;
  list-style: none;
}

main {
  padding: 2rem;
}

.hero {
  max-width: 60rem;
  margin-bottom: 2rem;
}

.button {
  display: inline-block;
  padding: 0.75rem 1rem;
  background: #7c2d12;
  color: #ffffff;
  text-decoration: none;
  border-radius: 0.4rem;
}

.button:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 3px;
}

.card {
  padding: 1rem;
  border: 1px solid #d4d4d4;
  border-radius: 0.5rem;
}

How and why this improves the page

The improved version gives the page a meaningful structure:

• header identifies introductory site content.
• The logo is a real link back to the home page.
• nav identifies the main navigation.
• The navigation items are real links inside a list.
• main identifies the main content of the page.
• h1, h2, and h3 create a clear heading structure.
• section groups related content.
• article identifies a self-contained content card.
• The booking call-to-action is a link because it moves users to another page.
• footer identifies the closing site information.

The CSS handles visual presentation. The HTML handles meaning.

That separation is one of the saner parts of the web. We should enjoy it while we can.