Article to post:

I joined IYF 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 for 2 reasons:

Screen readers can understand your page

Your form can validate automatically without JavaScript

Before vs After - My Contact Form

Before (non-semantic):

Full Name

Message

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

After (semantic - what I use now):

Personal Information

Full Name *

Message * (min 50 characters)

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

3 Accessibility Issues I Found and Fixed

1.…