Building Accessible Web Applications: Beyond ARIA Labels

Accessibility isn't a checkbox—it's a mindset. While most developers know about alt text and ARIA, true accessibility runs deeper. Here's how to build apps that work for everyone.

The Accessibility Tree

Assistive technologies don't see your DOM—they see the accessibility tree. This tree is built from semantic HTML, ARIA attributes, and computed styles. Understanding this is fundamental.

Keyboard Navigation Done Right

Every interactive element must be keyboard accessible. Use native elements when possible—buttons, links, form controls. Custom elements need tabindex="0" and keyboard event handlers.

// Custom button with proper keyboard support
function CustomButton({ onClick, children }) {
  const handleKeyDown = (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      onClick();
    }
  };
  
  return (
    <div
      role="button"
      tabIndex={0}
      onClick={onClick}
      onKeyDown={handleKeyDown}
    >
      {children}
    </div>
  );
}

Focus Management in SPAs

When content changes dynamically, manage focus explicitly. After navigation, focus the main content. When modals open, trap focus inside. When modals close, return focus to the trigger.

// After route change
useEffect(() => {
  const main = document.getElementById('main-content');
  main?.focus();
}, [pathname]);

Color Contrast and Visual Accessibility

WCAG requires 4.5:1 contrast for normal text, 3:1 for large text. Don't convey information by color alone—use icons, patterns, or text. Support reduced motion preferences.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Testing: Automated and Manual

Automated tools (axe, Lighthouse) catch obvious issues but miss context. Manual testing with keyboard-only navigation and screen readers (VoiceOver, NVDA) is essential. Include users with disabilities in user testing.

Building inclusive applications isn't just the right thing to do—it often improves UX for everyone. Clear focus states, logical tab order, and proper headings help all users navigate efficiently.