Web Accessibility (ADA) & The Business Case for Inclusion

In the US, lawsuits regarding non-compliant websites (ADA Title III) have risen 300% in the last 5 years. Major brands like Domino's Pizza have faced Supreme Court cases because their websites were unusable for blind users using screen readers.

But fear is not the only motivator. The "Purple Pound" refers to the spending power of disabled households, estimated at $8 Trillion globally. If your site is not accessible, you are effectively locking the door to 15% of the population.

However, for developers, accessibility (a11y) is often misunderstood as simply "adding alt text." Real accessibility requires robust engineering, particularly in modern JavaScript frameworks.

1. Semantic HTML: The 80% Solution

The most common accessibility errors stem from "div-itis"—using <div> for everything. Browsers provide free accessibility features if you use the correct elements.

The Landmark System

Screen reader users often navigate by "skipping" from section to section. If your site is just nested divs, they cannot do this. You must use Landmark regions:

<!-- BAD: Generic Layout -->
<div class="header">...</div>
<div class="sidebar">...</div>
<div class="content">...</div>

<!-- GOOD: Semantic Landmarks -->
<header>...</header>       <!-- Banner role -->
<nav>...</nav>             <!-- Navigation role -->
<main>...</main>           <!-- Main content role -->
<aside>...</aside>         <!-- Complementary role -->
<footer>...</footer>       <!-- Contentinfo role -->

The Button vs. Link Dilemma

This is a strict rule in accessible coding:

Links (<a>) go somewhere (change the URL).
Buttons (<button>) do something (submit a form, open a modal).

Never use a <div> or <span> as a button. If you must, you are required to manually reimplement tabindex, role="button", and JavaScript event listeners for both Enter and Space keys. It is easier to just use <button>.

2. Advanced Focus Management in SPAs

In Single Page Applications (React, Vue, Angular), when a user changes routes, the browser doesn't refresh. Often, the focus remains on the last clicked link (which might have disappeared), causing the screen reader to go silent or reset to the top of the <body>.

The "Skip Link" Pattern

Every accessible site should have a "Skip to Content" link hidden visually but available to keyboard users as the first tab-stop.

Managing Focus in Modals (The Focus Trap)

When a modal opens, focus must be moved inside it and trapped there. The user should not be able to tab "behind" the modal.

// Example: Simple Logic for a Focus Trap
const modal = document.getElementById('my-modal');
const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];

document.addEventListener('keydown', function(e) {
  const isTabPressed = e.key === 'Tab' || e.keyCode === 9;

  if (!isTabPressed) return;

  if (e.shiftKey) { // Shift + Tab (Backward)
    if (document.activeElement === firstElement) {
      lastElement.focus();
      e.preventDefault();
    }
  } else { // Tab (Forward)
    if (document.activeElement === lastElement) {
      firstElement.focus();
      e.preventDefault();
    }
  }
});

3. Dynamic Content & ARIA Live Regions

How does a blind user know if a form submission failed or if a toast notification appeared? They can't "see" the red error message appear.

We use ARIA Live Regions. These are attributes that tell screen readers: "Watch this element and announce changes instantly."

<!-- Polite: Waits for the user to stop typing/interacting before speaking -->
<div aria-live="polite" class="toast-notification">
  Item added to cart!
</div>

<!-- Assertive: Interrupts the user immediately (Use sparingly!) -->
<div aria-live="assertive" class="form-error">
  Error: Password must contain a number.
</div>

The First Rule of ARIA: Don't use ARIA.

If you can use a native HTML element (like <button> or <label>), do so. ARIA is a bridge for when HTML falls short, not a replacement for bad HTML.

4. Visual Compliance: Contrast & Motion

Color Contrast

WCAG 2.1 AA requires a contrast ratio of 4.5:1 for normal text.

Design Tip: Don't rely on color alone to convey meaning. If an error field turns red, also add an icon or text saying "Error". Colorblind users (1 in 12 men) cannot distinguish red from green.

Respecting User Motion Preferences

Parallax effects and heavy animations can cause vestibular disorders (motion sickness) in some users. We use CSS to respect their system settings.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Conclusion: Better Code for Everyone

Accessibility improves SEO. Google's crawler is essentially a "blind user" that relies on structure, alt text, and semantic hierarchy to rank your content.

But more importantly, accessible code is robust code. By handling focus states, semantic HTML, and keyboard navigation, you aren't just helping users with disabilities; you are building a better experience for power users, keyboard enthusiasts, and anyone browsing on a slow connection or a mobile device in bright sunlight.

Inclusive design is not a feature. It is the baseline.

Web Accessibility (ADA) & The 'Purple Pound': The Engineering Guide to Inclusive Code