菜单
WCAG 2.2 compliance, ARIA patterns, keyboard navigation, screen reader support, and inclusive design. Use when: reviewing accessibility, adding ARIA attributes, fixing contrast issues, implementing keyboard navigation, creating accessible forms, building accessible components, WCAG audit.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | accessibility |
| description | WCAG 2.2 compliance, ARIA patterns, keyboard navigation, screen reader support, and inclusive design. Use when: reviewing accessibility, adding ARIA attributes, fixing contrast issues, implementing keyboard navigation, creating accessible forms, building accessible components, WCAG audit. |
| Criterion | Requirement |
|---|---|
| 1.1.1 Non-text Content | All images have meaningful alt text or are marked decorative |
| 1.3.1 Info and Relationships | Structure conveyed visually is also in markup (headings, lists, tables) |
| 2.1.1 Keyboard | All functionality available via keyboard |
| 2.4.1 Bypass Blocks | Skip navigation link or landmark regions |
| 4.1.2 Name, Role, Value | Custom controls expose name, role, state to assistive tech |
| Criterion | Requirement |
|---|---|
| 1.4.3 Contrast (Minimum) | 4.5:1 for normal text, 3:1 for large text |
| 1.4.11 Non-text Contrast | 3:1 for UI components and graphical objects |
| 2.4.7 Focus Visible | Keyboard focus indicator is clearly visible |
| 2.5.8 Target Size (Minimum) | 24x24 CSS pixels minimum for pointer targets |
<button> over <div role="button">role="heading" to a <button>role="presentation" or aria-hidden="true" on focusable elements| Component | Key ARIA | Keyboard |
|---|---|---|
| Modal dialog | role="dialog", aria-modal="true", aria-labelledby | Trap focus, Escape to close |
| Tab panel | role="tablist/tab/tabpanel", aria-selected | Arrow keys between tabs, Tab into panel |
| Menu | role="menu/menuitem", aria-expanded | Arrow keys to navigate, Enter to select, Escape to close |
| Accordion | <button> with aria-expanded, aria-controls | Enter/Space to toggle |
| Alert | role="alert" or aria-live="assertive" | Announced automatically |
| Status | role="status" or aria-live="polite" | Announced at next opportunity |
tabindex="0" to make non-interactive elements focusable when neededtabindex="-1" for programmatic focus (e.g., error summary, modal container)tabindex greater than 0<label> with matching for/id<fieldset> and <legend>aria-required="true" and visible indicatoraria-describedbyaria-invalid="true" on fields with validation errorsBlazor component architecture, Razor component patterns, Radzen UI library, and Blazor-specific UX patterns. Use when: building Blazor components, structuring Razor component hierarchy, using Radzen components, implementing Blazor forms, managing component state, Blazor rendering modes, Blazor layout design.
Ensure .NET/C# code meets best practices for the solution/project.
Quality gate review with structured findings and verdict. Use when: reviewing a completed implementation phase, checking spec compliance, convention adherence, test coverage, and issuing APPROVE or REQUEST_CHANGES verdicts.
Generate phased implementation blueprint with parallel research subagents. Use when: a clarified specification is ready for architecture planning, creating task tables, scoring complexity, and defining implementation phases.
Execute one implementation phase with progress tracking and verification. Use when: implementing tasks from an SDD plan, logging discoveries, updating task tables, and running build/test verification per phase.
Encode learnings from completed SDD cycles into the agent harness. Use when: a review has been approved and learnings need to be extracted, classified, and encoded into instruction files, copilot-instructions, or AGENTS.md.