DEV Community

Claire
Claire

Posted on Edited on

Sematic HTML and Accessibility: What I Learned and Fixed

#a11y #webdev #html #beginners

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:

  1. Screen readers can understand your page
  2. 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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/

  1. 4 pages with styled nav + active state
  2. Accessible contact form
  3. 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.

Top comments (0)