DEV Community

Miguel Ouma
Miguel Ouma

Posted on

Title: Why Semantic HTML and Accessibility

#webdev #beginners #tutorial #programming

Matter: Lessons From My Portfolio Audit

Introduction

When building web applications, it is easy to default to using

elements for everything. However, writing clean, semantic HTML and prioritizing web accessibility (a11y) makes websites more navigable for users, screen readers, and search engine crawlers alike. In this post, I will break down why semantic HTML matters, share a before-and-after refactoring example, and highlight key accessibility fixes from my recent portfolio audit.
  1. What is Semantic HTML and Why Does It Matter?

Semantic HTML means using HTML markup to reinforce the meaning or context of the content rather than just defining its appearance. Elements like

, , , , and tell both browsers and assistive technologies (such as screen readers) exactly what purpose a section serves.

Key benefits include:

Accessibility: Screen readers can easily jump between regions (e.g., directly to

or ).

SEO Benefits: Search engines better understand content hierarchy and context.

Maintainability: Clean code structure makes collaboration and debugging significantly easier.

  1. Before & After: Semantic HTML Refactoring

Here is an example of refactoring non-semantic code into semantic HTML:

Before (Non-Semantic):

HTML

    Home
    About





    Welcome
Enter fullscreen mode Exit fullscreen mode

After (Semantic):

HTML

    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
Enter fullscreen mode Exit fullscreen mode


Welcome



  1. Key Accessibility Fixes from My Portfolio Audit

During an accessibility audit of my portfolio using Chrome DevTools Lighthouse, I identified and fixed three critical issues:

Adding Image Alt Attributes: Images lacked descriptive alt text. Adding descriptive attributes allows screen readers to announce image context to visually impaired users.

Explicit Form Labels: Ensured every form input was explicitly paired with a element using matching for and id attributes.

Language Declaration: Added lang="en" to the root tag to help screen readers select the correct text-to-speech pronunciation engine.

Conclusion

Building accessible, semantic web pages from day one ensures that the web remains inclusive for everyone.

Check out my live portfolio hosted on GitHub Pages:

👉 https://pilotjuen-hash.github.io/iyf-s11-week-01-pilotjuen-hash/

Top comments (0)