Web Accessibility (a11y) Basics: Make Your Website Accessible to Everyone

1. What Is Web Accessibility?

Web Accessibility (abbreviated as a11y — there are 11 letters between the "a" and "y" in "accessibility") is the practice of designing and building websites so that everyone can use them, regardless of any physical or cognitive disabilities.

Accessibility targets a wide range of users, including:

• Visually impaired users — who use Screen Readers to hear web content
• Deaf or hard-of-hearing users — who need captions or transcripts for video/audio
• Motor-impaired users — who navigate with a keyboard or switch devices instead of a mouse
• Cognitive or learning disabilities — who need clear, simple content and consistent layouts
• Color-blind users — who need sufficient color contrast and non-color cues

2. Why Accessibility Matters

Accessibility isn't just "the right thing to do" — it has concrete business and technical benefits:

3. WCAG 2.2 — The International Standard

WCAG (Web Content Accessibility Guidelines) is the internationally recognized standard for web accessibility, published by the W3C. The current version is 2.2, released in October 2023.

Three Conformance Levels

4. The 4 POUR Principles

WCAG is organized around four core principles, known as POUR:

P — Perceivable

All content must be presentable to users in ways they can perceive. Examples:

• Images must have alt text describing their meaning
• Videos must have captions or transcripts
• Content must not rely solely on color to convey information

O — Operable

All functionality must be operable via any input method. Examples:

• All interactive elements must be keyboard-accessible
• No content should flash more than 3 times per second (seizure risk)
• Provide a "Skip to main content" link for keyboard users

U — Understandable

Content and functionality must be understandable. Examples:

• Declare the page language with the lang attribute on <html>
• Form errors must be clearly described and suggestions provided
• Navigation must be consistent across pages

R — Robust

Content must work reliably with current and future assistive technologies. Examples:

• HTML must be valid — all tags opened and closed correctly
• Use ARIA attributes correctly and only when needed
• Avoid deprecated HTML elements that screen readers don't support

5. Most Common Accessibility Issues

The WebAIM Million 2024 report analyzed 1 million websites and found these top 6 failures:

6. Accessibility for Visual Impairments

Visually impaired users rely on Screen Readers — software that reads web content aloud. Popular options include NVDA, JAWS (Windows), VoiceOver (macOS/iOS), and TalkBack (Android).

Writing Effective Alt Text

• Meaningful images: Describe what the image communicates, not just what it depicts
• Decorative images: Use alt="" so screen readers skip them
• Images with text: Include that text in the alt attribute

<!-- ✅ Correct -->
<img src="graph.jpg" alt="Sales graph Jan–Jun 2026 showing 35% growth">

<!-- ❌ Wrong -->
<img src="graph.jpg" alt="graph">
<img src="banner.jpg"> <!-- missing alt entirely -->

Color Contrast Requirements

• Level AA: Normal text ≥ 4.5:1 · Large text (≥18pt or ≥14pt bold) ≥ 3:1
• Level AAA: Normal text ≥ 7:1 · Large text ≥ 4.5:1

7. Keyboard Navigation & Focus Management

Motor-impaired users often navigate entirely by keyboard. Every interactive element on your site must be reachable and operable via keyboard alone.

Essential Keyboard Shortcuts

• Tab — Move focus forward
• Shift + Tab — Move focus backward
• Enter / Space — Activate buttons/links
• Arrow Keys — Navigate menus, dropdowns, sliders
• Esc — Close modals and dropdowns

Visible Focus Indicators

WCAG 2.2 requires that focused elements have a clearly visible indicator. Never remove focus styles without a replacement:

/* ❌ Don't do this */
*:focus { outline: none; }

/* ✅ Do this instead */
*:focus-visible {
  outline: 3px solid #059669;
  outline-offset: 2px;
}

Skip Navigation Link

A link that lets keyboard users jump past navigation to the main content — saving them from tabbing through the full menu on every page:

<a href="#main-content" class="skip-link">Skip to main content</a>

<style>
.skip-link { position: absolute; top: -100%; left: 8px; }
.skip-link:focus { top: 8px; }
</style>

8. Semantic HTML & ARIA Attributes

Semantic HTML means using HTML elements that carry inherent meaning — rather than using <div> and <span> for everything. Screen readers understand and announce semantic elements correctly.

ARIA Attributes

ARIA (Accessible Rich Internet Applications) provides extra attributes to communicate role, state, and properties to assistive technologies. Use only when Semantic HTML isn't enough:

<!-- Describe what an icon button does -->
<button aria-label="Close dialog">✕</button>

<!-- Indicate expanded/collapsed state -->
<button aria-expanded="false" aria-controls="dropdown">Menu</button>

<!-- Live region for dynamic alerts -->
<div role="alert" aria-live="assertive">Error: Please try again.</div>

9. Free Accessibility Testing Tools

10. Summary & Getting Started

11. FAQ — Web Accessibility