Run any Skill in Manus with one click

aria

Stars829

Forks69

UpdatedMarch 23, 2026 at 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".

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

videojs

videojs/v10

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

10 files

SKILL.md

readonly

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

More from this repository

same repository

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