Why Web Accessibility Matters: How I Fixed My Portfolio’s Semantic HTML
When first learning web development, it is easy to focus entirely on making a page look good visually. However, clean code is about much more than just pixels—it is about making sure everyone can access and use your website, including users who rely on screen readers or assistive technologies.
For my recent portfolio project, I conducted an accessibility audit using Chrome DevTools Lighthouse and the WAVE tool. What I discovered opened my eyes to the power of Semantic HTML.
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 a generic
This matters because screen readers depend on these landmarks to navigate a webpage. Without semantic structural elements, a screen reader treats the entire site like a massive, unstructured wall of text, making it extremely frustrating to navigate.
Before vs. After: Fixing the StructureBefore vs. After: Fixing the Structure
During my audit, I realized parts of my project relied heavily on unsemantic structure, which hid the true hierarchy of my page.
Here is a before-and-after look at how I refactored my layout: '''html
Before (Non-Semantic):<!-- Generic layout with no meaning -->
Mercy's Portfolio
<div class="links">
<a href="index.html">Home</a>
</div>
Mercy's Portfolio
Real Accessibility Issues Found & Fixed
Beyond layout landmarks, my audit uncovered two critical structural issues on my home page:
Broken HTML Syntax Tags: In my hobbies section, I discovered my unordered list (
- ) was accidentally closed with an underline tag (). This invalid syntax throws off screen readers, preventing them from cleanly reading through the items. I swapped it back to a standard closing
Deceptive Link References: My portfolio link said "MDN Web Docs", but the backend href property accidentally pointed straight to GitHub. Deceptive or broken link pairings confuse users who browse via audio descriptions. I fixed the anchor destination to point exactly to the official MDN URL.
Conclusion
After applying these structural layout updates, fixing the list syntax, and pairing it with proper image alternative text, my Lighthouse accessibility score officially jumped to a perfect 100/100!
