Accessibility Pattern Library

Accessibility Pattern Library

Provides accessible UI component patterns following WCAG 2.1 AA guidelines.

Decision Framework

When to Apply

Use when:

• Building interactive UI components (modals, dropdowns, tabs, forms)
• Implementing keyboard navigation
• Adding screen reader support
• Auditing existing components for accessibility

When NOT to Apply

Don't use when:

• Server-side rendering without client interaction
• Non-interactive content display
• Using a component library that already handles accessibility

Anti-Patterns

1. Non-Semantic Interactive Elements

<!-- BAD -->
<div
<span class="button" tabindex="0">Click me</span>

<!-- GOOD -->
<button aria-haspopup="dialog" aria-expanded="false">Open</button>

2. Missing Focus Management

// BAD: Modal opens but focus stays on trigger
openModal();

// GOOD: Move focus to modal, trap focus inside
openModal();
modal.querySelector('[autofocus]')?.focus() || modal.focus();

3. Invisible Focus Indicators

/* BAD */
*:focus { outline: none; }

/* GOOD */
*:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }

Trigger Phrases

• "Add accessibility"
• "ARIA support"
• "Keyboard navigation"
• "Screen reader"
• "WCAG compliance"

Patterns

Modal Dialog

<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Dialog Title</h2>
  <button aria-label="Close dialog"
  <!-- Content -->
</div>

Tab Panel

  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Tab 2</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">Content 1</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>Content 2</div>

Live Region for Dynamic Updates

<div aria-live="polite" aria-atomic="true">
  <!-- Dynamic status messages announced by screen readers -->
</div>

Integration

• Works with: form-pattern-engine, mobile-gesture-handler, design-audit
• Validates with: performance-budget-enforcer