---
title: "Web Accessibility: Building a Web for Everyone"
author: "Anna Moua"
description: "What web accessibility is, why it matters, and how it benefits everyone — not just people with disabilities."
published: "2025-02-24"
---

# Web Accessibility: Building a Web for Everyone

The internet is one of the most essential tools in modern life — but for over **1.3 billion people** living with a disability, much of it remains out of reach. Web accessibility is the practice of designing websites so that everyone, regardless of ability, can use them.

---

## What Is WCAG?

The **Web Content Accessibility Guidelines (WCAG)** are the global standard for accessibility. They're built around four principles — content must be **Perceivable, Operable, Understandable, and Robust** (POUR). Most countries and accessibility laws reference **WCAG Level AA** as the minimum requirement.

---

## Who It Affects — And How

Inaccessibility has real consequences for real people every day:

- A **blind user** tries to apply for a job online, but the form fields have no labels. Her screen reader just says "edit text" for every field. She cannot complete the application.
- A **deaf college student** can't access his professor's lecture videos because there are no captions or transcripts. His hearing classmates move ahead while he falls behind.
- A **stroke survivor** with limited hand mobility tries to shop online, but every dropdown menu only works with a mouse. He gives up and calls the store instead.

These aren't rare situations. They happen every day on websites that weren't built with accessibility in mind.

---

## Code Examples

### 1. Always Label Your Form Fields

Without a label, screen readers have no idea what an input field is for.

```html
<!-- Bad — screen reader says "edit text", user has no context -->
<input type="text" name="firstName">

<!-- Good — screen reader says "First Name, edit text" -->
<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName">
```

### 2. Use Alt Text on Images

Alt text describes an image for users who can't see it.

```html
<!-- Bad — screen reader just says "image" -->
<img src="chart.png">

<!-- Good — screen reader describes what the image shows -->
<img src="chart.png" alt="Bar chart showing a 40% increase in sales from Q1 to Q4">

<!-- For decorative images — screen reader skips it entirely -->
<img src="divider.png" alt="">
```

### 3. Use Semantic HTML

Using the right HTML elements tells assistive technology what it's looking at.

```html
<!-- Bad — a div pretending to be a button, keyboard users can't reach it -->
<div onclick="submitForm()">Submit</div>

<!-- Good — a real button, keyboard accessible and screen reader friendly -->
<button type="submit">Submit</button>
```

```html
<!-- Bad — no structure, screen readers can't navigate -->
<div class="nav">
  <div class="link"><a href="/">Home</a></div>
</div>

<!-- Good — semantic landmark elements screen readers understand -->
<nav>
  <a href="/">Home</a>
</nav>
```

### 4. Never Use Color Alone to Communicate

Color blind users will miss anything communicated only through color.

```html
<!-- Bad — only red color tells the user something is wrong -->
<input type="text" style="border: 2px solid red;">

<!-- Good — color AND a message tells everyone something is wrong -->
<input type="text" style="border: 2px solid red;" aria-describedby="errorMsg">
<span id="errorMsg">Please enter a valid email address.</span>
```

### 5. Add ARIA Labels to Icon-Only Buttons

If a button has no visible text, screen readers won't know what it does.

```html
<!-- Bad — screen reader just says "button" -->
<button>
  <img src="search-icon.png">
</button>

<!-- Good — screen reader says "Search button" -->
<button aria-label="Search">
  <img src="search-icon.png" alt="">
</button>
```

---

## It Benefits Everyone

Accessibility improvements don't only help people with disabilities — they make the web better for everyone. Captions help people watching videos in noisy environments. Keyboard navigation helps power users. Clear, simple layouts help non-native speakers and people reading on small screens. Well-structured pages load faster and rank better in search engines.

This is known as the **Curb Cut Effect** — features designed for people who need them most end up benefiting everyone.

---

## It's Also the Law

In the US, the **ADA** and **Section 508** require accessible digital content. The **European Accessibility Act** took full effect in 2025. Thousands of accessibility-related lawsuits are filed every year. Building accessibly from the start is far cheaper than fixing it after a legal complaint.

---

## Where to Start

You don't have to overhaul your entire site at once. Start here:

1. Label every form field, button, and image clearly.
2. Make sure your site can be navigated using only a keyboard.
3. Add captions to any video content.
4. Check that your text has enough color contrast to be readable.
5. Run a free audit using Google Lighthouse or the axe browser extension.

Accessibility isn't a feature — it's a foundation. When you build for the people who need it most, you build something better for everyone.