DEV Community

Jaja juliana
Jaja juliana

Posted on Edited on

Semantic HTML & Accessibility: what I learned and fixed

#a11y #frontend #html #learning

Introduction

When I started learning web development through the IYF Season 12 programme, I learned that creating a website is not just about making it look good. It is also important to make sure that different people can access and understand the information on the website.

During Week 1, I worked on my first website and completed an accessibility audit using Chrome Lighthouse and the WAVE Accessibility Tool. This helped me understand semantic HTML and why accessibility matters.

What Is Semantic HTML?

Semantic HTML means using HTML elements according to their meaning and purpose. Instead of using generic elements such as

for everything, we use meaningful elements such as , , , and .

Semantic HTML makes website content easier to understand for browsers, developers and people who use assistive technologies such as screen readers.

For example, consider the following code.

Before: Non-semantic HTML
HTML

My Website

    Home
    About
    Contact





    Welcome to My Website
    This is my first webpage.
Enter fullscreen mode Exit fullscreen mode

After: Semantic HTML
HTML

<h1>My Website</h1>


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


Welcome to My Website


This is my first webpage.



<p>© 2026 My Website</p>
Enter fullscreen mode Exit fullscreen mode

The second example gives each part of the webpage a clear purpose.

Accessibility Issues I Found

During my accessibility audit, I identified some areas that needed improvement.

  1. Missing Image Descriptions

I learned that images should have alternative text so that people using screen readers can understand what the images represent.

  1. I fixed this by adding the alt attribute.

Testing My Website

I used two accessibility testing tools:

Chrome Lighthouse: I used it to run an accessibility audit and review recommendations for improving my webpage.
WAVE Accessibility Tool: I used it to identify possible accessibility errors and warnings.

These tools helped me understand areas where my website could be improved.

Conclusion

This activity taught me that accessibility should be considered when building a website. I now understand the importance of semantic HTML, alternative text, proper heading structures and descriptive links.

As I continue learning web development, I will keep practicing these concepts and applying them to my future projects.

You can visit my portfolio here

View My Portfolio

Top comments (0)