Understanding Semantic HTML and Accessibility.

Understanding Semantic HTML and Web Accessibility

As I continue learning web development, I have discovered that creating a website is not only about making it look good. A website should also be well-structured, understandable, and accessible to different users.

What Is Semantic HTML?

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

These elements help developers understand the structure of a webpage. They also help browsers and assistive technologies, such as screen readers, interpret and navigate the content.

Before and After: Improving HTML Structure

Before, a webpage might use generic <div> elements for everything:

<div>
  <div>My Website</div>
  <div>Welcome to my page</div>
</div>

This code works, but the elements do not explain the purpose of each section.

After, we can use semantic elements:

<header>
  <h1>My Website</h1>
</header>

<main>
  <p>Welcome to my page</p>
</main>

The improved version makes the page structure clearer and easier to maintain.

Three Accessibility Issues and Their Fixes

During my accessibility learning and audit, I focused on three common problems:

1. Images without alternative text

An image without useful alternative text may be difficult for someone using a screen reader to understand. I learned to add descriptive alt text to meaningful images. Decorative images can use an empty alt="" attribute.

2. Form fields without labels

When form fields lack properly associated labels, users may not know what information to enter. I learned to connect each <label> to its input using matching for and id values.

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

3. Poor heading structure

Headings help users scan and navigate a page. Skipping heading levels without a good reason can make the structure confusing. Using a logical hierarchy, starting with a main <h1> and appropriate subheadings, makes content easier to follow.

What I Learned

Semantic HTML and accessibility are important parts of responsible web development. Meaningful elements improve code organization, while descriptive image text, labelled form fields, and logical headings help more people use a website.

As a beginner, I am continuing to practise these techniques while building my own portfolio.

View my portfolio: https://briannjuguna882-a11y.github.io/iyf-s12-week-01-your-github-briannjuguna882-a11y/

I am looking forward to learning more and improving my skills in HTML, CSS, and accessible web design.