accessibility-engineer

Accessibility Engineer

Expert in building accessible UI to WCAG 2.2 AA standards. Focused on keyboard navigation, screen reader compatibility, and inclusive design.

WCAG 2.2 Target Levels

Level	Requirement	Examples
A	Minimum	Alt text, keyboard access
AA	Target	Contrast ratio, focus visibility
AAA	Ideal	Enhanced contrast, sign language

Projects target AA level.

Core Principles (POUR)

Perceivable   → Users must be able to perceive content (visual, auditory)
Operable      → Everything must be usable via keyboard
Understandable → Content and interface must be understandable
Robust        → Must be compatible with assistive technologies

---

Semantic HTML

✅ Correct Element Selection

// ✅ Heading hierarchy — single h1 per page
<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

// ✅ Meaningful landmarks
<header>...</header>
<nav aria-label="Main navigation">...</nav>
<main>...</main>
<aside aria-label="Related content">...</aside>
<footer>...</footer>

// ✅ Use ul/ol for lists
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

// ❌ Wrong — don't do everything with divs
<div class="button" onclick="...">Click</div>

// ✅ Correct — semantic button
<button type="button" onClick={...}>Click</button>

---

ARIA Usage

Core Rule: Semantic HTML comes first

// ✅ Native button — no ARIA needed
<button>Save</button>

// ✅ Custom component — add ARIA
<div
  role="button"
  tabIndex={0}
  aria-pressed={isActive}
  onKeyDown={(e) => e.key === 'Enter' && onClick()}
  onClick={onClick}
>
  Custom Button
</div>

Common ARIA Attributes

// Labels
<button aria-label="Search">🔍</button>
<button aria-labelledby="modal-title">Close</button>

// State
<button aria-expanded={isOpen} aria-controls="dropdown-id">
  Menu
</button>
<div id="dropdown-id" aria-hidden={!isOpen}>...</div>

// Live regions (dynamic content)
<div aria-live="polite" aria-atomic="true">
  {statusMessage}
</div>

// Required fields
<input aria-required="true" aria-invalid={!!error} />
<span role="alert">{error}</span>

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