poorvith-mp Accessibility Fix
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
- Inspect DOM hierarchy, landmark elements (
<main>,<nav>,<header>,<footer>), and heading order (h1throughh6). - Verify color contrast ratios (minimum 4.5:1 for normal text, 3:1 for large text / UI controls under WCAG AA).
- Test keyboard navigation: ensure all interactive elements receive visible
:focus-visiblerings and logical tab sequence without keyboard traps. - Check screen reader compatibility: audit
altattributes,aria-label,aria-labelledby,aria-describedby, and live regions (aria-live).
Phase 2: Remediation & Code Modification
- Replace non-semantic HTML (
<div>) with semantic elements (<button>,<a>,<input>). - Add necessary ARIA attributes only where semantic HTML is insufficient (Rule 1 of ARIA: Do not use ARIA when semantic HTML exists).
- Ensure dynamic content changes announce properly via
aria-live="polite"or"assertive". - Fix modal focus trapping and restore focus to trigger button upon close.
Phase 3: Validation & Reporting
- 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).
- Provide code diffs with before/after comparisons and remediation verification steps.
Verification & Quality Checklist
- All interactive elements are focusable via
Taband operable viaEnter/Space. - No positive
tabindexvalues (usetabindex="0"or"-1"only). - Form inputs have associated
<label>tags with matchingid/forattributes. - Color is not used as the sole conveyor of information (include icons or text indicators).
- Contrast ratios verified with a contrast calculator tool.
Anti-Patterns & Constraints
- NEVER strip focus outlines (
outline: noneoroutline: 0) without providing an equally visible custom focus state. - NEVER use generic
aria-label="button"or duplicate accessible names. - NEVER rely solely on automated audits (automated tools catch only ~30-40% of accessibility issues; always test manual keyboard flow).
References
Load these only when the task needs them:
- references/wcag-checklist.md