accessibility

Implement ARIA labeling, keyboard navigation, and live regions for ShadowCode UI features.

Updated Mar 19, 2026
One-click install
npx skills add https://github.com/Nithwin/shadowcode --skill accessibility-nithwin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/Nithwin/shadowcode/tree/main/.github/skills/accessibility
Command: npx skills add https://github.com/Nithwin/shadowcode --skill accessibility-nithwin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

ShadowCode UI often presents interactive features that are not fully accessible to screen readers or keyboard-only users. This skill standardizes accessibility practices across new features, ensuring help dialogs, accessible views, verbosity controls, ARIA announcements, and proper focus management are implemented from the outset.

Core Features & Use Cases

  • Accessibility Help Dialog: provides keyboard-shortcut guidance and feature overview for screen reader users.
  • Accessible View: presents rich UI content as plain text for screen readers when needed (e.g., panels, dialogs, notifications).
  • Accessibility Verbosity Setting: allows users to enable or disable hints about accessing accessibility features.
  • Signals & Live Regions: supports audible cues and ARIA-live announcements for dynamic UI changes.
  • Keyboard Navigation & ARIA Compliance: enforces keyboard operability, logical focus order, and proper ARIA roles/labels for all interactive elements.
  • Use Case: adding a new panel or dialog should include the three accessibility components and keep focus management consistent.

Quick Start

Implement accessibility for a new feature by adding a help dialog, an accessible view, and a verbosity setting, and register them in the feature's contribution file.

Frequently Asked Questions about accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make screen-reader friendly UI with proper ARIA labels and keyboard navigation?

Screen-reader friendly UI requires implementing proper ARIA roles, labels, and keyboard navigation to ensure interactive elements are operable and announced correctly to assistive technology users.

What is an accessible view and when do I need it for screen readers?

An accessible view presents rich UI content as plain text for screen readers when needed, such as for panels and dialogs, ensuring dynamic visual information is readable by assistive technology.

How do I add accessibility components to a new interactive panel or dialog?

Adding accessibility to a new panel or dialog requires implementing a help dialog, an optional accessible view, a verbosity setting, and registering accessible providers within the feature contribution file.

Does this skill support ARIA live regions for dynamic UI updates and notifications?

ARIA live regions are supported to provide audible cues and announcements for dynamic UI changes, ensuring screen reader users receive real-time updates when interface content shifts.

What keyboard navigation and focus management standards are enforced for accessible UI?

Accessible UI enforces keyboard operability, logical focus order, proper ARIA roles, and consistent dismiss behavior, ensuring keyboard-only users can navigate and manage focus without a mouse.

How do I configure verbosity settings for screen-reader accessibility hints?

Configuring verbosity settings allows users to enable or disable hints about accessing accessibility features, providing control over the amount of guidance announced by screen readers.