一键在 Manus 中运行任何 Skill

aria

星标829

分支69

更新时间2026年3月23日 01:50

Review and implement accessibility patterns for UI components following WAI-ARIA and WCAG 2.1. Use when auditing code for a11y issues, implementing accessible controls, adding ARIA attributes, fixing keyboard navigation, handling focus management, building screen reader support, or implementing media player accessibility. Triggers on "accessibility review", "a11y", "ARIA", "keyboard navigation", "screen reader", "focus management", "WCAG", "captions", "live region".

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

videojs

videojs/v10

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

ARIA Skill

References

Pattern	Reference
Keyboard Navigation	keyboard.md
Focus Management	focus.md
ARIA Roles & States	aria.md
React Patterns	react.md
Media Players	media.md
Anti-Patterns	anti-patterns.md

Review

For structured accessibility reviews, load the review workflow:

File	Contents
workflow.md	Review process and severity
checklist.md	Comprehensive checklist
templates.md	Issue and report formats

Core Principles

Semantic HTML first — Use native elements before ARIA
Keyboard accessible — All interactions work without a mouse
Focus visible — Clear indication of current focus
Name, Role, Value — Every control has accessible name, correct role, exposed state
Announce changes — Dynamic content updates reach screen readers

Common Issues (Quick Fixes)

Issue	Fix
Icon button no name	Add `aria-label`
Custom control no role	Add appropriate `role` attribute
Focus outline removed	Use `focus-visible` instead
Toggle state unclear	Use `aria-pressed` or `aria-expanded`
Dynamic content silent	Add live region with `aria-live`
Click-only handler	Add `keydown` for Enter/Space

Anti-Patterns

❌ Never do these:

Remove focus outlines without replacement
Use tabindex > 0
Rely solely on color to convey information
Auto-focus without user intent
Trap focus unintentionally
Use ARIA where native HTML suffices
Change aria-label to convey state (use aria-pressed)

Next Steps

For keyboard patterns: keyboard.md
For focus management: focus.md
For ARIA roles and states: aria.md
For React-specific patterns: react.md
For media player accessibility: media.md
For common mistakes: anti-patterns.md
For comprehensive checklist: checklist.md

Related Skills

Need	Use
Building UI components	`component` skill
API design principles	`api` skill
Documentation	`docs` skill

同仓库更多 Skills

同仓库

spf-implement-feature

videojs/v10

Implement a feature documented in the SPF feature registry. Consumes a feature doc at internal/design/spf/features/<name>.md and produces the engine-side code: new behaviors, updates to existing behaviors, media-layer / network-layer primitives, and tests. The implementation analog of /spf-document-feature (which produces the doc; this consumes it). Walks through resolving the doc's open questions before coding, maps phases to discrete chunks, applies the SPF conventions catalog, routes to downstream skills (/spf-create-behavior, /spf-update-behavior, /refactor-behavior) per chunk shape, and updates the feature doc's Status / Implementation surface / Verification sections as code lands. Triggers: "implement feature", "implement SPF feature", "build feature", "code feature", "scope feature implementation", "implement <feature-name>".

2026-06-04829

spf-create-behavior

videojs/v10

