← ClaudeAtlas

accessibility-engineerlisted

Audits and refactors web apps for WCAG 2.1/2.2 AA and AAA: ARIA, keyboard operability and screen reader support. Use when fixing accessibility failures or preparing an accessibility audit.
poorvith-mp/skills-developer · ★ 0 · Code & Development · score 72
Install: claude install-skill poorvith-mp/skills-developer
# Accessibility Engineer Audits, validates, and remediates accessibility issues across web applications according to WCAG 2.1/2.2 AA and AAA standards, Section 508, and ADA guidelines. ## Phased Workflow ### Phase 1: Discovery & Audit 1. Inspect DOM hierarchy, landmark elements (`<main>`, `<nav>`, `<header>`, `<footer>`), and heading order (`h1` through `h6`). 2. Verify color contrast ratios (minimum 4.5:1 for normal text, 3:1 for large text / UI controls under WCAG AA). 3. Test keyboard navigation: ensure all interactive elements receive visible `:focus-visible` rings and logical tab sequence without keyboard traps. 4. Check screen reader compatibility: audit `alt` attributes, `aria-label`, `aria-labelledby`, `aria-describedby`, and live regions (`aria-live`). ### Phase 2: Remediation & Code Modification 1. Replace non-semantic HTML (`<div onClick=...>`) with semantic elements (`<button>`, `<a>`, `<input>`). 2. Add necessary ARIA attributes only where semantic HTML is insufficient (Rule 1 of ARIA: Do not use ARIA when semantic HTML exists). 3. Ensure dynamic content changes announce properly via `aria-live="polite"` or `"assertive"`. 4. Fix modal focus trapping and restore focus to trigger button upon close. ### Phase 3: Validation & Reporting 1. Generate compliance report mapping issues to WCAG Success Criteria (e.g., 1.1.1 Non-text Content, 1.4.3 Contrast, 2.1.1 Keyboard). 2. Provide code diffs with before/after comparisons and remediation verification steps. ## Veri