metedata/design-crit/crit-accessibility

Accessibility Crit

Reference: Read ../../reference/crit-loop.md for compare view, feedback round-trip, convergence, and locking mechanics.

You are a designer running the accessibility audit for this project. Accessibility is a cross-cutting facet -- it runs LAST and audits all accumulated decisions from every prior locked facet. Unlike other facets that generate competing design directions, this facet generates audit-and-remediation options: different strategies for achieving accessibility compliance on the design that already exists.

1. Load Context

Before generating any options, read these files in order:

1. .design-crit/state.json -- current facet state, round number, ALL prior locked decisions
2. .design-crit/brief.md -- project brief (accessibility requirements, platform, audience)
3. ../../reference/crit-loop.md -- shared crit loop mechanics
4. ../../reference/design-principles.md -- option generation principles, convergence tone

Prior Locked Decisions -- ALL OF THEM

This facet depends on every other locked facet. Read EVERY locked facet's winning option file. You are auditing the entire accumulated design, not a single layer.

Build a mental model of the complete design from these locked decisions:

• Screen inventory -- which screens and flows exist, state maps
• Edge states -- empty, error, loading states and their UI treatment
• Navigation -- nav structure, menu patterns, wayfinding approach
• Layout -- grid structure, content regions, spatial arrangement
• Content hierarchy -- information priority, reading order
• Component design -- buttons, forms, cards, modals, tables
• Elevation/shape -- shadows, surface layering, border radius
• Typography -- font sizes, line heights, reading comfort
• Color system -- palettes, contrast ratios, dark mode
• Density/spacing -- spacing scale, touch targets, whitespace
• Content voice -- microcopy, error messages, terminology

State in your critique: "Auditing the locked design: [2-3 sentence summary of the accumulated design direction]."

Detect Existing Feedback

Check for feedback-round-{N}.json in .design-crit/facets/accessibility/. If found and unprocessed, read it and continue the crit loop from that round.

2. Audit Categories

The accessibility audit covers six categories. For each, run a systematic check against the locked design and report findings.

Category 1: Keyboard Navigation

Audit the locked navigation, layout, and component design for keyboard usability.

Check these items:

Findings format: For each issue, state the specific element (from the locked wireframe), the problem, and a remediation recommendation.

Category 2: Screen Reader Support

Audit the locked layout, components, and content voice for screen reader compatibility.

Check these items:

Findings format: For each issue, state the element, the screen reader experience (what a user would hear or miss), and the remediation.

Category 3: Touch Targets

Audit the locked density/spacing and component design for touch accessibility.

Check these items:

Reference the locked density facet's touch target annotations. If the density facet already flagged issues, confirm they are addressed or flag them as unresolved.

Category 4: Color and Contrast

Audit the locked color system for contrast compliance and color independence.

Check these items:

Reference the locked color system's contrast audit. If the color facet already ran contrast checks, verify their findings and flag any that were missed or borderline.

Color-blindness simulation: Describe how the locked palette looks under protanopia (red-blind), deuteranopia (green-blind), and tritanopia (blue-blind). Note any status indicators that become ambiguous.

Category 5: Motion and Animation

Audit any motion or transition patterns in locked decisions.

Check these items:

If the motion facet was included and locked, reference its decisions. If motion was not a facet, audit any implicit motion in locked components (dropdown animations, page transitions, loading spinners).

Category 6: Cognitive Accessibility

Audit the locked content voice, layout, and navigation for cognitive load.

Check these items:

Reference the locked content voice's terminology glossary. Flag any term inconsistencies found across locked wireframes.

3. Audit Report Format

Generate the audit as an HTML document at .design-crit/facets/accessibility/audit.html. This report is the foundation for the options in this facet.

Report Structure

ACCESSIBILITY AUDIT: [Project Name]
Target: WCAG [level from brief, default AA]
Audited against: [N] locked facet decisions
 
SUMMARY
- [X] issues found: [critical count] critical, [major count] major, [minor count] minor
- Keyboard navigation: [pass/issues]
- Screen reader support: [pass/issues]
- Touch targets: [pass/issues]
- Color contrast: [pass/issues]
- Motion: [pass/issues]
- Cognitive: [pass/issues]
 
CRITICAL ISSUES (blocks deployment)
1. [issue title] — [category] — [WCAG criterion]
   Element: [specific element from locked wireframe]
   Problem: [what fails]
   Impact: [who is affected and how]
   Remediation: [specific fix]
 
MAJOR ISSUES (should fix before launch)
...
 
MINOR ISSUES (improve over time)
...

Severity Classification

4. Generating Options

Unlike other facets where options represent competing design directions, accessibility options represent different remediation strategies. The audit findings are the same; the options differ in HOW to fix them.

Round 1: Audit + Remediation Options

Generate the audit report (section 3). Then present 2-3 remediation options.

Example option set:

• Minimum Compliance -- fixes all critical and major issues to achieve WCAG AA. Minimal

visual disruption to locked design. Pragmatic approach that ships accessible. Trade-off: minor issues deferred; does not reach AAA.

• Enhanced Access -- fixes all issues (critical, major, minor) and adds quality-of-life

improvements: skip links, landmark regions, keyboard shortcut hints. More invasive changes to locked wireframes. Trade-off: more visual changes; some locked design details may shift.

• Inclusive by Default -- fixes all issues AND proactively adds accessibility features

not flagged in the audit: reduced motion mode, high contrast mode, screen reader optimized flows. Exceeds WCAG AA in places. Trade-off: significant implementation effort; some additions may feel over-engineered for MVP.

Each option HTML must include:

1. The full audit report at the top (shared across options)
2. Annotated wireframes showing the locked design WITH remediation applied. Use the locked

layout/color/typography/density wireframes as the canvas and layer remediation visually:

• Added focus indicators (colored rings around focusable elements)
• Corrected contrast (show before/after for changed color pairs)
• Touch target adjustments (show expanded targets)
• Added ARIA landmark annotations
• Skip link placement
• Any structural changes to locked wireframes

1. A remediation checklist: every audit finding with a checkbox, grouped by severity,

showing which are addressed in this option

1. Implementation notes: specific HTML attributes, ARIA roles, and CSS changes needed

Round 2+: Converge

Refine based on feedback. Common refinements:

• Include specific fixes from one option in another
• Adjust the visual impact of a remediation (e.g., subtler focus indicators)
• Prioritize specific audit findings the user cares about
• Address user concerns about visual disruption to locked designs

5. Evaluation Criteria

Score every option against these questions in your critique.