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

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

• Unlabeled inputs: Issue: The document does not have a landmark element. Fix: Included the core body content inside a HTML tag.
• Sufficient size and spacing. Issue: The document's touch targets didn't have sufficient size and spacing. Fix: Added padding and margin CSS styles to anchor tags to increase tap target size and spacing.