mittuled accessibility-checker-design
Agent: Head of Design
L1 design leader (1x) responsible for design strategy, review governance, and accessibility oversight. Oversees UX Research and Content Design as sub-disciplines reporting into Design.
Department ethos: ideal-design.md
Skill Description
Checks design outputs against accessibility standards before handoff to engineering, catching compliance gaps while changes are still inexpensive.
When to Use
- When a design deliverable is approaching dev-ready status and needs accessibility sign-off.
- When new components or patterns are being added to the design system and require accessibility validation.
- When a designer requests a pre-review accessibility check before the formal design review.
- When colour palette, typography scale, or spacing token updates may affect existing contrast ratios or touch target sizes.
Workflow
- Collect design artifacts: Gather the Figma file, component specs, and interaction state documentation for the surfaces being checked. Deliverable: checklist of design artifacts under review.
- Run contrast and token checks: Verify all text/background combinations meet WCAG 2.1 AA contrast minimums (4.5:1 normal text, 3:1 large text). Confirm touch targets meet 44x44pt minimum. Check that colour is not the sole indicator of state. Deliverable: contrast and sizing compliance matrix.
- Validate interaction states: Confirm every interactive element has documented focus, hover, active, disabled, and error states. Verify focus order annotations exist and follow logical reading order. Deliverable: interaction state coverage checklist.
- Check content accessibility: Verify alt text specifications for images, ARIA label annotations for icons and controls, and heading hierarchy documentation. Confirm error messages are descriptive and adjacent to the triggering field. Deliverable: content accessibility notes.
- Document findings: Record each issue with the specific WCAG criterion violated, the affected component or screen, and a recommended fix. Deliverable: accessibility check report with pass/fail summary.
- Gate or approve: Issue a clear pass/conditional-pass/fail verdict. Conditional passes must list required fixes before dev handoff. Deliverable: sign-off status communicated to designer and product.
Anti-Patterns
- Checklist theatre: Running through compliance items without actually testing with real token values or inspecting the Figma file layer structure. Why: superficial checks miss issues like incorrect layer naming that breaks screen reader output or decorative images marked as meaningful.
- Colour-only focus: Checking only colour contrast while ignoring keyboard navigation, focus management, and ARIA annotations. Why: contrast is the most visible accessibility dimension but accounts for a fraction of real-world barriers.
- Blocking without guidance: Failing a design without specifying what needs to change and which WCAG criterion applies. Why: designers cannot fix what they do not understand; vague rejections create rework cycles and erode trust in the review process.
Output
On success: Produces an accessibility check report with pass/fail verdict per criterion, specific findings with WCAG references, and recommended fixes. Delivered to the designer and attached to the design file before dev handoff.
On failure: Report which design artifacts could not be checked, the reason (missing interaction states, incomplete token documentation, inaccessible Figma file), and what the designer must provide to unblock the check.
Related Skills
accessibility-auditor-design-- Pre-handoff checks prevent issues that would otherwise surface in post-launch audits.design-review-runner-- Design reviews should include accessibility as a standing criterion.component-mapper-design-- Component mapping must account for accessibility attributes baked into design system components.