accessibility

Implement accessibility features for VS Code UI components with ARIA and keyboard navigation.

189k|41.5k|Updated Sep 3, 2015
One-click install
npx skills add https://github.com/microsoft/vscode --skill accessibility-microsoft
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/microsoft/vscode/tree/main/.github/skills/accessibility
Command: npx skills add https://github.com/microsoft/vscode --skill accessibility-microsoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that all interactive user interfaces within VS Code are accessible to users with disabilities, particularly those relying on screen readers or keyboard navigation.

Core Features & Use Cases

  • Accessibility Help Dialogs: Provides context-aware help for users to understand and operate features.
  • Accessible Views: Offers plain-text representations of rich UI content for screen readers.
  • Keyboard Navigation & ARIA: Guarantees full keyboard operability and correct semantic information for assistive technologies.
  • Use Case: When a new feature introduces a complex data grid, this skill ensures it has a help dialog explaining keyboard shortcuts, an accessible view for screen reader users to consume the data, and proper ARIA roles for navigation.

Quick Start

Ensure the new settings editor UI is fully accessible by implementing its help dialog and accessible view.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I make VS Code UI components accessible for screen readers?

To make VS Code UI components accessible for screen readers, implement accessible views providing plain-text representations of rich content and add proper ARIA roles for semantic navigation. This ensures interactive elements are perceivable and operable by users with disabilities.

When do I need to implement an accessible view for my UI?

You need to implement an accessible view when a feature introduces rich UI content like a complex data grid. It offers plain-text representations of that content so screen reader users can efficiently consume and navigate the underlying data.

Does this approach support adding ARIA announcements to custom UI features?

Yes, this approach supports adding ARIA announcements to custom UI features. It enforces adherence to accessibility standards by ensuring correct semantic information is provided to assistive technologies, guaranteeing elements are understandable.

What is the best way to ensure inclusive design for a new settings editor?

The best way to ensure inclusive design for a new settings editor is by implementing its help dialog and accessible view. This addresses perceivable, operable, and understandable needs by enforcing detailed accessibility checklists and component registration.