Improving My Portfolio with Semantic HTML and Accessibility

As a programming student learning web development, I'm discovering that creating a website is about more than making it look good. A website should also be accessible, understandable, and usable by different people, including those who rely on assistive technologies.

For my accessibility audit, I examined my portfolio's index.html file and learned how semantic HTML can help create a better user experience.

What is semantic HTML?

Semantic HTML means using elements that describe the purpose of their content. Elements such as <header>, <nav>, <main>, and <footer> help browsers and assistive technologies understand a webpage's structure.

For example, compare these two approaches:

Before: Using generic elements

HTML
<div class="navigation">
  <a href="index.html">Home</a>
  <a href="about.html">About Me</a>
</div>

<div class="content">
  <h1>My Portfolio</h1>
</div>

After: Using semantic elements

HTML
<nav aria-label="Main navigation">
  <a href="index.html">Home</a>
  <a href="about.html">About Me</a>
</nav>

<main>
  <h1>My Portfolio</h1>
</main> 

The semantic version communicates the purpose of each region more clearly and helps assistive technologies identify important page landmarks.

Accessibility issues I identified

1. Inconsistent heading hierarchy

In my original HTML, the “CONTACT ME” heading uses an <h4> element even though the preceding headings use <h2> and <h3>.

HTML
<!-- Before -->
<h4>CONTACT ME</h4>
I would correct this to <h2> because “CONTACT ME” introduces a new section at the same level as my other main sections.

HTML
<!-- After -->
<h2>CONTACT ME</h2>
A logical heading hierarchy makes content easier to navigate, especially for screen-reader users.

2. An incorrectly formatted external link

My original TryHackMe link uses href="tryhackme.com", which can be interpreted as a relative URL rather than an external website.

HTML
<!-- Before -->
<a href="tryhackme.com">tryhackme.com</a>

I would fix it by including the full HTTPS address:

HTML
<!-- After -->
<a href="[https://tryhackme.com/](https://tryhackme.com/)">TryHackMe</a>

This makes the destination explicit and provides clearer link text.

What I've learned

This audit has taught me that small details in HTML can affect usability. Semantic elements, logical headings, and correctly written links all contribute to a better website. I'm learning to think beyond how a page looks and consider how different users interact with it.

Accessibility is an ongoing process, and I look forward to applying these lessons to future projects.

My portfolio: https://traceywanjiru.github.io/iyf-s12-week-01-traceywanjiru/

HTML #WebDevelopment #Accessibility #LearningToCode