Accessibility Guide

| Alex Nucci

Overview

This guide covers accessibility features and testing procedures implemented across the site. Our goal is to meet WCAG 2.1 Level AA standards.

Core Features

Keyboard Navigation

All interactive elements are keyboard accessible:

  • Tab navigation follows a logical order
  • Focus indicators are visible and consistent
  • Skip links for main content
  • No keyboard traps

ARIA Implementation

Proper ARIA attributes and roles:

  • Landmarks for major sections
  • Labels for interactive elements
  • Descriptions for complex widgets
  • Live regions for dynamic content

Semantic HTML

Using semantic HTML elements:

<header>
<nav>
<main>
<article>
<aside>
<footer>

Color and Contrast

  • Minimum contrast ratio of 4.5:1 for normal text
  • Minimum contrast ratio of 3:1 for large text
  • Color not used as sole indicator
  • High contrast mode support

Testing Procedures

Manual Testing

  1. Keyboard Navigation

    • Tab through all interactive elements
    • Verify focus indicators
    • Test skip links
    • Check for keyboard traps

  2. Screen Reader Testing

    • Test with VoiceOver on macOS
    • Verify ARIA attributes
    • Check heading structure
    • Test dynamic content updates

  3. Visual Testing

    • Verify contrast ratios
    • Test color blindness modes
    • Check text resizing
    • Validate responsive layout

Automated Testing

Tools used:

  • axe-core for automated checks
  • pa11y for CI integration
  • WAVE for visual reporting
  • Lighthouse for performance impact

Component Guidelines

Buttons

<button
  aria-label="Close dialog"
  onClick={closeDialog}
  className="focus:ring-2"
>
  <Icon name="close" aria-hidden="true" />
</button>

Form Inputs

<div role="group" aria-labelledby="group-label">
  <label id="group-label">Email Preferences</label>
  <input
    type="email"
    aria-describedby="email-hint"
    required
  />
  <p id="email-hint">We'll never share your email.</p>
</div>

Best Practices

  1. Start with semantic HTML
  2. Add ARIA only when needed
  3. Test with keyboard only
  4. Verify screen reader output
  5. Maintain focus management
  6. Document accessibility features

Resources

accessibility
a11y
documentation