Who is Eric Su?

Home
Back to Blog

Building Accessible Web Applications

3 min read
Eric Su
accessibilitya11yweb-developmentbest-practices

Building Accessible Web Applications

Web accessibility ensures that websites and applications can be used by everyone, including people with disabilities. Let's explore key principles and practical techniques.

Why Accessibility Matters

  • Inclusivity: 15% of the world's population has some form of disability
  • Legal Requirements: Many countries have accessibility laws (ADA, WCAG)
  • Better UX for Everyone: Accessible design benefits all users
  • SEO Benefits: Many accessibility practices improve search rankings

WCAG Principles: POUR

The Web Content Accessibility Guidelines are built on four principles:

1. Perceivable

Information must be presentable to users in ways they can perceive:

// Good: Image with alt text
<img src="chart.png" alt="Sales increased by 25% in Q4" />

// Bad: Image without alt text
<img src="chart.png" />

2. Operable

User interface components must be operable:

// Good: Keyboard accessible custom button
<button 
  onClick={handleClick}
  onKeyDown={(e) => e.key === 'Enter' && handleClick()}
>
  Submit
</button>

// Bad: Div acting as button without keyboard support
<div onClick={handleClick}>Submit</div>

3. Understandable

Information and operation must be understandable:

// Good: Clear form labels and error messages
<label htmlFor="email">Email Address</label>
<input 
  id="email" 
  type="email" 
  aria-describedby="email-error"
  aria-invalid={hasError}
/>
{hasError && (
  <span id="email-error" role="alert">
    Please enter a valid email address
  </span>
)}

4. Robust

Content must be robust enough for various technologies:

// Good: Semantic HTML
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Practical Techniques

Use Semantic HTML

<!-- Good -->
<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Article Title</h1>
    <p>Content...</p>
  </article>
</main>
<footer>
  <p>&copy; 2024</p>
</footer>

<!-- Bad -->
<div class="header">
  <div class="nav">
    <div class="link">Home</div>
  </div>
</div>

Manage Focus

// Focus management for modals
useEffect(() => {
  if (isOpen) {
    // Save current focus
    const previousFocus = document.activeElement;
    
    // Focus modal
    modalRef.current?.focus();
    
    // Return focus on close
    return () => {
      previousFocus?.focus();
    };
  }
}, [isOpen]);

ARIA When Needed

Use ARIA attributes to enhance semantics when HTML alone isn't enough:

// Loading state
<button aria-busy={isLoading} disabled={isLoading}>
  {isLoading ? 'Saving...' : 'Save'}
</button>

// Dynamic content
<div 
  role="status" 
  aria-live="polite" 
  aria-atomic="true"
>
  {statusMessage}
</div>

Color Contrast

Ensure sufficient color contrast (WCAG AA requires 4.5:1 for normal text):

/* Good: High contrast */
.text {
  color: #000000; /* Black */
  background: #FFFFFF; /* White */
  /* Contrast ratio: 21:1 */
}

/* Bad: Low contrast */
.text {
  color: #999999; /* Light gray */
  background: #CCCCCC; /* Lighter gray */
  /* Contrast ratio: 2.4:1 - Fails WCAG */
}

Keyboard Navigation

Test your entire application using only the keyboard:

  • Tab: Move forward through interactive elements
  • Shift + Tab: Move backward
  • Enter/Space: Activate buttons and links
  • Arrow keys: Navigate within components (menus, tabs)
  • Escape: Close dialogs and dropdowns

Testing Tools

  • Browser DevTools: Chrome, Firefox have accessibility inspectors
  • axe DevTools: Browser extension for automated testing
  • Screen Readers: Test with NVDA (Windows), JAWS (Windows), VoiceOver (Mac)
  • Lighthouse: Automated accessibility auditing

Conclusion

Accessibility is not a feature—it's a fundamental aspect of web development. By following these practices, you create better experiences for everyone.

Resources