DEV Community

Grace-Loko
Grace-Loko

Posted on

Semantic HTML and Accessibility: Building Better Websites

#html #webdev #a11y #beginners

Semantic HTML and Accessibility: Building Better Websites

Introduction

Semantic HTML is the practice of using HTML elements that clearly describe the purpose of the content on a webpage. Instead of using many <div> elements, semantic tags such as <header>, <nav>, <main>, <section>, <article>, and <footer> make the page easier to understand.

Semantic HTML is important because it improves accessibility, helps search engines understand web pages, and makes code easier to read and maintain.

Before: Non-Semantic HTML 

<div class="header">
    <h1>My Portfolio</h1>
</div>
<div class="navigation">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
</div>
<div class="content">
    <p>Welcome to my portfolio website.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

After: Semantic HTML 

<header>
    <h1>My Portfolio</h1>
</header>
<nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
</nav>
<main>
    <section>
        <p>Welcome to my portfolio website.</p>
    </section>
</main>
Enter fullscreen mode Exit fullscreen mode

Accessibility Issues I Found

1. Images Missing Alternative Text

Before:

<img src="images/profile.jpg">
Enter fullscreen mode Exit fullscreen mode

After:

<img src="images/profile.jpg" alt="Profile picture of Grace Loko">
Enter fullscreen mode Exit fullscreen mode

Adding alternative text allows screen readers to describe images to users with visual impairments.

2. Navigation Was Not Semantic

Before:

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

After:

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

Using the <nav> element helps assistive technologies identify the website navigation.

3. Form Inputs Had No Labels

Before:

<input type="text" placeholder="Your Name">
Enter fullscreen mode Exit fullscreen mode

After:

<label for="name">Name</label>
<input type="text" id="name" name="name">
Enter fullscreen mode Exit fullscreen mode

Labels improve accessibility by helping screen readers identify each form field.

Conclusion

This accessibility audit helped me understand the importance of semantic HTML and accessible web design. By replacing non-semantic elements with semantic tags, adding image alt text, and using proper form labels, I made my portfolio more accessible and easier to use.
These improvements also make the website easier to maintain and improve the experience for all users.

Top comments (0)