Create a new SPF behavior with conventions-aligned shape. Walks through purpose articulation (carries /refactor-behavior's purpose-first discipline), signal type choice, slot map design, composition placement, cleanup pattern selection, test placement, and engine wiring. Distinct from /refactor-behavior (which modifies an existing behavior preserving its purpose) and /spf-update-behavior (which modifies an existing behavior whose purpose is changing). Triggers: "create behavior", "new behavior", "create SPF behavior", "add behavior", "scaffold behavior", "new SPF behavior".

2026-05-27829

spf-document-use-case

videojs/v10

Produce or update an entry in the SPF use-case-composition registry at internal/design/spf/use-cases/. Triangulates context from multiple sources (Notion, GitHub, pasted writeups, existing use-case docs, constituent feature docs, codebase), grounds the use case in the four composition mechanisms (subtract / add / alternative-impl / alternative-default-config), applies use-case-specific cross-cutting concern checks, drafts the doc at the appropriate definition depth, and cascades narrow updates to constituent feature docs and sibling use cases. Triggers: "document use case", "register use case", "use case doc", "update use case doc", "deepen use-case stub", "new SPF use case", "use case composition", "draft use-case registry entry", "new use case composition".

2026-05-27829

spf-implement-use-case

videojs/v10

Implement a use-case composition documented in the SPF use-case-composition registry. Consumes a use-case doc at internal/design/spf/use-cases/<name>.md and produces the engine-side code: a variant engine factory, a parallel adapter, composition wiring, use-case-specific behaviors (if any), and tests. The implementation analog of /spf-document-use-case (which produces the doc; this consumes it). Walks through disambiguation + routing (verify the request is actually a use case, check constituent-feature implementation status), resolves the doc's open questions with the user, maps phases to chunks, routes to downstream skills (/spf-implement-feature for unimplemented constituents, /spf-create-behavior, /spf-update-behavior, /refactor-behavior), and updates both the use-case doc and constituent feature docs as code lands. Treats the use-case doc as a starting point for planning, not a hardened specification. Triggers: "implement use case", "implement SPF use case", "implement use-case composition", "build use ca

2026-05-27829

spf-update-behavior

videojs/v10

Update an existing SPF behavior whose purpose is changing or expanding. Distinct from /refactor-behavior, which preserves purpose — this skill handles cases where the behavior gains new responsibility (new state slot to react to, new lifecycle phase, new constraint, new code path). Carries /refactor-behavior's purpose-first discipline applied to the *purpose change*. Triggers: "update behavior", "extend behavior", "modify behavior", "change behavior purpose", "expand behavior responsibility".

2026-05-27829

spf-document-feature

videojs/v10

Produce or update an entry in the SPF feature registry at internal/design/spf/features/. Triangulates context from multiple sources (Notion, GitHub, pasted writeups, existing feature docs, codebase), grounds the feature in the cluster heuristics, applies cross-cutting concern checks, drafts the doc at the appropriate definition depth, and cascades narrow updates to related feature docs. Triggers: "document feature", "register feature", "feature doc", "update feature doc", "deepen feature stub", "draft feature registry entry", "new SPF feature".

2026-05-21829

name

aria

description

ARIA Skill

References

Pattern	Reference
Keyboard Navigation	keyboard.md
Focus Management	focus.md
ARIA Roles & States	aria.md
React Patterns	react.md
Media Players	media.md
Anti-Patterns	anti-patterns.md

Review

For structured accessibility reviews, load the review workflow:

File	Contents
workflow.md	Review process and severity
checklist.md	Comprehensive checklist
templates.md	Issue and report formats

Core Principles

Semantic HTML first — Use native elements before ARIA
Keyboard accessible — All interactions work without a mouse
Focus visible — Clear indication of current focus
Name, Role, Value — Every control has accessible name, correct role, exposed state
Announce changes — Dynamic content updates reach screen readers

Common Issues (Quick Fixes)

Issue	Fix
Icon button no name	Add `aria-label`
Custom control no role	Add appropriate `role` attribute
Focus outline removed	Use `focus-visible` instead
Toggle state unclear	Use `aria-pressed` or `aria-expanded`
Dynamic content silent	Add live region with `aria-live`
Click-only handler	Add `keydown` for Enter/Space

Anti-Patterns

❌ Never do these:

Remove focus outlines without replacement
Use tabindex > 0
Rely solely on color to convey information
Auto-focus without user intent
Trap focus unintentionally
Use ARIA where native HTML suffices
Change aria-label to convey state (use aria-pressed)

Next Steps

For keyboard patterns: keyboard.md
For focus management: focus.md
For ARIA roles and states: aria.md
For React-specific patterns: react.md
For media player accessibility: media.md
For common mistakes: anti-patterns.md
For comprehensive checklist: checklist.md

Related Skills

Need	Use
Building UI components	`component` skill
API design principles	`api` skill
Documentation	`docs` skill