# Building an Accessible Web Portfolio: Semantic HTML and Accessibility Audit

Florence Gitau — Thu, 01 Oct 2026 08:12:18 +0000

When building my personal web portfolio, I realised that writing code that simply renders on screen isn't enough. Ensuring web applications are accessible to all users—including those relying on screen readers and keyboard navigation—is essential for modern web development.
Here is what I learned while auditing my web portfolio for accessibility.

What is Semantic HTML and why does it matter?

It means using HTML elements according to their intended structural meaning of an element rather than its visual appearance.
Semantic tags matter because:
-Accessibility: Screen readers use semantic markup as landmarks, letting users navigate directly to primary sections.
-Search Engine Optimisation: Search engines understand page structure and hierarchy much better.
-Code Maintainability: It produces cleaner, more readable code for developers.

Before vs. After Code Snippet

Example from my project comparing non-semantic and semantic HTML:

Non-Semantic (Before):

<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 (After):

<header>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

Accessibility Issues Found & Fixed