Why Semantics Matter: My Journey Into Web Accessibility

#a11y #frontend #html

When building for the web, it is easy to fall into the habit of structuring everything with div tags. However, my first week at IYF taught me that how we write HTML fundamentally impacts how people experience our websites.

Here is what I learned about semantic HTML and web accessibility during my latest portfolio audit.

What is Semantic HTML and Why Does It Matter?

Semantic HTML means using tags that clearly describe their meaning to both the browser and the developer. Instead of using generic layout blocks, semantic tags like header, nav, main, article, and footer clearly define the structure of a document.

This matters because accessibility is a foundational requirement, not an optional feature. Screen readers and other assistive technologies rely entirely on these tags to navigate a webpage. Without semantic milestones, a user relying on a screen reader is forced to listen to a chaotic wall of text with no clear structural guideposts.

Before and After: The Semantic Shift

To see the difference, look at how a simple layout can be transformed from a messy container layout to clear, meaningful semantic elements:

Non-Semantic (Bad Practice)

<!-- BAD: Non-semantic version -->
<div class="header">
    <div class="logo">My Site</div>
    <div class="nav">
        <div class="nav-item">Home</div>
        <div class="nav-item">About</div>
        <div class="nav-item">Contact</div>
    </div>
</div>

Semantic (Good Practice)

<!-- GOOD: Clean Semantic version -->
<header>
    <h1>My Site</h1>
    <nav>
        <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>

Auditing My Portfolio: 3 Key Fixes

Using Chrome DevTools Lighthouse and the WAVE Web Accessibility Tool, I ran an audit on my newly created portfolio site. I uncovered a few critical issues and immediately fixed them:

Missing Image Alt Text: A few placeholder images lacked alt descriptive attributes. I resolved this by adding descriptive alt="Profile picture of developer" text so screen reader users know exactly what the image depicts.
Broken Form Labels: My input fields in contact.html weren't properly wrapped or explicitly connected to their labels. I linked them explicitly using matching id and for attributes inside the label tags.
Skipped Heading Hierarchy: My page structure skipped straight from an h1 to an h3. I re-aligned the text flow into a strict logical hierarchy (h1 -> h2 -> h3) to avoid confusing page outlines.

After implementing these fixes, my Lighthouse accessibility score reached a perfect score!

Check Out My Project

You can see my fully optimized, semantic multi-page portfolio live in action here:
https://github.io

DEV Community