mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-30 20:21:09 +08:00
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>
134 lines
5.8 KiB
Markdown
134 lines
5.8 KiB
Markdown
# 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`).
|