Web Accessibility: Building Inclusive Applications with WCAG 2.2

Web accessibility ensures your application works for everyone, including users with disabilities. WCAG 2.2 sets the standard.

Semantic HTML

// Instead of div soup:
<div class="button" onclick="submit()">Submit</div>

// Use semantic elements:
<button type="submit" onClick={submit}>Submit</button>

// Use headings in order:
<h1>Page Title</h1>
  <h2>Section</h2>
    <h3>Subsection</h3>

ARIA Patterns

// Accessible modal
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Confirm Action</h2>
  <p>Are you sure?</p>
  <button onClick={confirm}>Yes</button>
  <button onClick={close}>Cancel</button>
</div>

// Accessible tabs
<div role="tablist" aria-label="Settings">
  <button role="tab" aria-selected={active === 'general'}>General</button>
  <button role="tab" aria-selected={active === 'billing'}>Billing</button>
</div>

Keyboard Navigation

Ensure all interactive elements are focusable and operable with keyboard:

• Tab through interactive elements
• Enter/Space to activate buttons
• Arrow keys for navigation within widgets
• Escape to close modals and dropdowns

Testing Tools

• axe-core for automated testing
• Lighthouse accessibility audit
• Screen reader testing (NVDA, VoiceOver)
• Keyboard-only navigation testing

The Bottom Line

The Component Library Starter from BreafIO includes accessible components with proper ARIA attributes and keyboard support. The Admin Dashboard Pro demonstrates accessible data tables and forms. The SaaS Starter Kit includes accessible navigation patterns. The Design System Manager documents accessibility standards, and the Landing Page Bundle is built with semantic HTML.