Web Accessibility: A Developer's Practical Guide to WCAG Compliance

Web accessibility ensures that websites work for everyone, including people with disabilities. Beyond being the right thing to do, accessibility is increasingly a legal requirement and directly impacts SEO — search engines favor accessible, semantic HTML.

Why Accessibility Matters

• Legal compliance: ADA, Section 508, EU Accessibility Act, and similar laws require accessible websites
• Market reach: ~15% of the global population has some form of disability
• SEO benefits: Accessible HTML is semantic HTML, which search engines understand better
• Better UX for everyone: Captions help in noisy environments, keyboard navigation helps power users
• Performance: Semantic HTML is typically lighter and faster than div-soup alternatives

WCAG Principles: POUR

The Web Content Accessibility Guidelines (WCAG) are built on four principles:

Perceivable

Users must be able to perceive the content:

• Images have alt text describing their content or function
• Videos have captions and transcripts
• Color is not the only way to convey information
• Text has sufficient contrast ratio (4.5:1 for normal text, 3:1 for large text)

Operable

Users must be able to operate the interface:

• All functionality is available via keyboard
• Users have enough time to read and interact
• Content doesn't cause seizures (no flashing >3 times/second)
• Users can navigate and find content easily

Understandable

Content and UI must be understandable:

• Text is readable and predictable
• Pages behave in predictable ways
• Users can avoid and correct mistakes

Robust

Content must work with current and future technologies:

• Valid HTML that assistive technologies can interpret
• ARIA attributes used correctly

Practical Implementation

Semantic HTML

<!-- Bad -->
<div class="header">
  <div class="nav">
    <div class="nav-item" onclick="...">Home</div>
  </div>
</div>

<!-- Good -->
<header>
  <nav aria-label="Main navigation">
    <a href="/">Home</a>
  </nav>
</header>

Image Alt Text

<!-- Decorative image -->
<img src="border.png" alt="" role="presentation">

<!-- Informative image -->
<img src="chart.png" alt="Sales grew 45% in Q3 2025">

<!-- Functional image -->
<button><img src="search.svg" alt="Search"></button>

Keyboard Navigation

• All interactive elements focusable with Tab
• Focus order matches visual order
• Visible focus indicator (never outline: none without a replacement)
• Escape closes modals/dialogs
• Custom components need tabindex, role, and keyboard event handlers

Forms

<!-- Always associate labels -->
<label for="email">Email address</label>
<input type="email" id="email" name="email"
       required aria-describedby="email-help">
<span id="email-help">We will never share your email</span>

<!-- Error messages -->
<input type="email" aria-invalid="true" aria-errormessage="email-error">
<span id="email-error" role="alert">Please enter a valid email</span>

Color Contrast

• Normal text (<18px): minimum 4.5:1 contrast ratio
• Large text (≥18px bold or ≥24px): minimum 3:1
• UI components and graphics: minimum 3:1
• Don't rely on color alone — add icons, patterns, or text labels

ARIA: When Semantic HTML Isn't Enough

ARIA (Accessible Rich Internet Applications) adds semantics when native HTML can't express the UI pattern:

• role — what is this element? (tab, dialog, alert)
• aria-label — accessible name when visible text isn't sufficient
• aria-expanded — is this dropdown/accordion open?
• aria-live — announce dynamic content updates to screen readers

First rule of ARIA: If you can use a native HTML element, do that instead.

Testing Tools

• Lighthouse: Built into Chrome DevTools, automated accessibility audit
• axe DevTools: Browser extension for detailed accessibility testing
• WAVE: Web accessibility evaluation tool
• Screen readers: Test with VoiceOver (Mac), NVDA (Windows), or JAWS
• Keyboard testing: Unplug your mouse and navigate the site

Conclusion

Accessibility isn't an afterthought — it's a fundamental quality of good web development. Start with semantic HTML, add proper labels and alt text, ensure keyboard navigation works, and test with real assistive technologies. Even small improvements make a significant difference for users who depend on them.