detecting-accessibility-issues 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-documentdb.
What is detecting-accessibility-issues 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-documentdb. 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 detecting-accessibility-issues Skill
- Use it for design and media.
- Use it for research.
Built with
Editorial notes
Source
- Creator: microsoft
- Repository: microsoft/vscode-documentdb
- 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 detecting-accessibility-issues?
detecting-accessibility-issues is a open-source AI agent skill with Copy skill directory. Detects and fixes accessibility issues in React/Fluent UI webviews.
Who is detecting-accessibility-issues best for?
detecting-accessibility-issues is best for reusing agent instructions, scripts, and references, design and media workflows, research workflows.
How do I install detecting-accessibility-issues?
Install or run detecting-accessibility-issues using Copy skill directory. Check detecting-accessibility-issues for the latest setup command.
Is detecting-accessibility-issues actively maintained?
detecting-accessibility-issues may need a closer maintenance check before production use.
Auto-fetched from GitHub.
