What Is Web Accessibility — Complete Guide

In this tutorial, you will learn about What Is Web Accessibility. We cover key concepts, practical examples, and best practices to help you master this topic.

Web accessibility (a11y) means designing and developing websites that people with disabilities can perceive, understand, navigate, and interact with effectively using assistive technologies.

What You'll Learn

• What web accessibility means and why it matters
• The four WCAG principles: Perceivable, Operable, Understandable, Robust
• How accessibility benefits all users, not just those with disabilities
• Real-world examples of inaccessible vs accessible designs

Why It Matters

• Over 1 billion people worldwide have some form of disability
• Legal requirements exist in many countries (ADA, Section 508, EN 301 549)
• Accessible websites rank better in search engines and reach wider audiences
• Inaccessible sites can lead to lawsuits and lost revenue

Real-World Use

• E-commerce sites that work with screen readers
• Government portals that meet WCAG AA standards
• Banking applications usable by people with motor impairments
• News sites with captioned video content

flowchart LR
  A[What Is Accessibility] --> B[Laws & Standards]
  B --> C[Screen Readers]
  C --> D[Keyboard & Focus]
  D --> E[ARIA & Semantic HTML]
  E --> F[Testing & Audit]

Understanding Web Accessibility

Web accessibility is the practice of removing barriers that prevent people with disabilities from using the web. Think of it like a physical building: a ramp helps wheelchair users, but it also helps parents with strollers, delivery workers, and anyone carrying heavy items. Similarly, captions on videos help deaf users but also help people in noisy environments or those learning a new language.

Disabilities that affect web use include:

• Visual: blindness, low vision, color blindness
• Hearing: deafness, hard of hearing
• Motor: limited fine motor control, paralysis, tremors
• Cognitive: dyslexia, ADHD, autism, memory impairments
• Speech: speech disabilities

The POUR Principles

The Web Content Accessibility Guidelines (WCAG) are organized around four principles. Every accessible website must be:

Perceivable: Users must be able to perceive the content with at least one of their senses. This means providing text alternatives for images, captions for audio, and ensuring content can be presented in different ways without losing information.

Operable: Users must be able to operate the interface. All functionality must be available from a keyboard, users must have enough time to read and use content, and the content must not cause seizures or physical reactions.

Understandable: Users must be able to understand the content and how to use the interface. Text must be readable, web pages must appear and operate in predictable ways, and users must be helped to avoid and correct mistakes.

Robust: Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies. This means using valid HTML, ARIA correctly, and ensuring compatibility with current and future tools.

Code Example: Accessible vs Inaccessible Button

<!-- Inaccessible: div pretending to be a button -->
<div class="fancy-button" onclick="submitForm()">Submit</div>

<!-- Accessible: proper button element -->
<button type="submit" onclick="submitForm()">Submit</button>

<!-- Accessible: div with ARIA role (when custom styling requires it) -->
<div role="button" tabindex="0" onclick="submitForm()" onkeydown="if(event.key==='Enter'||event.key===' ')submitForm()">Submit</div>

Expected output: The first div is not focusable by keyboard, not announced as a button by screen readers, and cannot be activated with the Enter or Space keys. The proper button works everywhere natively.

Code Example: Alt Text on Images

<!-- Inaccessible: decorative image without alt -->
<img src="chart.png">

<!-- Inaccessible: useless alt text -->
<img src="chart.png" alt="chart">

<!-- Accessible: descriptive alt text -->
<img src="chart.png" alt="Bar chart showing quarterly revenue growth from $1.2M to $2.8M in 2025">

<!-- Decorative image: empty alt is correct -->
<img src="decoration.png" alt="" role="presentation">

Expected output: Screen readers announce the descriptive alt text, giving blind users the same information sighted users get from the chart.

Code Example: Color Contrast

/* Inaccessible: low contrast text */
.light-text {
    color: #cccccc;
    background: #ffffff;
}

/* Accessible: sufficient contrast (ratio 4.5:1 or higher) */
.good-text {
    color: #595959;
    background: #ffffff;
}

/* WCAG AAA: enhanced contrast */
.aaa-text {
    color: #333333;
    background: #ffffff;
}

Expected output: Low contrast text at a ratio below 3:1 is unreadable for many users with vision impairments. WCAG AA requires 4.5:1 for normal text and 3:1 for large text.

Common Mistakes

1. Relying only on color to convey information — Users with color blindness cannot distinguish red/green status indicators. Always add text labels or icons alongside color.
2. Missing form labels — A form input without an associated <label> element is inaccessible. Screen readers cannot announce the purpose of the field.
3. Keyboard trap — A modal or dropdown that traps keyboard focus without an escape mechanism. Users cannot reach other parts of the page.
4. Auto-playing video or audio — Content that starts automatically can disorient screen reader users and causes cognitive overload.
5. Non descriptive link text — Links like "click here" or "read more" provide no context when read out of context by screen readers.
6. Missing document language — Without lang="en" on the <html> element, screen readers use the wrong pronunciation rules.
7. Poor heading hierarchy — Skipping from <h1> to <h4> or using headings only for visual styling breaks navigation for screen reader users.

Practice Questions

1. What does the "P" in POUR stand for and what does it mean? Perceivable — users must be able to perceive content with at least one of their senses.
2. How many people worldwide have some form of disability according to the WHO? Over 1 billion, approximately 15 percent of the global population.
3. What is the minimum color contrast ratio required by WCAG AA for normal text? 4.5:1.
4. Why should you never use a <div> as a button? Divs are not focusable by keyboard, not announced correctly by screen readers, and do not respond to Enter/Space keys by default.
5. Challenge: Find three accessibility issues on a website you use daily and document what POUR principle each one violates.

FAQ

Mini Project

Audit a simple landing page for accessibility issues. Create an HTML page with a navigation bar, a hero section with an image, a form with name and email fields, and a footer. Identify at least 5 accessibility violations. Then fix each violation one by one. Document your findings in a report that lists each issue, which POUR principle it violates, the WCAG criterion, and how you fixed it.

What's Next

Continue with Lesson 2: Accessibility Laws and Standards to understand the legal framework behind web accessibility requirements.