Christopher

Posted on Oct 1

Some DEV basics information

#programming

Semantic HTML and Accessibility: What I Learned

When building a website, it is easy to focus mainly on how the page looks. However, a good website should also be easy for different users and assistive technologies to understand and navigate. This is where semantic HTML and web accessibility become important.

What Is Semantic HTML?

Semantic HTML means using HTML elements according to their meaning and purpose instead of using generic elements everywhere. Examples include <header>, <nav>, <main>, <section>, <article>, and <footer>.

Semantic elements make the structure of a webpage clearer to both developers and assistive technologies such as screen readers. They also make code easier to read and maintain.

Before: Non-Semantic HTML

A non-semantic page might use generic <div> elements for everything:

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

<div class="content">
    <h1>About Me</h1>
    <p>My name is Christopher.</p>
</div>

After: Semantic HTML

The same structure can be made clearer using semantic elements:

<header>
    <nav>
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
    </nav>
</header>

<main>
    <section>
        <h1>About Me</h1>
        <p>My name is Christopher.</p>
    </section>
</main>

The semantic version communicates the purpose of each part of the page more clearly.

Accessibility Issues I Checked

During my accessibility audit, I checked several important areas.

1. Language Attribute

I made sure my HTML document specified its language:

<html lang="en">

This helps browsers and assistive technologies understand the language being used on the page.

2. Heading Hierarchy

I checked that my headings followed a logical structure, starting with <h1> and then using <h2> for sections. This makes the content easier to navigate.

3. Descriptive Links

I checked that my links used meaningful text such as "YouTube" and "Email Me" instead of vague text such as "Click here."

My website also has a decorative background image added through CSS.

Accessibility Testing

I tested my website using Chrome DevTools Lighthouse and WAVE/AIM.

My Lighthouse results were:

Performance: 95
Accessibility: 96
Best Practices: 100
SEO: 90

My WAVE/AIM result was 10/10.

My Portfolio

You can view my deployed portfolio here:

https://github.com/Wesala-crypto

Conclusion

This task taught me that accessibility should be considered while building a website, not added as an afterthought. Using semantic HTML, meaningful links, proper headings, and appropriate accessibility attributes can make a website easier to understand and use.

As I continue learning web development, I will keep accessibility in mind when designing and building my projects.

DEV Community