cac126e7bf
Convert team-interactive-craft, team-motion-design, team-visual-a11y, team-ui-polish from Claude agent format to Codex v4 API (spawn_agent, wait_agent, close_agent, request_user_input). Each skill includes SKILL.md with Delegation Lock + v4 Coordination, coordinator with Scope Lock, worker roles with preserved domain content, and specs. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
5.8 KiB
WCAG 2.1 Criteria Matrix
Reference matrix for visual accessibility audit. Maps WCAG success criteria to audit methods and responsible roles.
Criteria Covered by This Team
| Criterion | Level | Automated | Manual | Check Method | Primary Role |
|---|---|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | Yes | - | Color ratio calculation (4.5:1 normal, 3:1 large) | color-auditor |
| 1.4.6 Contrast (Enhanced) | AAA | Yes | - | Color ratio calculation (7:1 normal, 4.5:1 large) | color-auditor |
| 1.4.11 Non-text Contrast | AA | Partial | Yes | UI component border/fill contrast >= 3:1 | color-auditor |
| 1.4.4 Resize Text | AA | Yes | - | 200% zoom, no content loss | typo-auditor |
| 1.4.12 Text Spacing | AA | Partial | Yes | Override line-height 1.5x, letter-spacing 0.12em, word-spacing 0.16em | typo-auditor |
| 2.1.1 Keyboard | A | Partial | Yes | Tab through all interactive elements | focus-auditor |
| 2.1.2 No Keyboard Trap | A | - | Yes | Tab can escape all contexts (except intentional traps with Escape) | focus-auditor |
| 2.4.1 Bypass Blocks | A | Yes | - | Skip link present and functional | focus-auditor |
| 2.4.3 Focus Order | A | - | Yes | Logical tab sequence | focus-auditor |
| 2.4.7 Focus Visible | AA | Partial | Yes | Visible focus indicator on all interactive elements | focus-auditor |
| 2.4.11 Focus Not Obscured (Min) | AA | - | Yes | Focus indicator not hidden by overlays, sticky headers | focus-auditor |
| 2.5.8 Target Size (Minimum) | AA | Yes | - | Minimum 24x24px CSS pixel touch targets | focus-auditor |
| 4.1.2 Name, Role, Value | A | Yes | - | ARIA roles, labels, and states on interactive elements | focus-auditor |
| 4.1.3 Status Messages | AA | Partial | Yes | aria-live regions for dynamic status updates | focus-auditor |
Audit Method Legend
| Method | Description |
|---|---|
| Automated | Can be verified programmatically (CSS parsing, contrast calculation) |
| Manual | Requires human judgment or runtime interaction |
| Partial | Automated detection of presence, manual verification of correctness |
Criterion Details
1.4.3 Contrast (Minimum) - AA
Requirement: Text and images of text have a contrast ratio of at least 4.5:1 (3:1 for large text).
Large text definition: >= 18pt (24px) or >= 14pt bold (18.66px bold).
Exceptions: Decorative text, logos, inactive UI components.
Check: Extract foreground/background colors -> calculate contrast ratio -> compare against threshold.
1.4.6 Contrast (Enhanced) - AAA
Requirement: Text has contrast ratio of at least 7:1 (4.5:1 for large text).
Check: Same as 1.4.3 but with higher thresholds.
1.4.11 Non-text Contrast - AA
Requirement: UI components and graphical objects have at least 3:1 contrast against adjacent colors.
Applies to: Buttons, inputs, icons, focus indicators, charts, custom controls.
Check: Extract border/fill colors of UI components -> calculate contrast against background.
1.4.4 Resize Text - AA
Requirement: Text can be resized up to 200% without loss of content or functionality.
Check: Zoom to 200% -> verify no horizontal scrolling, no content clipping, no overlap.
1.4.12 Text Spacing - AA
Requirement: Content must remain readable when user overrides:
- Line height to 1.5x font size
- Paragraph spacing to 2x font size
- Letter spacing to 0.12x font size
- Word spacing to 0.16x font size
Check: Apply overrides via JavaScript/CSS -> verify no content loss or overlap.
2.1.1 Keyboard - A
Requirement: All functionality available via keyboard (Enter, Space, Tab, Arrow keys, Escape).
Check: Tab to every interactive element -> activate with Enter/Space -> navigate composites with Arrows.
2.1.2 No Keyboard Trap - A
Requirement: Keyboard focus can be moved away from any component using standard keys.
Exception: Modal dialogs that trap focus intentionally (must have Escape to exit).
Check: Tab forward and backward through all elements -> verify escape from all containers.
2.4.1 Bypass Blocks - A
Requirement: Mechanism to bypass repeated content blocks (skip links, landmarks, headings).
Check: Verify skip link as first focusable element, target exists, focus moves correctly.
2.4.3 Focus Order - A
Requirement: Focus order preserves meaning and operability (logical sequence).
Check: Tab through page -> verify order matches visual/reading order.
2.4.7 Focus Visible - AA
Requirement: Keyboard focus indicator is visible on all interactive elements.
Check: Tab to each element -> verify visible outline/border/shadow change.
2.4.11 Focus Not Obscured (Minimum) - AA
Requirement: Focused element is not entirely hidden by other content (sticky headers, overlays, banners).
Check: Tab through elements near sticky/fixed positioned elements -> verify focus indicator partially visible.
2.5.8 Target Size (Minimum) - AA
Requirement: Interactive targets are at least 24x24 CSS pixels, or have adequate spacing.
Exceptions: Inline links within text, user agent default controls, essential presentation.
Check: Measure interactive element dimensions -> verify >= 24x24px or adequate spacing.
4.1.2 Name, Role, Value - A
Requirement: All UI components have accessible name, role, and state programmatically determined.
Check: Verify interactive elements have:
- Accessible name (text content, aria-label, aria-labelledby)
- Appropriate role (native HTML or ARIA role)
- Current state (aria-expanded, aria-pressed, aria-selected, aria-checked)
4.1.3 Status Messages - AA
Requirement: Status messages can be programmatically determined through role or properties without receiving focus.
Check: Verify dynamic content updates use aria-live or appropriate roles (status, alert, log).