DEV Community

Cover image for Improving Web Accessibility Through Semantic HTML: Lessons from My Personal Portfolio
Stacy Otieno
Stacy Otieno

Posted on

Improving Web Accessibility Through Semantic HTML: Lessons from My Personal Portfolio

#programming #semantic

Introduction
As I continue learning web development, I have discovered that building a website is not just about making it visually appealing. It is also about ensuring that everyone, including people with disabilities, can access and interact with its content.
Recently, I conducted an accessibility audit on my personal portfolio website using Google Chrome Lighthouse and the WAVE Web Accessibility Evaluation Tool. This exercise helped me understand the importance of semantic HTML and how small changes in code can improve the accessibility of a website.

What Is Semantic HTML and Why Does It Matter?
Semantic HTML refers to using HTML elements that clearly describe the meaning and purpose of the content they contain.
For example, instead of using generic

elements for everything, developers can use elements such as , , , , and .
Semantic HTML matters because it:
• Helps screen readers understand and navigate website content.
• Improves the overall structure and readability of HTML.
• Makes websites easier to maintain.
• Helps browsers and search engines understand the content.

Before and After: Non-Semantic vs Semantic HTML
During my learning process, I explored how semantic elements improve the structure of a webpage.
Before: Non-semantic HTML

Welcome to My Portfolio

<h3>About Me</h3>
<p>I am Stacy Otieno.</p>
Enter fullscreen mode Exit fullscreen mode

After: Semantic HTML

Welcome to My Portfolio



About Me


I am Stacy Otieno.




The improved version uses meaningful HTML elements and follows a logical heading hierarchy.
Accessibility Issues I Identified and Fixed
During my audit, I identified several areas that needed improvement.
  1. Image Alternative Text My portfolio image initially had a short alternative description: "Stacy". I changed it to: Photograph of Stacy Otieno This provides a more meaningful description for users who rely on screen readers.
  2. Incorrect Heading Hierarchy My webpage jumped directly from an

    to an

    . This disrupted the logical structure of the page. I introduced appropriate

    headings to ensure the hierarchy followed a logical order.

  3. Descriptive Links My email link initially displayed only my name, "Stacy". I changed the link text to "Email Stacy Otieno" so users could understand its purpose more easily. Email Stacy Otieno Testing and Results After implementing the improvements, I tested my portfolio using: • Google Chrome Lighthouse • WAVE Web Accessibility Evaluation Tool My final Lighthouse accessibility score was 89/100. Although there is still room for improvement, the exercise helped me understand how accessibility testing can reveal problems that might otherwise go unnoticed.

Conclusion
This exercise taught me that accessibility should be considered from the beginning of web development rather than treated as an afterthought.
Using semantic HTML, meaningful alternative text, logical heading structures, and descriptive links makes websites more inclusive and easier to navigate.

As I continue developing my programming skills, I intend to make accessibility an important part of every website I build.
View my portfolio: [Insert your deployed GitHub Pages URL here]
Connect with me: Stacy Otieno

Top comments (0)