DEV Community

Kedar Kulkarni
Kedar Kulkarni

Posted on

✨ A Beginner's Guide to Web Accessibility – WCAG, Easy Checks & Semantic HTML

#webdev #html #a11y

Creating inclusive digital experiences means building websites that work for everyone, including individuals with physical, sensory, or cognitive impairments. Web accessibility isn’t just an option—it’s a foundational principle of good design. This post marks the beginning of a three-part series designed to help developers build accessible websites from the ground up.

🌐 What Is Web Accessibility?

Web accessibility ensures that digital products can be understood, navigated, and interacted with by users who have diverse abilities. This includes people who:

  • Are blind or have low vision
  • Are deaf or hard of hearing
  • Use assistive technologies (e.g., screen readers, keyboard-only navigation)
  • Experience cognitive or neurological conditions

By making our websites more accessible, we also improve usability for all users—not just those with disabilities.

📘 WCAG Compliance Levels Explained

The Web Content Accessibility Guidelines (WCAG) provide a structured approach to making web content accessible. These standards define three levels of conformance:

Level Description Who Benefits
A Basic accessibility Covers essential needs of users with disabilities
AA Recommended for most organizations Addresses the majority of common barriers
AAA Highest standard (difficult to meet) Supports a wide range of impairments

🧪 Examples:

  • AAA: w3.org, bbc.com, mit.edu
  • AA: google.com, microsoft.com, apple.com, india.gov.in

🛠️ Setting Up a Simple Accessible HTML Page

Let’s begin with a basic project that meets Level A requirements.

Step 1: Create a folder for your project 

mkdir myweb
cd myweb
Enter fullscreen mode Exit fullscreen mode

Step 2: Build a semantic index.html file 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Getting Started with Accessibility</title>
</head>
<body>
  <header>
    <h1>Welcome to Our Accessible Site</h1>
    <nav>
      <a href="#home">Home</a>
    </nav>
  </header>
  <main>
    <section>
      <h2>What is Accessibility?</h2>
    </section>
    <section>
      <h2>Why It Matters</h2>
    </section>
  </main>
  <footer>
    <a href="#contact">Contact Us</a>
  </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 3: View it using Live Server in VS Code

🔍 Quick Accessibility Audit: Easy Checks

W3C offers a set of informal checks called Easy Checks to help anyone quickly evaluate a page’s accessibility—even without expert knowledge.

✅ What It Covers:

  • Titles: Ensure each page has a clear and specific <title>.
  • Image Descriptions: Use meaningful alt attributes for all images.
  • Headings: Use heading tags in a logical order, without skipping levels.
  • Text Contrast: Ensure sufficient color contrast between text and background.
  • Keyboard Navigation: All functions should be usable via the keyboard.
  • Forms: Every form input must be associated with a visible or hidden <label>.

🔧 Tools for Manual Accessibility Checks

📌 WAVE by WebAIM

WAVE is a browser-based accessibility evaluator that flags issues like missing alt text, low contrast, and improper heading order.

🧪 Browser Developer Tools

  • Use the Inspector to verify alt attributes on images.
  • Test keyboard tab navigation to ensure elements receive focus.

🧠 Why Semantic HTML Is Crucial

Semantic HTML elements give structure and meaning to your content. They’re recognized by browsers, assistive technologies, and search engines alike.

Tag Purpose
<header> Identifies the page’s header section
<nav> Wraps navigation links
<main> Denotes primary page content
<section> Groups related content
<footer> Marks the page’s footer
<label> Connects text to form inputs
<button> Preferred over div for clicks

🔴 Avoid using <div> or <span> for layout unless no semantic alternative exists.

🎯 Final Thoughts

  • Accessibility benefits everyone, not just those with disabilities.
  • Starting with semantic HTML and proper structure makes a huge difference.
  • Use tools like WAVE and Easy Checks for quick wins.
  • Aim for at least WCAG Level A; strive for AA as your standard.

🚀 Coming Up: Common Accessibility Mistakes and How to Fix Them (Blog 2)

In the next part of the series, we’ll dive into the most frequent issues developers face—like poor contrast, unlabeled form fields, and heading structure problems—and how to resolve them with real code examples.

Top comments (0)