Semantic HTML & Accessibility: what I learned and Fixed

#html #webdev #frontend #a11y

Introduction

Building my first personal portfolio website taught me that creating a website is not just about making it look attractive. It is also about making it accessible, understandable, and easy to navigate for everyone.

What Is Semantic HTML?

Semantic HTML means using HTML elements that describe the meaning and purpose of their content. For example, <header> identifies introductory content, <nav> identifies navigation links, and <main> identifies the primary content of a page.

Semantic HTML improves accessibility because assistive technologies, such as screen readers, can use these elements to help users understand and navigate a webpage. It also makes code easier to read, maintain, and organize.

Before and After: Improving HTML Structure

Initially, a webpage might use generic <div> elements for everything:

Before — Non-semantic HTML

<div class="header">
  <div class="nav">
    <div>Home</div>
    <div>About</div>
    <div>Contact</div>
  </div>
</div>

<div class="main">
  <div class="title">Welcome to My Portfolio</div>
  <div>This is my introduction.</div>
</div>

After — Semantic HTML

<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Welcome to My Portfolio</h1>
  <p>This is my introduction.</p>
</main>

The semantic version clearly identifies the page structure and provides meaningful, keyboard-accessible navigation links.

Accessibility Issues I Found and Fixed

During my accessibility audit, I focused on three important areas:

1. Images Without Alternative Text

Images without descriptive alt attributes can be difficult for screen-reader users to understand. I added appropriate alternative text to meaningful images and empty alt attributes to decorative images.

2. Inconsistent Heading Hierarchy

Using headings only for their visual appearance can confuse users navigating with assistive technology. I organized headings logically, starting with one <h1> and using <h2> and <h3> for nested sections.

3. Unclear Links and Form Labels

Generic link text such as "Click here" does not explain the destination. I replaced it with descriptive text. I also associated every form input with a visible <label> so users can identify what information is required.

What I Learned

Accessibility is not an optional feature added at the end of development. It is an essential part of building a good website from the beginning. Semantic HTML, descriptive links, accessible images, and properly labeled forms make websites more usable for a wider range of people.

You can explore my portfolio here: [https://dev.to/grace_wambui_21df8ebf1ae3/semantic-html-accessibility-what-i-learned-and-fixed-1b10]
As I continue learning web development, I will keep accessibility in mind throughout the design and development process.

DEV Community