My First Accessibility Audit: Learning Semantic HTML and Building for Everyone

When I started learning HTML, my main focus was making websites display correctly in the browser. I paid attention to headings, paragraphs, images, and links, but I didn't always think about what those elements meant.

During my practical web development training at WeCan Academy, I learned that writing HTML is not just about how a webpage looks. It's also about making its content understandable and accessible to different users.

This introduced me to semantic HTML and web accessibility.

What Is Semantic HTML?

Semantic HTML means using HTML elements according to their meaning and purpose rather than choosing elements only for their appearance.

For example, instead of using <div> elements for every part of a webpage, we can use meaningful elements such as:

  • <header> for introductory content.
  • <nav> for navigation links.
  • <main> for the main page content.
  • <section> for related content grouped together.
  • <article> for independent, self-contained content.
  • <footer> for footer information.

These elements help browsers, search engines, developers, and assistive technologies understand the structure of a webpage.

Before and After: Non-Semantic vs Semantic HTML

Initially, a webpage layout might be written using generic <div> elements:

Before: Non-semantic HTML

<div class="header"> <div class="logo">My Website</div> <div class="navigation"> <div>Home</div> <div>About</div> <div>Contact</div> </div> </div> <div class="main"> <div class="content"> <div class="title">Welcome to My Website</div> <div>This is my first paragraph.</div> </div> </div>

Although this can display content, the HTML doesn't clearly communicate the purpose of each part.

After: Semantic HTML

<header> <h1>My Website</h1> <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> <section> <h2>Welcome to My Website</h2> <p>This is my first paragraph.</p> </section> </main>

The second example gives the content a meaningful structure, making it easier to understand and navigate.

What I Learned From My Accessibility Audit

I audited my personal portfolio using Chrome DevTools Lighthouse and the WAVE Web Accessibility Evaluation Tool.

Here are three important accessibility practices I worked on:

1. Alternative Text for Images

Images need appropriate alternative text so that screen readers can communicate their content to users who cannot see them.

I improved my profile image from a generic description to a more meaningful one:

<img src="./images/photo.jpg" alt="Portrait of Shaniz Ann Mumbua" >

2. Proper Heading Structure

Headings help organize content and make it easier to navigate.

I checked that my page had one main <h1> heading, followed by <h2> headings for the main sections. This created a more logical content hierarchy.

3. Descriptive Links and Page Language

I checked that links communicated their purpose instead of using vague text such as "click here".

I also confirmed that my HTML document included:

<html lang="en">

This helps browsers and screen readers identify the language of the page.

My Accessibility Audit Results

After making improvements, I tested my website using both tools.

My results were:

  • Lighthouse Accessibility: 100/100
  • WAVE AIM Score: 10/10
  • WAVE Errors: 0
  • Contrast Errors: 0
  • Alerts: 0

These results were encouraging, although I learned that automated tools cannot identify every accessibility problem. Manual testing is still important.

Final Thoughts

This exercise changed how I think about writing HTML. I now understand that good web development is not only about creating attractive pages but also about making websites understandable and usable by different people.

As I continue learning web development, I want to make accessibility part of my development process from the beginning rather than treating it as something to add at the end.

I'm still learning, building, and improving one project at a time!