Building Accessible Web Applications

Accessibility Is Not Optional

Web accessibility means making your application usable by people with diverse abilities — including those who are blind or low-vision, deaf or hard of hearing, have motor disabilities, or have cognitive differences. This isn't a niche concern: approximately 15% of the world's population lives with some form of disability. Accessibility is also a legal requirement in many jurisdictions.

Beyond compliance, accessible applications are simply better applications. The practices that make sites accessible — clear structure, keyboard navigation, good contrast, descriptive labels — improve the experience for all users, not just those with disabilities.

Semantic HTML: The Foundation

The single most impactful thing you can do for accessibility is use semantic HTML correctly. Screen readers and assistive technologies rely on HTML semantics to understand page structure and content:

<!-- BAD: Div soup — no meaning for assistive tech -->
<div class="header">
  <div class="nav">
    <div class="nav-item" onclick="navigate()">Home</div>
  </div>
</div>

<!-- GOOD: Semantic elements convey meaning -->
<header>
  <nav aria-label="Main navigation">
    <a href="/">Home</a>
  </nav>
</header>

Use <button> for actions, <a> for navigation, <h1>-<h6> for headings in order, <main> for primary content, <aside> for supplementary content, and <form> with proper <label> elements for forms. These elements have built-in accessibility behaviors that divs and spans don't.

Keyboard Navigation

Many users navigate entirely with the keyboard — both people with motor disabilities and power users who prefer keyboard shortcuts. Every interactive element must be reachable and operable via keyboard:

• Tab order — Interactive elements should be focusable in a logical order. Use native HTML elements (buttons, links, inputs) which are automatically focusable.
• Focus indicators — Never remove focus outlines (outline: none) without providing an alternative. Users need to see where they are on the page.
• Keyboard shortcuts — Provide keyboard alternatives for mouse-only interactions like drag-and-drop, hover menus, and right-click actions.
• Focus management — When opening modals or navigating between views, move focus to the appropriate element so keyboard users aren't lost.

ARIA: When HTML Isn't Enough

ARIA (Accessible Rich Internet Applications) attributes bridge the gap between custom UI components and assistive technology. Use ARIA when you're building components that don't have native HTML equivalents:

<!-- Custom dropdown menu -->
<button aria-haspopup="true" aria-expanded="false" aria-controls="menu">
  Options
</button>
<ul id="menu" role="menu" aria-hidden="true">
  <li role="menuitem">Edit</li>
  <li role="menuitem">Delete</li>
</ul>

The first rule of ARIA is: don't use ARIA if a native HTML element can do the job. A <button> is always better than a <div role="button">. ARIA adds meaning but doesn't add behavior — you'd still need to handle keyboard events, focus management, and state manually.

Color and Visual Design

Ensure sufficient color contrast: at least 4.5:1 for normal text and 3:1 for large text (WCAG AA). Use tools like the WebAIM Contrast Checker to verify your color combinations. Never use color as the only way to convey information — pair red error states with icons and text, for example.

Support user preferences: respect the prefers-reduced-motion media query by toning down or disabling animations, and support prefers-color-scheme for dark mode. These aren't just nice-to-haves — they're essential for users with vestibular disorders and light sensitivity.

Testing Accessibility

Test accessibility at every stage. Use automated tools like axe DevTools and Lighthouse to catch common issues. Test with keyboard-only navigation regularly. Try your application with a screen reader — VoiceOver on Mac, NVDA on Windows — to experience how it sounds to users who can't see the screen. Automated tools catch about 30% of accessibility issues; manual testing with real assistive technology catches the rest.