accessibility-aria-expert Skill
Detects and fixes accessibility issues in React/Fluent UI webviews. Use when reviewing code for screen reader compatibility, fixing ARIA labels, ensuring keyboard navigation, adding live regions for status messages, or managing focus in dialogs. Published by microsoft in vscode-cosmosdb.
What is accessibility-aria-expert Skill?
Detects and fixes accessibility issues in React/Fluent UI webviews. Use when reviewing code for screen reader compatibility, fixing ARIA labels, ensuring keyboard navigation, adding live regions for status messages, or managing focus in dialogs. Published by microsoft in vscode-cosmosdb. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Design and media
- Research
- Design and media use cases
- Research use cases
Technical details
- Install or run with Copy skill directory
When to use accessibility-aria-expert Skill
- Use it for design and media.
- Use it for research.
Built with
Editorial notes
Source
- Creator: microsoft
- Repository: microsoft/vscode-cosmosdb
- Skill file: .github/skills/accessibility-aria-expert/SKILL.md
What it does
Detects and fixes accessibility issues in React/Fluent UI webviews. Use when reviewing code for screen reader compatibility, fixing ARIA labels, ensuring keyboard navigation, adding live regions for status messages, or managing focus in dialogs.
Skill instructions
Accessibility Expert for Webviews Verify and fix accessibility in React/Fluent UI webview components. When to Use - Review webview code for accessibility issues - Fix double announcements from screen readers - Add missing aria-label to icon-only buttons or form inputs - Make tooltips accessible to keyboard/screen reader users - Announce status changes (loading, search results, errors) - Manage focus when dialogs/modals open - Group related controls with proper labels Core Pattern: Tooltip Accessibility Tooltips require aria-label + aria-hidden to avoid double announcements: tsx <Tooltip content="Detailed explanation" <Badge tabIndex={0} className="focusableBadge" aria-label="Badge text. Detailed explanation" <span aria-hidden="true"Badge text</span </Badge </Tooltip - aria-label: Full context (visible text + tooltip) - aria-hidden="true": Wraps visible text to prevent duplication - Screen reader hears: "Badge text. Detailed explanation" Detection Rules 1. Tooltip Without aria-label Con
Explore related resources
Frequently asked questions
What is accessibility-aria-expert?
accessibility-aria-expert is a open-source AI agent skill with Copy skill directory. Detects and fixes accessibility issues in React/Fluent UI webviews. Use when reviewing code for screen reader compatibility, fixing ARIA labels, ensuring keyboard navigation, adding live.
Who is accessibility-aria-expert best for?
accessibility-aria-expert is best for reusing agent instructions, scripts, and references, design and media workflows, research workflows.
How do I install accessibility-aria-expert?
Install or run accessibility-aria-expert using Copy skill directory. Check accessibility-aria-expert for the latest setup command.
Is accessibility-aria-expert actively maintained?
accessibility-aria-expert may need a closer maintenance check before production use.
Auto-fetched from GitHub.
