Usability and Accessibility (A11y)

Design systems that work for all users, including those with disabilities.

TL;DR

Accessibility (A11y) means designing for users with disabilities: visual (blindness, color blindness), hearing (deafness), motor (limited mobility), cognitive (dyslexia, ADHD). WCAG 2.1 is the international standard. Key principles: Perceivable (information visible/audible), Operable (keyboard navigation, no flashing), Understandable (clear language, predictable), Robust (works with assistive technology). A11y isn't optional—it's the law (ADA, Section 508) and the right thing. Test with screen readers (NVDA, JAWS), keyboard-only navigation, and diverse users.

Learning Objectives

Understand WCAG 2.1 standards and conformance levels (A, AA, AAA)
Design with assistive technology in mind (screen readers, voice control)
Implement semantic HTML and ARIA labels
Test accessibility with users and tools
Ensure keyboard navigation and color contrast
Internationalize for global inclusive reach

Motivating Scenario

A blind user cannot use your e-commerce site because images lack alt text, buttons lack labels, and form errors aren't announced. A deaf user cannot watch your tutorial videos without captions. A user with motor disabilities cannot use your hover-dependent menu. Proper A11y from the start serves 15% of the population (and benefits everyone: captions help in noisy environments, high contrast helps in bright light).

Core Concepts

WCAG 2.1 Principles

Perceivable: Information must be perceivable by users.
- Images must have alt text
- Video must have captions
- Color isn't the only way to convey information
- Text must be resizable
Operable: Users must be able to navigate and interact.
- Keyboard navigation (no mouse required)
- No content flashes more than 3 times/sec (seizure risk)
- Clear focus indicators
- Skip links for navigation
Understandable: Information and interface must be understandable.
- Clear language (8th-grade reading level)
- Consistent navigation
- Error messages that help you fix them
- Predictable interactions
Robust: Content must work with assistive technology.
- Valid HTML
- ARIA labels for dynamic content
- Semantic markup (use <button>, not <div onclick>)
- Works with screen readers

Practical Example

<!-- ❌ POOR: Not accessible -->
<div onclick="goToPage(1)" style="cursor: pointer">
  <img src="next.png">
</div>

<!-- ✅ EXCELLENT: Accessible -->
<button aria-label="Go to next page">
  <img src="next.png" alt="Next">
</button>

<!-- Form Example -->
<!-- ❌ POOR -->
<input type="email" placeholder="Enter email">

<!-- ✅ EXCELLENT -->
<label for="email">Email address</label>
<input type="email" id="email" aria-required="true">
<span id="email-error" role="alert"></span>

<!-- Color contrast -->
<!-- ❌ POOR: Light gray on white (1.2:1 contrast, fails WCAG) -->
<span style="color: #ccc">Important info</span>

<!-- ✅ EXCELLENT: Dark gray on white (4.5:1 contrast, passes WCAG AA) -->
<span style="color: #333">Important info</span>

Self-Check

Why is color contrast important beyond aesthetics?
How do you make interactive elements keyboard accessible?
What's the purpose of alt text?
How do ARIA labels help screen readers?
Can you use assistive technology to test your site?

Design Review Checklist

Understanding Your Users

Types of Disabilities

Visual Disabilities:

