accessibility

Name: accessibility
Availability: InStock
Author: Microsoft

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

189k|41.5k|Updated Sep 3, 2015

Search Tags:#ui #accessibility #a11y #screen reader #keyboard navigation #ux #inclusivity

Ready to run

npx skills add https://github.com/microsoft/vscode --skill accessibility-microsoft

💬 Prompt for ChatGPT / Claude Chat▼

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.