Sematic HTML and Accessibility: What I Learned and Fixed

Claire — Wed, 28 Oct 2026 19:24:53 +0000

Introduction

I am learning HTML to learn different coding languages and to be able to apply them. In Week 01 we started with HTML, and I thought I knew forms until I did an accessibility audit on my contact form.

Here is what I learned.

What is Semantic HTML and why it matters?

Semantic HTML means using tags for their meaning, not just for looks. Instead of using <div> for everything, you use <nav>, <fieldset>, <legend>, <label>, <main>.

It matters because:

Screen readers can understand your page
Your form can validate automatically without JavaScript

Before vs After - My Contact Form

Before (non-semantic):

<div>
  Full Name
  <input type="text" placeholder="name">
</div>
<div>
  Message
  <textarea></textarea>
</div>

Problem: No label is linked to input, no grouping, no required check.

After (semantic - what I use now):

<fieldset>
  <legend>Personal Information</legend>

  <label for="fullName">Full Name *</label>
  <input type="text" id="fullName" name="fullName" required autocomplete="name">

  <label for="message">Message * (min 50 characters)</label>
  <textarea id="message" required minlength="50"></textarea>
</fieldset>

Now the label is linked with for="fullName" matching id="fullName", and the browser validates automatically.

Accessibility Issues I Found and Fixed

1. Unlinked labels
My audit showed labels were not connected to inputs. Screen readers couldn't read them. I fixed it by adding for and id with same value.

2. Missing fieldset and legend
I had all inputs in divs. I grouped them into <fieldset> with <legend>Personal Information</legend> and <legend>Your Message</legend>. Now users know which section they are in.

3. No alt text and bad form attributes
I had method="posts", typo reqiured, and fieldest. Also my images had no description. I fixed to method="post", required, fieldset, and added alt="Portrait photo of Claire Wairimu". I also added autocomplete for better UX.

My Deployed Portfolio

You can see the fixed 4-page portfolio here:
https://gakuruclaire39-cmd.github.io/Iyf-s12-week-01-gakuruclaire39-cmd/

4 pages with styled nav + active state
Accessible contact form
Semantic heading hierarchy

If you are working on your web foundations, run Lighthouse in Chrome DevTools early. It catches all these issues in seconds.

As I continue learning, I intend to apply all the principles to my project.

DEV Community: Claire

Sematic HTML and Accessibility: What I Learned and Fixed

What is Semantic HTML and why it matters?

Before vs After - My Contact Form

Accessibility Issues I Found and Fixed

My Deployed Portfolio