Blindness (total vision loss)
Low vision (severe visual impairment)
Color blindness (can't distinguish certain colors)
Tunnel vision (peripheral vision loss)

Hearing Disabilities:

Deafness (severe hearing loss)
Hard of hearing (partial hearing loss)
Tinnitus (ringing in ears, interferes with hearing)

Motor Disabilities:

Cerebral palsy (muscle control loss)
Spinal cord injury (limited mobility)
Arthritis (joint pain, limited dexterity)
Tremors (involuntary muscle movement)
Amputation (loss of limb)

Cognitive Disabilities:

Dyslexia (difficulty reading)
ADHD (attention difficulties)
Autism spectrum (different processing)
Intellectual disabilities (learning difficulties)

Situational Disabilities (temporary):

Broken arm (can't use mouse)
Bright sunlight (can't see screen)
Loud environment (can't hear audio)
Sleep deprivation (hard to focus)
Stressful situation (can't concentrate)

Legal Requirements

United States:

Americans with Disabilities Act (ADA) - covers websites
Section 508 (federal websites must be accessible)
WCAG 2.1 AA is the standard

Europe:

European Accessibility Act (requires WCAG 2.1 AA)
UK Equality Act 2010
France RGAA standards

Canada:

Accessible Canada Act
AODA (Ontario)

Australia:

Disability Discrimination Act
WCAG 2.1 AA expected

Consequences of Non-Compliance:

Lawsuits (thousands per year)
Settlements: $100K - $1M+
Reputational damage
Reduced user base (15% of population)

Alt Text for Images

Color Contrast

Form Labels

Keyboard Navigation

ARIA Labels

Error Messages

Testing Tools

Automated Tools
Manual Testing
User Testing

axe DevTools — Browser extension, identifies WCAG violations
Lighthouse — Chrome DevTools, audits accessibility
WAVE — WebAIM tool, visual accessibility feedback
Color Contrast Analyzer — Check exact ratios

Next Steps

Learn WCAG 2.1 — Understand the four principles and criteria
Audit current site — Use automated tools (axe, Lighthouse)
Fix high-impact issues — Alt text, color contrast, keyboard navigation
Test with assistive tech — Screen readers, keyboard-only
Test with users — Real feedback from people with disabilities
Make iterative — A11y is ongoing, not one-time

Advanced Accessibility Patterns

<!-- Skip to main content (appears on focus) -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<style>
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 100;
  }

  .skip-link:focus {
    top: 0;  /* Visible when focused */
  }
</style>

<!-- Main content with proper ID -->
<main id="main-content">
  <!-- Page content -->
</main>

Responsive Accessible Forms

<!-- Fieldset for grouping related fields -->
<fieldset>
  <legend>Billing Information</legend>

  <!-- Proper label association -->
  <div class="form-group">
    <label for="billing-street">Street Address</label>
    <input type="text" id="billing-street" name="street" required>
    <span id="street-error" class="error" role="alert"></span>
  </div>

  <div class="form-group">
    <label for="billing-zip">Zip Code</label>
    <input type="text" id="billing-zip" name="zip"
           pattern="[0-9]{5}(-[0-9]{4})?"
           aria-describedby="zip-format">
    <span id="zip-format" class="hint">Format: 12345 or 12345-6789</span>
  </div>
</fieldset>

<!-- Select with proper labels -->
<label for="country">Country</label>
<select id="country" name="country" aria-required="true">
  <option value="">Choose a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

ARIA Live Regions for Dynamic Content

<!-- Announce updates to screen readers -->
<div aria-live="polite" aria-atomic="true" id="notifications">
  <!-- Alerts will be announced when content changes -->
</div>

<script>
  function addNotification(message) {
    const notif = document.getElementById('notifications');
    const alert = document.createElement('div');
    alert.textContent = message;
    alert.role = 'alert';
    notif.appendChild(alert);

    // Remove after 5 seconds
    setTimeout(() => alert.remove(), 5000);
  }

  // Usage: "Order confirmed" announced to screen readers
  addNotification('Order confirmed');
</script>

// Tab trap: focus stays within modal
class AccessibleModal {
  constructor(element) {
    this.element = element;
    this.focusableElements = element.querySelectorAll(
      'button, a[href], input, select, textarea, [tabindex]'
    );
    this.firstElement = this.focusableElements[0];
    this.lastElement = this.focusableElements[this.focusableElements.length - 1];
  }

  open() {
    this.element.setAttribute('aria-hidden', 'false');
    this.firstElement.focus();
    document.addEventListener('keydown', this.handleKeydown.bind(this));
  }

  close() {
    this.element.setAttribute('aria-hidden', 'true');
    document.removeEventListener('keydown', this.handleKeydown.bind(this));
  }

  handleKeydown(e) {
    if (e.key === 'Escape') {
      this.close();
    }

    if (e.key === 'Tab') {
      // Trap focus within modal
      if (e.shiftKey && document.activeElement === this.firstElement) {
        e.preventDefault();
        this.lastElement.focus();
      } else if (!e.shiftKey && document.activeElement === this.lastElement) {
        e.preventDefault();
        this.firstElement.focus();
      }
    }
  }
}

Accessibility Audit Checklist

Automated Testing

axe DevTools scan (browser extension)
WAVE validation (wave.webaim.org)
Lighthouse audit (Chrome DevTools)
Pa11y (command line tool)

Manual Testing Checklist

Keyboard Navigation

Tab through entire page in logical order
All interactive elements reachable
Focus indicator visible throughout
No keyboard traps
Skip links work

Screen Reader Testing (NVDA, JAWS, VoiceOver)

All content announced
Form labels associated
Images have alt text
Links have descriptive text (not "click here")
Headings structure correct (h1→h2→h3, no skipping)
Lists properly marked up
Tables have headers

Visual Testing

Color contrast >= 4.5:1 for normal text
Color contrast >= 3:1 for large text
No color as only indicator (icon, pattern, text too)
Page readable at 200% zoom
No horizontal scroll at 1280px width

Motion and Animation

No flashing >3 times/second
Auto-playing animations can be paused
Respects prefers-reduced-motion

Real-World Case Study: E-commerce Accessibility

Product Page Before A11y:

<!-- ❌ NOT ACCESSIBLE -->
<div class="product">
  <img src="shoe.jpg">  <!-- No alt text -->
  <h2>Blue Shoe</h2>
  <span style="color: red">$50</span>  <!-- Color only -->
  <button onclick="addCart()">Add</button>  <!-- Ambiguous -->
  <div style="font-size: 12px; color: #999">  <!-- Poor contrast -->
    Available in sizes
    <div>S M L XL</div>  <!-- Not a real list -->
  </div>
</div>

Product Page After A11y:

<!-- ✅ ACCESSIBLE -->
<article class="product">
  <!-- Descriptive alt text -->
  <img src="shoe.jpg" alt="Blue Nike Air Max running shoe with white sole">

  <h1>Blue Nike Air Max</h1>

  <!-- Price with label -->
  <p>Price: <strong>$50</strong></p>

  <!-- Descriptive button label -->
  <button aria-label="Add Blue Nike Air Max to shopping cart">
    Add to Cart
  </button>

  <!-- Proper list with good contrast -->
  <fieldset>
    <legend>Available Sizes</legend>
    <ul role="list">
      <li><label><input type="radio" name="size" value="S"> Small</label></li>
      <li><label><input type="radio" name="size" value="M"> Medium</label></li>
      <li><label><input type="radio" name="size" value="L"> Large</label></li>
      <li><label><input type="radio" name="size" value="XL"> Extra Large</label></li>
    </ul>
  </fieldset>

  <!-- Video with captions -->
  <video controls aria-label="Product demo video">
    <source src="demo.mp4" type="video/mp4">
    <track kind="captions" src="captions.vtt" srclang="en">
  </video>
</article>

Accessibility ROI

Legal: Avoid lawsuits (ADA, Section 508, AODA, similar laws globally). Thousands of websites sued annually for inaccessibility.

Business: 15% of population has disabilities. Many more have situational disabilities (bright light, noisy environment). Captions help users in loud bars.

Technical: A11y best practices improve SEO, performance, mobile experience.

Cost: 10-15% extra effort upfront, but saves money fixing later (retrofitting costs 3-5x more).

Resources and Tools

Design System Components:

Material-UI (built-in a11y)
Bootstrap (accessibility guidelines)
ARIA Design Patterns (w3.org/WAI/ARIA/apg)

Testing Tools:

axe DevTools
WAVE
Lighthouse
Pa11y
NVDA (free screen reader)
JAWS (industry standard)
VoiceOver (Mac/iOS)

References

WCAG 2.1 Guidelines ↗
WebAIM ↗
A11y Project Checklist ↗
ARIA Authoring Practices ↗
"Inclusive Components" by Heydon Pickering
"Web Accessibility by Design" by Claudia Hook

Usability and Accessibility (A11y)

TL;DR

Learning Objectives

Motivating Scenario

Core Concepts

WCAG 2.1 Principles

Practical Example

Self-Check

Design Review Checklist

Understanding Your Users

Types of Disabilities

Legal Requirements

Testing Tools

Next Steps

Advanced Accessibility Patterns

Skip Links and Navigation

Responsive Accessible Forms

ARIA Live Regions for Dynamic Content

Keyboard Navigation Patterns

Accessibility Audit Checklist

Automated Testing

Manual Testing Checklist

Real-World Case Study: E-commerce Accessibility

Accessibility ROI

Resources and Tools

References

Usability and Accessibility (A11y)

TL;DR​

Learning Objectives​

Motivating Scenario​

Core Concepts​

WCAG 2.1 Principles​

Practical Example​

Self-Check​

Design Review Checklist​

Understanding Your Users​

Types of Disabilities​

Legal Requirements​

Practical A11y Examples​

Testing Tools​

Next Steps​

Advanced Accessibility Patterns​

Skip Links and Navigation​

Responsive Accessible Forms​

ARIA Live Regions for Dynamic Content​

Keyboard Navigation Patterns​

Accessibility Audit Checklist​

Automated Testing​

Manual Testing Checklist​

Real-World Case Study: E-commerce Accessibility​

Accessibility ROI​

Resources and Tools​

References​

TL;DR

Learning Objectives

Motivating Scenario

Core Concepts

WCAG 2.1 Principles

Practical Example

Self-Check

Design Review Checklist

Understanding Your Users

Types of Disabilities

Legal Requirements

Practical A11y Examples

Testing Tools

Next Steps

Advanced Accessibility Patterns

Skip Links and Navigation

Responsive Accessible Forms

ARIA Live Regions for Dynamic Content

Keyboard Navigation Patterns

Accessibility Audit Checklist

Automated Testing

Manual Testing Checklist

Real-World Case Study: E-commerce Accessibility

Accessibility ROI

Resources and Tools

References