05 vscode accessibility

VS Code Setup & Accessibility Basics

Listen to Episode 11: VS Code Setup and Accessibility - a conversational audio overview of this chapter. Listen before reading to preview the concepts, or after to reinforce what you learned.

Your Accessible Development Environment - The Foundation

Day 2, Block 1 Material

This chapter is the bridge between GitHub's browser interface (Day 1) and real contribution work in VS Code (Day 2). You will learn how to launch VS Code, sign in to your GitHub account, verify GitHub Copilot is active, configure screen reader mode, navigate every major surface area, and master the accessibility tools that make VS Code one of the most accessible code editors available.

Prerequisites: Complete Day 1 walkthrough of GitHub's browser interface before working through VS Code material.

Workshop Recommendation (Chapter 5)

For this workshop, Chapter 5 is a guided setup chapter with a lightweight completion challenge.

Challenge count: 1 guided walkthrough
Automation check: none - setup state is local/account-level and cannot be validated by the Learning Room PR bot
Evidence: structured completion comment on your assigned challenge issue
Pattern: open, configure, navigate, verify

Chapter 5 Challenge Set

VS Code accessibility baseline - open VS Code (github.dev or desktop), enable screen reader mode, sign in to GitHub, verify Copilot status, and navigate core surfaces.

Challenge 5.1 Step-by-Step: VS Code Accessibility Baseline

Goal: Confirm you can access VS Code (github.dev or desktop), enable screen reader support, sign in to GitHub, check Copilot status, and perform core navigation.

Where you are working: github.dev (VS Code in the browser) or desktop VS Code if you installed it in Block 0.

Estimated time: 10-15 minutes.

Open the learning-room repository on GitHub.com.
Press . (the period key) on your keyboard. This launches github.dev - a full VS Code editor running in your browser. Wait a few seconds for it to load.
Enable screen reader mode:
- Windows (NVDA/JAWS): Press Shift+Alt+F1. You should hear an announcement confirming screen reader mode is on.
- Mac (VoiceOver): Screen reader mode is usually already optimized. If navigation feels wrong, open Command Palette (Cmd+Shift+P) and run Toggle Screen Reader Accessibility Mode.
Open the Explorer panel with Ctrl+Shift+E (Mac: Cmd+Shift+E). Your screen reader should announce the file tree.
Navigate to and open README.md from the file tree. Use arrow keys to move through files and Enter to open.
Open the outline/symbols view with Ctrl+Shift+O (Mac: Cmd+Shift+O). This shows all headings and sections in the current file - a key navigation tool for screen reader users.
Open the Command Palette with Ctrl+Shift+P (Mac: Cmd+Shift+P). Type any command name (for example, Toggle Word Wrap) and press Enter to run it. Press Escape to close without running.
Check the Accounts button in the Activity Bar (bottom-left of the sidebar). If you are signed in, your screen reader announces your GitHub username. If not, activate it and sign in with GitHub.
Check the Status Bar at the bottom of the window. Tab or arrow through it to find GitHub Copilot status. If Copilot is active, you hear an indicator showing it is ready.

You are done when: You have successfully opened github.dev, enabled screen reader mode, signed in to GitHub, confirmed Copilot status, opened a file, viewed its outline, and run a command from the Command Palette.

Completing Chapter 5: Submit Your Evidence

Return to GitHub.com, open your assigned Chapter 5 challenge issue, and post a completion comment:

Chapter 5 completed:
- Opened github.dev: yes / no
- Screen reader mode enabled: yes / no
- Signed in to GitHub: yes / no
- Copilot status checked: yes / no
- Opened file in Explorer: yes / no
- Opened outline/symbols: yes / no
- Opened Command Palette: yes / no

If any step was "no," add a note explaining where you got stuck so the facilitator can help. Close your Chapter 5 challenge issue when done.

Expected Outcomes

Student can launch and navigate github.dev or desktop VS Code.
Student can enable screen reader mode and hear navigation announcements.
Student has signed in to GitHub and can see their account status.
Student has verified GitHub Copilot is active (or knows it requires desktop VS Code).
Student can open core navigation surfaces (Explorer, Outline, Command Palette).
Student is ready for VS Code-based contribution chapters (6-16).

If You Get Stuck

Nothing happens when you press .? Make sure you are on the repository's main page (not inside an issue or PR). The . shortcut only works on repository code pages.
Screen reader mode toggle did not announce anything? Open Command Palette (Ctrl+Shift+P) and type Screen Reader to find the toggle manually.
Explorer panel is empty? VS Code may still be loading the repository. Wait 5-10 seconds and press Ctrl+Shift+E again.
On Mac with VoiceOver, navigation feels wrong? Run Toggle Screen Reader Accessibility Mode from Command Palette. VoiceOver sometimes needs the explicit toggle.
Cannot find the Accounts button? Open Command Palette and type Accounts to manage sign-in from there.
Copilot not showing in the status bar? github.dev does not support Copilot - you need desktop VS Code or a Codespace.
Shortcut not working? Use Command Palette as a fallback for any action - type what you want to do and VS Code will find the command.
Ask facilitator for a side-by-side demo and repeat the same steps.

Learning Moment

Tool setup is part of contribution skill. A stable, accessible editor reduces stress and increases contribution quality. The surfaces you just tested - github.dev launch, screen reader mode, GitHub sign-in, Copilot status, Explorer, Outline, and Command Palette - are the foundation for everything in Day 2.

Learning Pattern Used in This Chapter

Open the tool in the simplest way possible (. key for github.dev).
Sign in and verify your identity and tools are ready (Accounts, Copilot).
Configure accessibility before doing any work (screen reader mode first).
Verify each navigation surface works with your assistive technology.
Record what worked and what didn't (evidence comment).

Why VS Code for Open Source Contribution
The Bridge: github.dev - VS Code in Your Browser
Screen Reader Mode in VS Code
The VS Code Interface Tour
The Accounts Button and GitHub Sign-In
Verifying GitHub Copilot Status
The Status Bar
The Menu Bar
Settings Sync
- Profiles
The Settings Editor
The Keyboard Shortcuts Editor
Essential Keyboard Navigation and Find/Filter
The Problems Panel
The Terminal
Copilot Chat Window
Accessible Help, Accessible View, and Accessible Diff
Accessibility Signals
VS Code Speech - Voice Input and Output
Git Operations Inside VS Code

1. Why VS Code for Open Source Contribution

GitHub's browser interface is excellent for reviewing, discussing, and triaging. VS Code is where you create. The difference:

Task	Browser	VS Code
Navigate a repository	Excellent	Explorer sidebar
Read issues and PRs	Excellent	GitHub PR extension
Comment on a PR	Excellent	GitHub PR extension
Edit a file	Web editor	Full text editor with Copilot
Review a diff	Files Changed tab	Three-way merge view with navigation
Get AI help while writing	Not available	Copilot inline + Chat
Run Accessibility Agents	Not available	Copilot Chat with agent files
See errors in your contribution	After push	Real-time as you type

For Markdown contributions (which is most of what accessibility-agents needs), VS Code gives you Copilot assistance, live preview, and the same Git workflow - with less tab switching and with agents available on every file you open.

2. The Bridge: github.dev - VS Code in Your Browser

Before you install anything: try VS Code right now in your browser

GitHub provides a web-based version of VS Code called github.dev. It runs entirely in your browser with zero installation. The keyboard shortcuts, screen reader mode, and editor experience are identical to the desktop app.

How to Access github.dev

Method 1: The Period Key Shortcut (Fastest)

From any GitHub repository page:

Press . (period key - just the period, no modifier keys)
The page transforms into VS Code
You are now editing in github.dev
The URL changes to github.dev/owner/repo
Screen reader mode works exactly as it does in desktop VS Code (toggle with Shift+Alt+F1)

Where it works

Repository home pages
File view pages
Pull request pages
Any branch or commit view

Screen reader note: The period key shortcut is a single keypress - no modifier keys. It is GitHub's universal "open this in VS Code" command.

Alternative: Press > (Shift+Period) to open github.dev in a new tab. This preserves your GitHub page and is the preferred method when you want to keep both interfaces open.

Method 2: Direct URL

Change the domain in any GitHub URL:

github.com/owner/repo becomes github.dev/owner/repo
Works for any branch, file, or commit URL

Method 3: From the Repository Page

Visual / mouse users

Click the green Code button on any repository page
In the dropdown, click Open with github.dev

Screen reader users (NVDA / JAWS / VoiceOver)

Navigate to the Code button (press B or Tab until you hear "Code, button" or similar)
Press Enter to open the dropdown menu
Press Down Arrow to reach "Open with github.dev"
Press Enter

What You Get in github.dev

Everything in the list below works exactly like desktop VS Code:

Full text editor with syntax highlighting
All VS Code keyboard shortcuts (see Section 11: Keyboard Shortcuts Editor and Appendix M)
Screen reader mode (Shift+Alt+F1 to activate - Mac: Shift+Option+F1)
File Explorer (Ctrl+Shift+E - Mac: Cmd+Shift+E) - browse the entire repository
Search across files (Ctrl+Shift+F - Mac: Cmd+Shift+F)
Source Control (Git) (Ctrl+Shift+G - Mac: Cmd+Shift+G) - stage, commit, push changes
Markdown preview (Ctrl+Shift+V - Mac: Cmd+Shift+V)
Command Palette (Ctrl+Shift+P - Mac: Cmd+Shift+P) - access every VS Code command
Go to File (Ctrl+P - Mac: Cmd+P) - instant file picker
Go to Symbol (Ctrl+Shift+O - Mac: Cmd+Shift+O) - navigate by headings in Markdown
Multiple editor tabs and split view
Settings sync - if you sign in, your VS Code settings apply here too

What github.dev Does NOT Have

No terminal - cannot run shell commands, npm, git CLI
No GitHub Copilot - Copilot requires the desktop app or a Codespace
No Accessibility Agents - agents rely on extensions that need desktop VS Code
No extension installation - extensions are disabled in github.dev
No debugger - debugging requires a local environment
No live server or preview - except Markdown preview, which does work

These limitations are why desktop VS Code exists. github.dev is for quick edits and reading code. Desktop is for Copilot, agents, terminal workflows, and full development.

Why github.dev Matters for This Workshop

It is the bridge. You spend Day 1 in the GitHub browser interface. You spend Day 2 in desktop VS Code. github.dev sits in between:

Same keyboard shortcuts as desktop VS Code (you learn them once)
Same screen reader mode (you configure it once)
Same file navigation patterns (Explorer, Ctrl+P / Mac: Cmd+P, Ctrl+Shift+O / Mac: Cmd+Shift+O)
But accessible instantly from any GitHub page with one keystroke

Use github.dev when

You want to edit a file quickly without switching apps
You are on a machine where you cannot install software
You want to browse code with VS Code navigation (symbols, search, split view)
You are reviewing a PR and want to see the full file context

Use desktop VS Code when

You need Copilot inline suggestions
You want to run Accessibility Agents
You are making multi-file changes that benefit from AI assistance
You need a terminal for git commands or running scripts

Screen Reader Experience in github.dev

Activate screen reader mode immediately

Press . on any GitHub repository to open github.dev
Press Shift+Alt+F1 (Mac: Shift+Option+F1) to enable screen reader mode
VS Code announces "Screen reader optimized"

What changes

Focus behavior adjusts for keyboard navigation
Code suggestions are announced via ARIA live regions
Error messages are announced when you navigate to them
Inline decorations are suppressed to reduce noise

Navigation

Use Ctrl+Shift+E to open the Explorer (file tree)
Use Up/Down Arrow to navigate files
Press Enter on a file to open it in the editor
The editor behaves like a standard text area - your screen reader's reading commands work normally

NVDA/JAWS users

You remain in Browse/Virtual mode for the overall interface
When focus enters the editor text area, you are automatically in Forms/Focus mode
All standard cursor movement works: Home, End, Ctrl+Home, Ctrl+End, Ctrl+F to find

VoiceOver users

Quick Nav OFF when inside the editor (Left Arrow + Right Arrow to toggle)
Use VO+Shift+Down to interact with the editor area
Standard text navigation (Control+A for line start, Control+E for line end, etc.)

Try It Right Now

Before reading the rest of this guide:

Open github.com/community-access/learning-room in your browser
Press . (period key)
github.dev opens
Press Shift+Alt+F1 (Mac: Shift+Option+F1) to enable screen reader mode
Press Ctrl+Shift+E (Mac: Cmd+Shift+E) to open the Explorer
Navigate to README.md and press Enter
Press Ctrl+Home (Mac: Cmd+Up) to go to the top of the file
Press Ctrl+Shift+O (Mac: Cmd+Shift+O) to see the outline (all headings)
Close the tab when done

You just used VS Code. The desktop version in the rest of this guide is the same experience - with Copilot, agents, and a terminal added.

3. Screen Reader Mode in VS Code

Who needs this section? If you use NVDA, JAWS, VoiceOver, or another screen reader, read this section before continuing. If you are not using a screen reader, you can skip to Section 4 - VS Code works fully without enabling this mode.

VS Code has built-in accessibility support designed for screen reader users. It changes how focus moves, how announcements work, and how navigation behaves.

Activating Screen Reader Mode

Method	Steps
Keyboard shortcut	`Shift+Alt+F1` (Windows) / `Shift+Option+F1` (Mac)
Command Palette	`Ctrl+Shift+P` (Windows) / `Cmd+Shift+P` (Mac) then type "screen reader" then select "Toggle Screen Reader Accessibility Mode"
Auto-detection	VS Code detects NVDA and JAWS automatically on Windows; VoiceOver on macOS

Verify it is active

Open Settings (Ctrl+, - Mac: Cmd+,) then search for accessibility support then confirm it shows on (not auto).

What Changes in Screen Reader Mode

Area	Normal Mode	Screen Reader Mode
Suggestions list	Popup overlay	Announced via ARIA live region
Diff navigation	Visual highlighting	Announces "Added" / "Removed" before line content
Error indicators	Red underlines	Announced on focus
Inline decorations	Displayed visually	Suppressed to reduce noise
Tab completion	Visual ghost text	Announced as suggestion

NVDA-Specific Settings for VS Code

VS Code uses a web-based renderer. Configure NVDA for best results:

Open NVDA Menu then Preferences then Settings then Browse Mode
Set "Maximum length of text on a single line" to 10000 (prevents truncation in long lines)
Under Object Presentation: set "Report tooltip delay" to off
Recommended: use NVDA + Google Chrome for the integrated browser panels

JAWS-Specific Settings for VS Code

JAWS should detect VS Code automatically and switch to PC Cursor mode for the editor
If the editor feels unresponsive, press Insert+Z to toggle virtual cursor off
For the integrated terminal: use Insert+Z to enter forms/PC mode, then interact with the terminal

VoiceOver-Specific Settings for VS Code (macOS)

Open VS Code then Shift+Alt+F1 (Mac: Shift+Option+F1) to confirm screen reader mode
In VoiceOver Utility: Verbosity then set "Punctuation" to "All" for reading code
Use Quick Nav OFF (Left+Right Arrow) when inside the editor - standard cursor navigation is more predictable
Use VO+Shift+Down to interact with the editor, VO+Shift+Up to stop interacting

4. The VS Code Interface Tour

Before diving into individual features, here is how VS Code is organized. Every area is reachable by keyboard.

The Five Major Regions

+----------------------------------------------------------+
|  Menu Bar (File, Edit, View, Go, Run, Terminal, Help)    |
+------+---------------------------------------------------+
|      |                                                    |
| A    |  Editor Area                                       |
| c    |  (your files open here)                            |
| t    |                                                    |
| i    |                                                    |
| v    |                                                    |
| i    +---------------------------------------------------+
| t    |                                                    |
| y    |  Panel (Terminal, Problems, Output, Debug Console) |
|      |                                                    |
| B    +---------------------------------------------------+
| a    |  Status Bar (line, column, language, Git branch,   |
| r    |   Copilot status, encoding, notifications)         |
+------+---------------------------------------------------+

Text description of the layout above: VS Code has five major regions arranged in a grid. The Menu Bar spans the full width across the top. Below it, the Activity Bar runs vertically along the left edge (it contains icons for Explorer, Source Control, Search, Extensions, and more). The Sidebar appears to the right of the Activity Bar and shows content for the selected activity (file tree, search results, etc.). The Editor Area fills the large central region where your files open. Below the Editor Area, the Panel stretches across the bottom and contains the Terminal, Problems, Output, and Debug Console tabs. Finally, the Status Bar runs along the very bottom showing line number, column, language mode, Git branch, Copilot status, encoding, and notifications.

Navigating Between Regions

Region	Keyboard Shortcut	What You Hear (Screen Reader)
Activity Bar icons	`Ctrl+Shift+E` / `G` / `F` / `X` / etc.	"Explorer", "Source Control", etc.
Sidebar content	Follows activity bar selection	Tree view or list content
Editor area	`Ctrl+1` (first editor group)	File name and cursor position
Panel	`Ctrl+Backtick` (terminal) or `Ctrl+Shift+M` (problems)	Panel name announcement
Status Bar	`F6` cycles through regions	Status bar items read left to right

Key insight: Press F6 repeatedly to cycle focus through the major regions: Sidebar, Editor, Panel, Status Bar, and back. This is the universal "where am I, take me somewhere else" key in VS Code.

Learning Cards: Finding Your Way Around VS Code

Screen reader users (NVDA / JAWS / VoiceOver)

F6 is your best friend - it cycles through regions and your screen reader announces each one
Ctrl+Shift+P (Command Palette) is your safety net - type any action name and VS Code finds it
Alt+H (Accessible Help) tells you what shortcuts work in your current context
Use Ctrl+Shift+E for Explorer, Ctrl+Shift+G for Source Control, Ctrl+Shift+F for Search
The editor text area acts like a standard text field - all your screen reader reading commands work

Low vision users

Ctrl+= / Ctrl+- to zoom the entire VS Code window (all UI elements scale)
Ctrl+, then search editor.fontSize to set a comfortable default editor font size
Ctrl+, then search window.zoomLevel to set a persistent zoom level
High Contrast themes: Ctrl+K Ctrl+T then choose "High Contrast" or "High Contrast Light"
Ctrl+, then search minimap - set editor.minimap.enabled to false to remove the small code overview that may be hard to see
Ctrl+B toggles the sidebar to give the editor more space

Sighted users

Click icons in the Activity Bar (left edge) to switch sidebar views
The bottom Panel shows Terminal, Problems, Output, and Debug Console
Drag panel borders to resize regions or double-click to collapse them
Ctrl+B toggles the sidebar for a wider editor area
Ctrl+J toggles the bottom Panel
Ctrl+Shift+P opens the Command Palette - the universal search for any action

5. The Accounts Button and GitHub Sign-In

The Accounts button sits at the bottom of the Activity Bar (the vertical icon strip on the left side of VS Code). It manages your authentication with GitHub, Microsoft, and other services.

Why Sign In Matters

GitHub Copilot requires an active GitHub sign-in to function
Settings Sync requires sign-in to synchronize your preferences across machines
GitHub Pull Requests extension needs authentication to create and review PRs from VS Code
Your GitHub identity appears in commits you make from VS Code

Signing In

From the Accounts Button

Press F6 until you hear the Activity Bar, then arrow down to the Accounts button (it is at the very bottom of the bar)
Press Enter to open the Accounts menu
Select "Sign in with GitHub to use GitHub Copilot" (or a similar prompt)
A browser window opens for GitHub OAuth authorization
Authorize VS Code, then return to the editor
Your screen reader announces your GitHub username in the Accounts button

From the Command Palette

Press Ctrl+Shift+P then type sign in
Select "GitHub: Sign In"
Complete the browser OAuth flow and return to VS Code

Verifying You Are Signed In

Accounts button: Press F6 to reach the Activity Bar, arrow down to Accounts. A screen reader announces your username.
Command Palette: Ctrl+Shift+P then type GitHub Copilot: Status. If Copilot shows ready, you are signed in.
Status Bar: Look for (or hear) the Copilot icon in the status bar at the bottom of the window.

Learning Cards: GitHub Sign-In

Screen reader users

Press F6 to cycle to the Activity Bar, then Down Arrow to the bottom to find the Accounts button
After signing in, the Accounts button label changes from "Accounts" to your GitHub username
If browser OAuth does not redirect back automatically, check for a "paste this code" dialog in VS Code - type the code displayed in your browser

Low vision users

The Accounts icon is the person silhouette at the bottom of the leftmost icon column
After sign-in, a small dot or badge appears on the icon indicating active session
If the icon is hard to see, use Ctrl+Shift+P and type Accounts to manage sign-in from the Command Palette

Sighted users

Click the person icon at the bottom of the Activity Bar
A dropdown menu shows your sign-in status and available accounts
After sign-in, the icon changes to show your GitHub avatar

6. Verifying GitHub Copilot Status

GitHub Copilot is your AI pair programmer. Before starting any contribution work, confirm it is active and responding.

Where to Check Copilot Status

Status Bar Indicator

The Copilot icon appears in the Status Bar at the bottom-right of the VS Code window.

Icon State	Meaning
Copilot icon (normal)	Copilot is active and ready
Copilot icon with warning triangle	Copilot has a configuration issue
Copilot icon with slash-through	Copilot is disabled for this file type
No Copilot icon	Extension not installed or not signed in

Command Palette Check

Press Ctrl+Shift+P
Type GitHub Copilot: Status
The output shows whether Copilot is signed in, active, or has errors

Quick Test

Open any .md file in the editor
Start typing a sentence (for example, ## Getting Started with)
If Copilot is active, a gray ghost-text suggestion appears after a brief pause
Press Tab to accept or Escape to dismiss

Troubleshooting Copilot

Problem	Solution
No Copilot icon in status bar	Install the GitHub Copilot extension: `Ctrl+Shift+X` then search `GitHub Copilot` then install
Icon shows warning	Open Output panel (`Ctrl+Shift+U`), select "GitHub Copilot" from the dropdown, read the error
"Not signed in"	Sign in to GitHub (Section 5 above)
Copilot not suggesting	Check that Copilot is not disabled for the file type: `Ctrl+Shift+P` then `GitHub Copilot: Toggle`
Works on desktop but not github.dev	Expected behavior. github.dev does not support Copilot. Use desktop VS Code or a Codespace.

Learning Cards: Copilot Status

Screen reader users

The Copilot status bar item is announced when you Tab through the status bar
After sign-in, press Ctrl+Shift+P then type Copilot Status - the announcement tells you the full state
When Copilot generates a suggestion, NVDA and JAWS announce it as ghost text; press Tab to accept
Press Alt+F2 (Accessible View) to read the full Copilot suggestion in a clean text view

Low vision users

The Copilot icon is a small two-petal/sparkle icon near the right side of the Status Bar
Copilot suggestions appear as dimmed gray text ahead of your cursor - increase editor contrast or zoom level if they are hard to see
Use a High Contrast theme for clearer distinction between your text and Copilot ghost text

Sighted users

Look for the Copilot sparkle icon in the bottom-right Status Bar
Gray ghost text after your cursor means Copilot is generating a suggestion
Click the Copilot icon for a quick status menu showing enabled/disabled state

7. The Status Bar

The Status Bar is the thin strip at the bottom of the VS Code window. It provides real-time information about your workspace, file, and active tools.

What the Status Bar Contains (Left to Right)

Item	What It Shows	How to Interact
Git branch	Current branch name (e.g., `main`)	Click or press to switch branches
Sync status	Pending push/pull count	Click to sync (push/pull)
Errors and warnings	Error/warning count in workspace	Click opens Problems panel (`Ctrl+Shift+M`)
Line and column	Cursor position (e.g., `Ln 42, Col 8`)	Click opens Go to Line (`Ctrl+G`)
Indentation	Spaces or tabs and count	Click to change indent settings
Encoding	File encoding (e.g., `UTF-8`)	Click to change encoding
End of line	`LF` or `CRLF`	Click to change line endings
Language mode	File type (e.g., `Markdown`)	Click to change language
Copilot status	GitHub Copilot state	Click for Copilot menu
Notification bell	Unread notifications	Click to view notifications

Navigating the Status Bar with a Keyboard

Press F6 until your screen reader announces the Status Bar
Use Tab to move between items from left to right
Press Enter on any item to activate it (open a picker, toggle a setting, etc.)
Press Escape to return to the editor

Learning Cards: Status Bar

Screen reader users

Press F6 repeatedly until you hear "Status Bar" - then Tab through items
Each item is announced with its current value (e.g., "Ln 42, Col 8" or "main branch")
The errors/warnings item announces the count - press Enter to jump to the Problems panel
After reviewing, press Escape then Ctrl+1 to return to the editor

Low vision users

The Status Bar text is small by default - use Ctrl+= to zoom the entire window
Different-colored sections help identify areas: left side (Git/sync), center (position), right side (Copilot/language)
Status Bar background color changes in certain contexts (e.g., debugging turns it orange, no folder is purple)

Sighted users

Click any Status Bar item to interact with it
The colored background indicates context: blue (normal workspace), purple (no folder open), orange (debugging)
Hover over items for tooltips with additional detail

8. The Menu Bar

The Menu Bar runs along the top of the VS Code window and provides structured access to every command category.

Menu Bar Structure

Menu	Key Contents
File	New File, Open Folder, Save, Auto Save, Preferences (Settings, Keyboard Shortcuts, Extensions)
Edit	Undo, Redo, Cut, Copy, Paste, Find, Replace
Selection	Select All, Expand Selection, Add Cursor
View	Explorer, Search, Source Control, Extensions, Terminal, Problems, Command Palette, Appearance (zoom, sidebar, panel toggles)
Go	Go to File, Go to Symbol, Go to Line, Go to Definition, Back/Forward navigation
Run	Start Debugging, Run Without Debugging, Add Configuration
Terminal	New Terminal, Split Terminal, Run Active File, Run Selected Text
Help	Welcome, Documentation, Keyboard Shortcuts Reference, Accessibility Help

Accessing the Menu Bar

Method	Steps
Keyboard (Windows/Linux)	Press `Alt` or `F10` to focus the menu bar, then use arrow keys
Keyboard (Mac)	`Ctrl+F2` or use the system menu bar
Command Palette	`Ctrl+Shift+P` gives access to all the same commands without the menu

Learning Cards: Menu Bar

Screen reader users

Press F10 (or Alt) to enter the Menu Bar. Your screen reader announces "File" menu
Use Left/Right Arrow to move between menus (File, Edit, View, Go, Run, Terminal, Help)
Press Enter or Down Arrow to open a menu and browse items
Each menu item includes its keyboard shortcut in the announcement (e.g., "New File, Ctrl+N")
Press Escape to close and return to the editor

Low vision users

The Menu Bar respects your zoom level - increase window zoom for larger text
Menu items show keyboard shortcuts on the right side of each entry
Use the Help menu to access "Keyboard Shortcuts Reference" for a printable cheat sheet

Sighted users

Click any menu name to open its dropdown
Keyboard shortcuts are displayed to the right of each menu item
The View menu controls which panels and sidebars are visible

9. Settings Sync

Settings Sync synchronizes your VS Code configuration across multiple machines and between desktop VS Code and github.dev. When you sign in and enable sync, your settings, keyboard shortcuts, extensions, UI state, and profiles travel with you.

What Gets Synced

Category	Examples
Settings	`editor.fontSize`, `editor.accessibilitySupport`, color theme, zoom level
Keyboard Shortcuts	All custom keybindings
Extensions	Installed extensions list
UI State	Sidebar position, panel visibility, recent files
Profiles	Named collections of settings for different workflows

Enabling Settings Sync

Open the Accounts button (Activity Bar, bottom-left) or press Ctrl+Shift+P then type Settings Sync: Turn On
Sign in with your GitHub account (or Microsoft account)
Select which categories to sync (recommended: sync everything)
VS Code syncs immediately and on every subsequent change

Conflict Resolution

If settings differ between machines, VS Code shows a merge editor where you choose which version to keep. This is similar to a Git merge conflict but for settings.

Learning Cards: Settings Sync

Screen reader users

After enabling sync, all your accessibility settings (screen reader mode, accessibility signals, minimap disabled) apply on every machine
Changes sync automatically in the background - no manual action needed after initial setup
If a conflict occurs, VS Code opens a merge editor that is navigable with standard diff commands (F7 / Shift+F7)

Low vision users

Your zoom level, font size, and High Contrast theme sync across machines
After initial setup on one machine, every other VS Code instance immediately gets the same visual configuration
Use Profiles to maintain separate configurations (e.g., "Presentation" profile with extra-large fonts)

Sighted users

The sync status appears as a circular arrow icon in the Activity Bar (bottom-left, near Accounts)
Conflicts and sync status are shown via notification banners
Use Ctrl+Shift+P then "Settings Sync: Show Synced Data" to review what was synchronized

Profiles

VS Code Profiles let you create named collections of settings, extensions, keyboard shortcuts, snippets, tasks, and UI state. Each profile is independent - switching profiles changes your entire VS Code configuration instantly. This is useful when you work in different contexts (workshop vs. daily development) or need to present with different display settings.

Creating a Profile

Method	Steps
Command Palette	`Ctrl+Shift+P` then type `Profiles: Create Profile`
Gear menu	Click the gear icon (bottom-left of Activity Bar) then `Profiles` then `Create Profile`

When creating a profile, you choose what to include:

Settings - editor preferences, accessibility options, theme
Keyboard Shortcuts - all custom keybindings
Extensions - which extensions are installed and enabled
Snippets - code snippet definitions
Tasks - task runner configurations
UI State - sidebar position, panel layout, view visibility

You can start from the current configuration, an empty profile, or an existing profile template.

Switching Profiles

Method	Steps
Command Palette	`Ctrl+Shift+P` then type `Profiles: Switch Profile`
Gear menu	Click the gear icon then `Profiles` then select a profile name
Status Bar	The current profile name appears in the Status Bar when you are not using the Default profile - click it to switch

The active profile name appears in the VS Code title bar and Status Bar so you always know which configuration is active.

Workshop Profile Recommendations

Create these profiles before the workshop:

Profile Name	Purpose	Key Settings
Workshop	Accessibility-optimized for this event	Screen reader mode on, accessibility signals enabled, minimap off, word wrap on (see the Recommended Workshop Profile settings in Section 17)
Presentation	Large fonts for demos or shared screens	`editor.fontSize: 24`, `terminal.integrated.fontSize: 20`, `window.zoomLevel: 2`, High Contrast theme
Default	Your everyday development settings	Whatever you normally use

Exporting and Sharing Profiles

Profiles can be exported and shared:

Ctrl+Shift+P then type Profiles: Export Profile
Choose what to include (settings, extensions, etc.)
Export as a GitHub gist (shareable link) or a local file
Share the link or file with others

To import: Ctrl+Shift+P then Profiles: Import Profile and paste the gist URL or select the file.

Workshop tip: Facilitators can export a pre-configured Workshop profile as a GitHub gist and share the link. Students import it in one step and immediately have all accessibility settings configured.

Profiles and Settings Sync

Profiles sync across machines through Settings Sync. When you create a profile on one machine and have Settings Sync enabled, the profile appears on every other machine where you are signed in. Each profile syncs independently - changes to one profile do not affect others.

Learning Cards: Profiles

Screen reader users

The Command Palette is the fastest way to switch profiles: Ctrl+Shift+P then type Switch Profile
Your screen reader announces the profile name when you switch - listen for the confirmation
Create a Workshop profile with editor.accessibilitySupport: "on" and all your accessibility signals configured, so you can switch to it instantly at the start of each session
The Default profile is always available as a fallback

Low vision users

Create a Presentation profile with large fonts, high zoom, and a High Contrast theme for pair programming or demos
Switching profiles changes everything at once - no need to adjust multiple settings individually
The current profile name in the title bar confirms which configuration is active

Sighted users

The gear icon in the Activity Bar (bottom-left) provides quick access to profile management
Profile names appear in the title bar so you always know your current context
Export your team's recommended profile as a GitHub gist for easy onboarding

10. The Settings Editor

The Settings Editor is where you customize VS Code. There are two views: the graphical settings UI and the raw settings.json file.

Opening the Settings Editor

Method	Shortcut
Graphical Settings UI	`Ctrl+,` (Mac: `Cmd+,`)
JSON Settings file	`Ctrl+Shift+P` then type "Open User Settings (JSON)"

Navigating the Settings Editor

The graphical Settings UI has a search box at the top. Type any keyword and the settings list filters instantly.

Special Search Filters

Filter	What It Shows
`@modified`	Only settings you have changed from their defaults
`@tag:accessibility`	All accessibility-related settings
`@tag:advanced`	Advanced, less commonly used settings
`@tag:experimental`	Experimental features not yet enabled by default
`@ext:github.copilot`	Settings for the GitHub Copilot extension

Key Accessibility Settings to Configure

{
  "editor.accessibilitySupport": "on",
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.renderWhitespace": "none",
  "editor.fontSize": 16,
  "accessibility.signals.lineHasError": "on",
  "accessibility.signals.taskCompleted": "on",
  "accessibility.signals.chatResponseReceived": "on"
}

Learning Cards: Settings Editor

Screen reader users

Press Ctrl+, to open Settings. Focus lands in the search box - start typing immediately
Type @tag:accessibility to see all accessibility settings grouped together
Each setting is a form control (checkbox, dropdown, or text input) - use standard form navigation
For direct JSON editing: Ctrl+Shift+P then "Open User Settings (JSON)" - this gives you a standard text editor

Low vision users

Search for editor.fontSize to set your preferred font size for the code editor
Search for window.zoomLevel to set the overall window zoom (affects all UI)
Search for theme to switch to High Contrast or High Contrast Light themes
The gear icon has a checkmark for modified settings, making it easy to spot what you have changed

Sighted users

Click the gear icon in the bottom-left corner, then select "Settings"
Use the search box to filter thousands of settings down to what you need
The "Modified" indicator (blue bar) shows which settings you have customized
Use the tabs at the top to switch between User settings (global) and Workspace settings (per-project)

11. The Keyboard Shortcuts Editor

The Keyboard Shortcuts Editor lets you view, search, and customize every keyboard shortcut in VS Code.

Opening the Keyboard Shortcuts Editor

Method	Shortcut
Graphical editor	`Ctrl+K Ctrl+S`
JSON editor	`Ctrl+Shift+P` then type "Open Keyboard Shortcuts (JSON)"
From Menu Bar	File then Preferences then Keyboard Shortcuts

Searching for Shortcuts

The editor has a search box that supports:

Command name: Type toggle terminal to find the terminal toggle shortcut
Keystroke recording: Click the keyboard icon (or press the record keys button) to record a key combination and find what it does
When clause: Find shortcuts that only apply in specific contexts

Customizing a Shortcut

Find the command in the list
Double-click the keybinding column (or press Enter on the row, then Enter again on the keybinding)
Press your desired key combination
Press Enter to confirm

Learning Cards: Keyboard Shortcuts Editor

Screen reader users

Press Ctrl+K Ctrl+S to open the Keyboard Shortcuts Editor. Focus lands in the search box.
The results list is a table. Each row announces: Command name, Keybinding, When clause, and Source.
Navigate rows with Up/Down Arrow. Press Enter to edit a keybinding.
Tip: search for accessibility to find all accessibility-related shortcuts at once.

Low vision users

The shortcut editor is a searchable, sortable table - zoom in as needed
The Source column shows whether a shortcut is from Default, User, or an Extension
Use the record keys feature to check what any key combination currently does

Sighted users

Press Ctrl+K Ctrl+S to open the visual editor
Click the keyboard icon in the search bar to record a keystroke and find its binding
Right-click any row for options to change, remove, or reset a keybinding

12. Essential Keyboard Navigation and Find/Filter

Panels and Areas

Mac users: Substitute Cmd for Ctrl and Option for Alt in all shortcuts below.

Area	Shortcut (Windows)	What Gets Focus
Explorer (file tree)	`Ctrl+Shift+E`	Folder/file list
Search	`Ctrl+Shift+F`	Search input
Source Control (Git)	`Ctrl+Shift+G`	Changes list
Extensions	`Ctrl+Shift+X`	Extensions list
Terminal	Ctrl+`	Terminal input
Copilot Chat	`Ctrl+Shift+I`	Chat input
Command Palette	`Ctrl+Shift+P`	Command search input
Editor	`Ctrl+1`	Active editor file
Problems panel	`Ctrl+Shift+M`	List of all errors and warnings

Within the Editor

Action	Shortcut
Go to beginning of file	`Ctrl+Home`
Go to end of file	`Ctrl+End`
Go to line N	`Ctrl+G` then type line number
Go to line and column	`Ctrl+G` then type `N:C` (e.g., `10:5`)
Go to symbol (heading in Markdown)	`Ctrl+Shift+O`
Go to definition	`F12`
Find in file	`Ctrl+F`
Next find result	`F3`
Previous find result	`Shift+F3`
Next error or warning	`F8`
Previous error or warning	`Shift+F8`
Open file by name	`Ctrl+P` then type filename
Toggle word wrap	`Alt+Z`
Toggle Tab focus mode	`Ctrl+M` (makes Tab move focus instead of indenting)
Increase/decrease font size	`Ctrl+=` / `Ctrl+-`
Breadcrumb navigation	`Ctrl+Shift+;` then arrow keys to navigate path segments

Find in Current File (`Ctrl+F`)

When the Find widget opens, three toggle buttons refine what matches:

Toggle	Shortcut	What It Does
Match Case	`Alt+C`	Limits results to exact uppercase/lowercase
Match Whole Word	`Alt+W`	Matches full words only, not substrings
Use Regular Expression	`Alt+R`	Enables regex patterns in the search box

Screen reader interactions inside the Find widget

Toggles are announced as checkboxes - press Space to toggle each one
Match count is announced as you type (example: 3 of 12 matches)
F3 / Shift+F3 move through matches while the widget stays open
Escape closes the widget and returns focus to your last cursor position

Replace (Ctrl+H): Opens the Find widget with a second input for the replacement text.

Ctrl+Shift+1 - replace the current match
Ctrl+Alt+Enter - replace all matches at once

Global Search Across the Workspace (`Ctrl+Shift+F`)

The global Search panel has a rich filtering system - all keyboard-accessible:

Action	How
Open global search	`Ctrl+Shift+F`
Search input	Focus lands here automatically - type your query
Toggle case / word / regex	`Alt+C`, `Alt+W`, `Alt+R` (same as Find)
Include files filter	`Tab` to "files to include" field then type glob patterns
Exclude files filter	`Tab` to "files to exclude" field then type glob patterns
Collapse all results	`Ctrl+Shift+J`
Open a result	Navigate the result tree with `Up/Down Arrow` then `Enter` to open

Glob pattern examples for this workshop

docs/*.md          - all Markdown files in the docs folder
*.agent.md         - all agent definition files
.github/**         - everything inside the .github folder
!node_modules/**   - exclude node_modules folder

Type-to-Filter in Tree Views

In the Explorer file tree and the Source Control changes list, type characters to narrow visible items:

Focus the Explorer (Ctrl+Shift+E)
Start typing a filename - a filter input appears at the bottom of the tree
The tree instantly narrows to matching files
Press Escape to clear the filter and restore full view

Go to Symbol with Inline Filtering (`Ctrl+Shift+O`)

In any Markdown file, Ctrl+Shift+O opens a symbol picker populated by every heading. Type to narrow the list, then press Enter to jump.

Explorer (File Tree) Navigation

Action	Key
Navigate items	`Up/Down Arrow`
Expand folder	`Right Arrow`
Collapse folder	`Left Arrow`
Open file	`Enter`
Rename file	`F2`
Delete file	`Delete`
New file	`Ctrl+N` (then save with `Ctrl+S`)

13. The Problems Panel

The Problems panel (Ctrl+Shift+M) shows all errors, warnings, and informational messages from linters, compilers, and extensions for every open file in your workspace.

Opening the Problems Panel

Keyboard: Ctrl+Shift+M
Status Bar: Click the errors/warnings count (bottom-left of window)
Menu Bar: View then Problems
From the editor: Press F8 to jump to the next problem (cycles through errors in the current file)

Navigating Problems

Action	Shortcut
Open Problems panel	`Ctrl+Shift+M`
Next problem in editor	`F8`
Previous problem in editor	`Shift+F8`
Filter problems	Type in the filter box at the top of the panel
Jump to problem source	`Enter` on a problem row

Understanding Problem Entries

Each entry shows:

Severity icon: Error (red circle with X), Warning (yellow triangle), Info (blue circle with i)
Message: Description of the problem
Source: Which tool reported it (e.g., "markdownlint", "eslint", "Pylance")
File and line: Where the problem is located

Learning Cards: Problems Panel

Screen reader users

Press Ctrl+Shift+M to focus the Problems panel. Your screen reader announces the total count.
Each problem is read as: severity, message, source, file name, and line number
Press Enter on any problem to jump directly to that line in the editor
Use F8 / Shift+F8 from inside the editor to cycle through problems without opening the panel
The status bar errors/warnings count updates in real time and is announced when you Tab to it

Low vision users

Problems are color-coded: red for errors, yellow for warnings, blue for info
The errors/warnings count in the Status Bar gives a quick overview
Click any problem to jump to the exact file and line
Filter the panel by typing keywords to reduce visual noise

Sighted users

The Problems panel is in the bottom Panel area alongside Terminal and Output
Red squiggly underlines in the editor correspond to problems in this panel
Click any problem to navigate to its location
Use the filter and severity toggles to focus on what matters

14. The Terminal

VS Code includes a fully featured integrated terminal. You can run shell commands, Git operations, and scripts without leaving the editor.

Opening and Managing Terminals

Action	Shortcut
Toggle terminal	Ctrl+` (backtick)
New terminal	Ctrl+Shift+`
Split terminal	`Ctrl+Shift+5`
Next terminal	Focus terminal then `Ctrl+PageDown`
Previous terminal	Focus terminal then `Ctrl+PageUp`
Kill terminal	Type `exit` or use the trash icon

Terminal Shell Integration

VS Code's shell integration enhances the terminal with:

Command decoration marks - visual indicators showing where each command started and whether it succeeded or failed
Run recent command (Ctrl+R in terminal) - VS Code's quick pick of your recent commands, searchable by name
Terminal IntelliSense (Ctrl+Space) - completion suggestions for shell commands, file paths, and arguments

Enable Terminal IntelliSense: Settings (Ctrl+,) then search terminal.integrated.suggest.enabled then set to on.

Terminal Accessibility

Feature	How to Access
Accessible Help in terminal	`Alt+H` while terminal is focused
Navigate terminal output lines	`Alt+Ctrl+PageUp` / `Alt+Ctrl+PageDown`
Select terminal output	`Shift+Arrow keys` while in the terminal
Minimum contrast ratio	Settings then search `terminal.integrated.minimumContrastRatio` (default: 4.5 for WCAG AA)

Learning Cards: Terminal

Screen reader users

Press Ctrl+` to toggle the terminal. Your screen reader announces "Terminal" and the shell prompt.
The terminal acts like a standard text input - type commands and press Enter
Press Alt+H while in the terminal for a full list of terminal-specific keyboard shortcuts
Use Ctrl+R to open the "Run Recent Command" picker - a searchable list of your recent commands
Terminal Navigation Mode: Commands for moving between lines help when reviewing output with a screen reader.

Low vision users

VS Code enforces a minimum contrast ratio (4.5:1 by default) for terminal text
Increase terminal font size: Settings then search terminal.integrated.fontSize
Terminal themes inherit from your VS Code color theme - High Contrast themes apply here too
Use Ctrl+= / Ctrl+- to zoom the entire window including the terminal

Sighted users

The terminal appears in the bottom Panel - drag the top border to resize
Click the + icon to create new terminals, the split icon to split, the trash icon to close
Right-click in the terminal for copy/paste and other context menu options
Multiple terminal tabs let you keep different shells open simultaneously

15. Copilot Chat Window

The Copilot Chat window (Ctrl+Shift+I) is your conversational AI assistant within VS Code. It can answer questions, generate code, explain code, fix problems, and help with documentation.

Opening Copilot Chat

Method	Shortcut
Chat view (sidebar)	`Ctrl+Shift+I`
Inline chat (in editor)	`Ctrl+I`
Quick chat (floating)	`Ctrl+Shift+Alt+L`
Command Palette	`Ctrl+Shift+P` then type `Chat: Open`

Chat Modes

Mode	What It Does
Ask	Question-answer mode - explain code, answer questions, generate snippets
Edit	Multi-file editing mode - Copilot proposes edits across your workspace
Agent	Autonomous mode - Copilot can run terminal commands, create files, and perform complex tasks

Switch modes using the mode picker at the top of the Chat view, or use keyboard shortcuts:

workbench.action.chat.openAsk - Ask mode
workbench.action.chat.openEdit - Edit mode
workbench.action.chat.openAgent - Agent mode

Using Chat Participants

Type @ in the chat input to see available participants:

@workspace - Ask questions about your entire codebase
@vscode - Ask about VS Code settings and features
@terminal - Run commands or explain terminal output

Learning Cards: Copilot Chat

Screen reader users

Press Ctrl+Shift+I to open Chat. Focus lands in the text input - start typing your question.
After submitting, wait for the response to complete (audio cue plays if accessibility.signals.chatResponseReceived is on)
Press Alt+F2 (Accessible View) to read the complete response in a clean, navigable text view
Navigate response content with Up/Down Arrow in the Accessible View
Press Escape to return to the chat input for follow-up questions

Low vision users

The Chat view appears in the sidebar and respects your zoom level and font settings
Copilot responses include syntax-highlighted code blocks
Use Ctrl+I for inline chat that appears right where your cursor is in the editor
Resize the Chat panel by dragging its border for a comfortable reading width

Sighted users

Click the Copilot icon in the sidebar or use Ctrl+Shift+I
Code blocks in responses have a "Copy" button and an "Insert at Cursor" button
The mode picker at the top lets you switch between Ask, Edit, and Agent modes
Use @workspace to ask questions about your specific project context

16. Accessible Help, Accessible View, and Accessible Diff

VS Code has a family of purpose-built accessibility features that give screen reader users complete, structured access to content that is otherwise conveyed visually or through dynamic regions. These three are the most important to know before working with Copilot and diffs.

16.1 Accessible Help - Context-Aware Keyboard Guide

Every interactive area of VS Code - the editor, the terminal, the diff view, the Copilot Chat panel - has its own keyboard commands. Accessible Help surfaces those commands in a plain-text, fully readable dialog, tailored to exactly where your focus is right now.

How to open Accessible Help

Context	Shortcut
Inside the editor	`Alt+H`
Inside the terminal	`Alt+H`
Inside a diff view	`Alt+H`
Inside Copilot Chat	`Alt+H`
Any VS Code widget	`Alt+H`

The dialog is announced with a heading and a complete list of keyboard shortcuts for that specific widget. Navigate with Up/Down Arrow. Press Escape to dismiss and return focus to where you were.

Why this matters: You do not need to memorize every shortcut in every panel. Open Accessible Help in any unfamiliar area and VS Code will tell you exactly what you can do there. It is the built-in answer to "what can I press from here?"

Example output when pressing `Alt+H` in the editor

Accessible Help: Editor

Press F8 to jump to the next error or warning.
Press Shift+F8 to jump to the previous error or warning.
Press Ctrl+Shift+M to open the Problems panel.
Press F12 to go to a definition.
Press Alt+F12 to peek a definition inline.
Press Ctrl+Shift+O to go to a symbol in this file.
Press Alt+F2 to open the Accessible View.
Press Alt+H to view this help content again.

Use Accessible Help as your first action whenever you land somewhere new in VS Code.

16.2 Accessible View - Reading Dynamic and Streamed Content

Accessible View (Alt+F2) gives screen reader users a clean, static, fully readable version of content that is otherwise presented dynamically, in tooltips, or in streaming form.

How to open Accessible View

Shortcut	When to Use
`Alt+F2`	Open Accessible View for the currently focused element
`Escape`	Close Accessible View and return to the editor

What Accessible View provides

Content Type	Without Accessible View	With Accessible View (`Alt+F2`)
Copilot Chat response	Fragmented - announced as tokens stream in	Full complete response, read sequentially with Arrow keys
Inline Copilot suggestion	Ghost text - may not be announced	Announced as "Suggestion: [full text]"
Hover documentation	Popup tooltip - announced only briefly	Full content, fully navigable with Arrow keys
Error / warning details	On-focus message only	Full error text, error code, and suggested fix
Terminal output	May be truncated by live region limits	Full output in review mode with scroll
Notification banners	Announced once and dismissed	Persistent readable content until you close it

Recommended workflow for Copilot Chat

Type your prompt in the Chat input
Wait for the response to finish (NVDA: live region announcements stop; JAWS: typing indicator disappears; VoiceOver: busy state clears)
Press Alt+F2 - Accessible View opens with the complete response
Navigate with Up/Down Arrow through the response
Press Escape to return to the chat input

16.3 Accessible Diff Viewer - Reading Changes Without Visual Scanning

When you open a file diff - in Source Control, in the GitHub PR extension, or during a merge conflict - VS Code normally shows it as a side-by-side or inline visual view. For screen reader users, tracking which lines changed and how can be difficult without a structured reading mode.

The Accessible Diff Viewer presents the same diff as a plain, navigable list of changed lines - organized by hunk, labeled by change type (added, removed, unchanged), with the line number announced for each line.

How to open the Accessible Diff Viewer

Shortcut	What Happens
`F7`	Move to the next diff hunk (from within the diff editor)
`Shift+F7`	Move to the previous diff hunk
Command Palette	`Ctrl+Shift+P` then type "Open Accessible Diff Viewer"

What the Accessible Diff Viewer announces

For each hunk (a block of related changes), the viewer announces:

The hunk number and total hunk count (Hunk 2 of 5)
The line range affected
Each line, prefixed with its change type:

Hunk 1 of 3 - lines 12 to 18
  Unchanged: ## Screen Reader Cheat Sheet
- Line removed: > Quick reference for NVDA users.
+ Line added: > Quick reference for NVDA, JAWS, and VoiceOver users.
  Unchanged:
  Unchanged: Use this document during the workshop.

This gives you the complete picture of what changed, in reading order, without visual diff scanning.

Practical uses during this workshop

Before approving a PR: Open the diff then F7 to enter the first hunk then navigate each change then F7 for next hunk then repeat until all hunks reviewed
During a merge conflict: The conflict markers (<<<<<<<, =======, >>>>>>>) appear as lines in the viewer - you can read both conflicting versions before deciding which to keep
After Copilot generates an edit: Open the diff (Ctrl+Shift+G then navigate to the changed file then Enter) then review exactly what Copilot changed vs. what was there before

Audio cues for diffs

With accessibility.signals.diffLineInserted and accessibility.signals.diffLineDeleted both set to on in Settings, VS Code plays a distinct tone when your cursor moves over an added line (higher pitched) or a removed line (lower pitched). You receive change-type information through sound before the line text is announced.

17. Accessibility Signals

VS Code communicates editor state through Accessibility Signals -- non-verbal cues that tell you what is happening as you move through code, run commands, and interact with Copilot. Signals replaced the older "Audio Cues" system (deprecated since VS Code 1.85) and are significantly more powerful.

Official documentation: VS Code Accessibility -- Accessibility Signals

How Signals Work: The Dual-Channel Architecture

Every accessibility signal has two independent channels that you control separately:

Channel	What It Does	Who Benefits
Sound	Plays a short audio tone	Everyone -- sighted users, low vision users, and screen reader users all benefit from audio feedback
Announcement	Sends a status message that screen readers and braille displays announce	Primarily screen reader and braille users

Each channel accepts one of these values:

Value	Meaning
`"on"`	Always enabled regardless of screen reader state
`"off"`	Always disabled
`"auto"`	Enabled only when VS Code detects a screen reader (default for most announcement channels)
`"userGesture"`	Enabled only when the user explicitly triggers the action (used by Save and Format signals to avoid noise from auto-save)

This means you can enable sounds for everyone while keeping announcements on auto so they only fire when a screen reader is attached. Or you can turn on announcements without sounds. Full independent control.

Discovering Signals: The Two Essential Commands

VS Code provides two commands that let you browse every available signal, hear what each one sounds like, and toggle them on or off without editing settings.json:

Command (Command Palette `Ctrl+Shift+P`)	What It Does
Help: List Signal Sounds	Opens a picker listing every signal sound. As you arrow through the list, each sound plays so you can hear it. Press `Enter` to toggle the selected signal on or off.
Help: List Signal Announcements	Same experience for announcement messages. Arrow through the list to hear the announcement text read by your screen reader, then toggle.

These are the fastest way to configure signals. You do not need to memorize setting names.

Screen reader users

The Help: List Signal Announcements command is especially valuable. It lists every announcement message VS Code can send to your screen reader. Arrow through the list -- your screen reader reads each announcement label. Press Enter to toggle. This is faster than searching through Settings and ensures you hear the exact phrasing VS Code will use.

Low vision users

Even if you do not use a screen reader, signal sounds add a valuable audio layer. When you land on an error line, a distinct error tone plays before you even read the squiggly underline. When a terminal command finishes, a completion chime saves you from watching the terminal. Open Help: List Signal Sounds to preview and enable the ones that help your workflow.

Sighted users

Signal sounds are not just for accessibility -- they improve any workflow. Enable taskCompleted and taskFailed to know when builds finish while you are reading documentation in another tab. Enable chatResponseReceived to hear when Copilot finishes generating while you work in a different file. Open Help: List Signal Sounds to hear what each one sounds like.

Volume Control

Control signal volume independently from your system volume:

Setting	Range	Default	Purpose
`accessibility.signalOptions.volume`	0 -- 100	50	Master volume for all accessibility signal sounds

Set this in Settings (Ctrl+,) by searching "signal volume" or add it to settings.json:

{
  "accessibility.signalOptions.volume": 70
}

Complete Signal Reference

VS Code registers 30+ accessibility signals organized into categories. The tables below list every signal, its setting key, the sound it plays, and whether it supports announcements.

Editor Signals

These fire when your cursor moves to a line or position with a specific marker:

Setting Key	Fires When	Sound	Announcement
`accessibility.signals.lineHasError`	Cursor moves to a line containing an error	Error tone	"Error on Line"
`accessibility.signals.lineHasWarning`	Cursor moves to a line containing a warning	Warning tone (lower pitch)	"Warning on Line"
`accessibility.signals.positionHasError`	Cursor moves to the exact position of an error	Error tone	"Error"
`accessibility.signals.positionHasWarning`	Cursor moves to the exact position of a warning	Warning tone	"Warning"
`accessibility.signals.lineHasFoldedArea`	Cursor moves to a line with a collapsed/folded region	Folded area tone	"Folded"
`accessibility.signals.lineHasBreakpoint`	Cursor moves to a line with a breakpoint	Break tone	"Breakpoint"
`accessibility.signals.lineHasInlineSuggestion`	Cursor moves to a line with a Copilot ghost text suggestion	Quick fix tone	--
`accessibility.signals.nextEditSuggestion`	Next Edit Suggestion appears on the line	Next edit tone	"Next Edit Suggestion"
`accessibility.signals.noInlayHints`	Cursor is on a line with no inlay hints	Error tone	"No Inlay Hints"

Line vs Position signals: The lineHasError signal fires once when your cursor enters the line. The positionHasError signal fires when the cursor reaches the exact character where the error starts. Both can be enabled simultaneously for layered feedback.

Diff Signals

These fire when navigating changes in the diff editor or reviewing pull requests:

Setting Key	Fires When	Sound
`accessibility.signals.diffLineInserted`	Cursor moves over an added (green) line	Inserted tone (higher pitch)
`accessibility.signals.diffLineDeleted`	Cursor moves over a removed (red) line	Deleted tone (lower pitch)
`accessibility.signals.diffLineModified`	Cursor moves over a modified line	Modified tone

These are critical for pull request review. You hear the type of change before reading the content.

Terminal Signals

Setting Key	Fires When	Sound	Announcement
`accessibility.signals.terminalBell`	Terminal sends a bell character	Bell tone	--
`accessibility.signals.terminalQuickFix`	Terminal detects a quick fix suggestion	Quick fix tone	"Quick Fix"
`accessibility.signals.terminalCommandSucceeded`	A terminal command exits successfully	Command succeeded tone	--
`accessibility.signals.taskCompleted`	A VS Code Task finishes successfully	Task completed tone	--
`accessibility.signals.taskFailed`	A VS Code Task exits with an error	Task failed tone	--

Workshop tip: Enable taskCompleted and taskFailed immediately. When you run git push or npm test in the terminal, you hear whether it succeeded without switching back to the terminal panel.

Chat and Copilot Signals

Setting Key	Fires When	Sound	Announcement
`accessibility.signals.chatRequestSent`	You send a message to Copilot Chat	Request sent tone	--
`accessibility.signals.chatResponsePending`	Copilot is generating a response (loops)	Progress tone	--
`accessibility.signals.chatResponseReceived`	Copilot finishes generating	One of 4 random response tones	--
`accessibility.signals.chatEditModifiedFile`	Copilot Edits modifies a file in your workspace	Modified file tone	--
`accessibility.signals.chatUserActionRequired`	Copilot needs you to take an action (accept/reject)	Action required tone	--
`accessibility.signals.editsKept`	You accept Copilot's suggested edits	Edits kept tone	--
`accessibility.signals.editsUndone`	You reject/undo Copilot's suggested edits	Edits undone tone	--

Why four response sounds? chatResponseReceived plays a randomly chosen variant each time (responseReceived1 through responseReceived4). This prevents habituation -- your brain stays alert to the signal instead of filtering it out after hearing the same sound repeatedly. This is an intentional accessibility design pattern.

Debug Signals

Setting Key	Fires When	Sound	Announcement
`accessibility.signals.onDebugBreak`	Debugger stops on a breakpoint	Break tone	"Breakpoint"

Editor Action Signals

These fire on user-triggered actions and use the "userGesture" value to distinguish manual saves from auto-saves:

Setting Key	Fires When	Sound
`accessibility.signals.save`	File is saved	Save tone
`accessibility.signals.format`	File is formatted	Format tone
`accessibility.signals.clear`	Terminal or output is cleared	Clear tone

Set these to "userGesture" rather than "on" if auto-save is enabled, to avoid a sound on every keystroke pause:

{
  "accessibility.signals.save": {
    "sound": "userGesture",
    "announcement": "off"
  }
}

Voice Signals

Setting Key	Fires When	Sound
`accessibility.signals.voiceRecordingStarted`	Voice dictation begins	Recording started tone
`accessibility.signals.voiceRecordingStopped`	Voice dictation ends	Recording stopped tone

Code Action Signals

Setting Key	Fires When	Sound
`accessibility.signals.codeActionTriggered`	A code action (quick fix, refactor) is triggered	Code action triggered tone
`accessibility.signals.codeActionApplied`	A code action is applied to the code	Code action applied tone

Debounce Settings for Position Signals

When you hold an arrow key and your cursor moves rapidly through lines, position-based signals (error/warning at position) could fire dozens of times per second. VS Code debounces these by default:

Setting	Default	Purpose
`accessibility.signalOptions.debouncePositionChanges`	`true`	Enable position signal debouncing
`accessibility.signalOptions.experimental.delays.errorAtPosition`	`{ sound: 300, announcement: 3000 }`	Millisecond delay before error-at-position fires
`accessibility.signalOptions.experimental.delays.warningAtPosition`	`{ sound: 300, announcement: 3000 }`	Millisecond delay before warning-at-position fires
`accessibility.signalOptions.experimental.delays.general`	`{ sound: 300, announcement: 3000 }`	Default delay for all other position-based signals

The announcement delay is intentionally longer (3 seconds) because screen reader interruptions are more disruptive than brief sounds.

Recommended Workshop Profile

Add this to your VS Code settings.json (Ctrl+Shift+P then "Preferences: Open User Settings (JSON)"):

{
  "editor.accessibilitySupport": "on",

  "accessibility.signalOptions.volume": 70,

  "accessibility.signals.lineHasError": {
    "sound": "on",
    "announcement": "auto"
  },
  "accessibility.signals.lineHasWarning": {
    "sound": "on",
    "announcement": "auto"
  },
  "accessibility.signals.lineHasFoldedArea": {
    "sound": "on",
    "announcement": "auto"
  },
  "accessibility.signals.lineHasBreakpoint": {
    "sound": "on",
    "announcement": "auto"
  },
  "accessibility.signals.taskCompleted": {
    "sound": "on",
    "announcement": "auto"
  },
  "accessibility.signals.taskFailed": {
    "sound": "on",
    "announcement": "auto"
  },
  "accessibility.signals.terminalCommandSucceeded": {
    "sound": "on",
    "announcement": "off"
  },
  "accessibility.signals.chatResponseReceived": {
    "sound": "on",
    "announcement": "auto"
  },
  "accessibility.signals.diffLineInserted": {
    "sound": "on",
    "announcement": "off"
  },
  "accessibility.signals.diffLineDeleted": {
    "sound": "on",
    "announcement": "off"
  },
  "accessibility.signals.save": {
    "sound": "userGesture",
    "announcement": "off"
  },

  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "none",
  "editor.wordWrap": "on"
}

This profile enables core sounds for everyone and sets announcements to auto so they activate only when a screen reader is detected. The save signal uses userGesture to avoid noise from auto-save. Diff signals are sound-only because rapid line navigation with announcements would overwhelm a screen reader.

Screen reader users

Focus on announcements more than sounds. Set the signals you care about most to "announcement": "on" (not just "auto") to guarantee they fire even if VS Code does not detect your screen reader. The most valuable announcements for this workshop are:

lineHasError -- "Error on Line" as you navigate code
taskCompleted / taskFailed -- know when git operations finish
chatResponseReceived -- know when Copilot is done responding
lineHasBreakpoint -- confirm breakpoint placement during debugging

Use Help: List Signal Announcements (Ctrl+Shift+P then type "List Signal Announcements") to hear and toggle each one.

Low vision users

Sounds give you status confirmation without needing to find and read small visual indicators. The most impactful signals:

lineHasError + lineHasWarning -- hear errors as you navigate instead of scanning for red/yellow squiggles
diffLineInserted + diffLineDeleted -- hear change types in pull request diffs before reading the color coding
taskCompleted + taskFailed -- audio confirmation when terminal commands finish
chatResponseReceived -- know when Copilot is done while you read other content

Raise the volume with accessibility.signalOptions.volume (try 80 or 90) if your system volume competes with screen magnification software audio.

Sighted users

Do not skip this section because you can see the screen. Signal sounds make you faster:

Build notifications: Enable taskCompleted and taskFailed. Start a build, switch to writing code, hear the chime when it finishes.
Copilot flow: Enable chatResponseReceived. Ask Copilot a question, continue editing, hear the response tone.
Error awareness: Enable lineHasError. As you type, you hear immediately when you introduce a syntax error without glancing at the Problems panel.
Code review: Enable diff signals. Arrow through a PR diff and hear inserted/deleted/modified tones. Your eyes stay on the code while your ears track the change type.

Start with Help: List Signal Sounds to preview each tone and build your personal selection.

Migrating from Legacy Audio Cues

If you previously configured the older audioCues.* settings (deprecated since VS Code 1.85), VS Code automatically maps them to the new accessibility.signals.* namespace. However, the new settings offer the dual sound/announcement structure that the old settings did not have. Review your configured signals using Help: List Signal Sounds and Help: List Signal Announcements to take advantage of the new independent controls.

Note: minimap.enabled: false in the recommended profile removes the visual minimap that adds no value for screen reader users and can cause some accessibility tools to announce additional regions.

18. VS Code Speech - Voice Input and Output

The VS Code Speech extension adds speech-to-text and text-to-speech capabilities to VS Code. All voice processing happens locally on your machine - no audio data is sent to any online service. This makes it useful for dictation, talking to Copilot Chat, and having Chat responses read aloud.

Installing VS Code Speech

Open Extensions: Ctrl+Shift+X (Mac: Cmd+Shift+X)
Search for VS Code Speech
Find VS Code Speech (publisher: Microsoft, identifier: ms-vscode.vscode-speech)
Press Enter to open the extension detail page, then Tab to "Install" and press Enter

After installation, a microphone icon appears in all Chat input fields and new voice commands become available in the Command Palette.

Microphone permissions: On macOS, go to System Settings, Privacy and Security, Microphone, and confirm Visual Studio Code is enabled. On Windows, go to Settings, Privacy and security, Microphone, and confirm that "Let desktop apps access your microphone" is on. Without this permission, voice input fails silently.

Editor Dictation - Type with Your Voice

Editor dictation lets you speak and have your words appear as text wherever your cursor is. This works in the code editor, the SCM commit input box, and the comments field when reviewing pull requests.

Action	Windows/Linux	macOS
Start dictation	`Ctrl+Alt+V`	`Cmd+Alt+V`
Stop dictation	`Escape`	`Escape`
Walky-talky mode	Press and hold `Ctrl+Alt+V`, speak, release to stop	Press and hold `Cmd+Alt+V`, speak, release to stop

When dictation is active, a small microphone icon appears at the cursor position. Speak naturally and your words are transcribed into text. Press Escape to stop.

Walky-talky mode: Press and hold the keyboard shortcut instead of tapping it. Voice recognition stays active as long as you hold the keys. When you release, dictation stops automatically. This is the fastest way to dictate a short phrase.

Screen reader users (NVDA / JAWS / VoiceOver)

When dictation starts, the accessibility signal voiceRecordingStarted plays (if configured in section 17). Your screen reader may also announce "Recording started."
Dictated text appears at the cursor position and is announced by your screen reader as it is inserted, just like typed text.
Press Escape to stop. The voiceRecordingStopped signal plays.
If you do not hear dictated text being announced, check that your screen reader is in focus mode (NVDA: Insert+Space to toggle) so it reads editor changes.

Low vision users

The microphone icon that appears at the cursor is small. At 200%+ zoom it may be hard to spot, but dictation works regardless of whether you see the icon.
Dictated text appears at your configured editor font size with full contrast - no ghost text or gray previews.
Check status bar: When dictation is active, the status bar shows a recording indicator. Press F6 to cycle to the status bar and confirm.

Voice in Copilot Chat - Talk to Copilot

Instead of typing prompts, you can speak them. This works in the Chat panel, inline chat, and quick chat.

Action	Windows/Linux	macOS
Start voice chat (auto-selects best location)	`Ctrl+I`	`Cmd+I`
Start voice in Chat panel specifically	Command Palette: "Chat: Voice Chat in Chat View"	Same
Start inline voice chat	Command Palette: "Chat: Inline Voice Chat"	Same
Start quick voice chat	Command Palette: "Chat: Quick Voice Chat"	Same

When voice chat is active, a microphone icon appears in the chat input field. Speak your prompt naturally. When you pause, the prompt is automatically submitted.

Automatic submission: By default, VS Code submits your voice prompt after a pause. You can adjust the wait time with the accessibility.voice.speechTimeout setting (in milliseconds), or set it to 0 to disable auto-submit entirely so you can review before sending.

Walky-talky mode in chat: Press and hold Ctrl+I (Mac: Cmd+I). Speak your prompt. When you release the keys, voice recognition stops and the prompt is submitted automatically.

Screen reader users (NVDA / JAWS / VoiceOver)

Ctrl+I with Speech installed starts voice input. If the Chat view is not focused, it opens the Chat view. If you are in the editor, it opens inline chat.
Speak your prompt instead of typing. Your screen reader announces the transcribed text as it appears in the input field.
When the response arrives, press Alt+F2 (Accessible View) to read it at your own pace, just as you would with a typed prompt.
The automatic submission after a pause may catch you off guard. If you need more time to compose a multi-sentence prompt, set accessibility.voice.speechTimeout to 0 and submit manually with Ctrl+Enter.

Text-to-Speech - Listen to Chat Responses

VS Code Speech can read Copilot Chat responses aloud. Each chat response shows a speaker icon you can activate to hear that specific response.

Automatic read-aloud after voice input

Enable this setting to have every Chat response automatically spoken aloud when you used voice to ask the question:

{
  "accessibility.voice.autoSynthesize": true
}

When auto-synthesize is on:

You speak a question using voice chat
Copilot responds in text
The response is automatically read aloud
To stop playback mid-sentence, press Escape or activate the stop icon

Manual read-aloud for any response

Even without autoSynthesize, every Chat response has a speaker icon. Activate it to hear that specific response read aloud. This works for responses from typed prompts too, not just voice prompts.

Screen reader users (NVDA / JAWS / VoiceOver)

Text-to-speech uses a separate audio channel from your screen reader. Both may speak at the same time, which can be confusing.
Recommended approach: If you use a screen reader, you may prefer to keep autoSynthesize off and use Accessible View (Alt+F2) to read responses yourself. The text-to-speech voice is more useful for sighted users who want a hands-free experience.
If you do want to try text-to-speech alongside your screen reader, reduce your screen reader volume or temporarily mute it while Copilot speaks.

"Hey Code" - Hands-Free Activation

You can configure VS Code to listen continuously for the wake phrase "Hey Code" to start a voice chat session without touching the keyboard.

Enable it in Settings:

{
  "accessibility.voice.keywordActivation": "chatInView"
}

Setting value	What happens when you say "Hey Code"
`"off"`	Disabled (default)
`"chatInView"`	Opens voice chat in the Chat view
`"quickChat"`	Opens voice quick chat (floating)
`"inlineChat"`	Opens voice inline chat in the editor
`"chatInContext"`	Opens voice chat in whichever chat location is most relevant

When "Hey Code" listening is active, a microphone icon appears in the status bar to show that VS Code is listening for the wake phrase.

Privacy note: Even with "Hey Code" enabled, all processing is local. No audio leaves your machine. The extension listens for the wake phrase only and starts transcription only after detecting it.

Language Configuration

VS Code Speech supports 26 languages. By default it matches your VS Code display language. To change it:

{
  "accessibility.voice.speechLanguage": "en-US"
}

When you start speech recognition for the first time with a new language, VS Code may install an additional language extension automatically.

All Voice Settings Reference

Setting	Default	Purpose
`accessibility.voice.speechLanguage`	`"auto"`	Language for speech recognition and synthesis. `"auto"` uses your VS Code display language.
`accessibility.voice.speechTimeout`	`1250`	Milliseconds of silence before auto-submitting a voice chat prompt. Set to `0` to disable auto-submit.
`accessibility.voice.autoSynthesize`	`false`	Automatically read Chat responses aloud when voice was used as input.
`accessibility.voice.keywordActivation`	`"off"`	Enable "Hey Code" wake phrase. Values: `"off"`, `"chatInView"`, `"quickChat"`, `"inlineChat"`, `"chatInContext"`.

All Voice Commands Reference

Command	Default shortcut	What it does
Voice: Start Dictation in Editor	`Ctrl+Alt+V` (Mac: `Cmd+Alt+V`)	Begin dictating text at the cursor
Voice: Stop Dictation in Editor	`Escape`	Stop dictation
Chat: Start Voice Chat	`Ctrl+I` (Mac: `Cmd+I`)	Start voice input in the most appropriate chat location
Chat: Voice Chat in Chat View	None	Start voice chat specifically in the Chat panel
Chat: Inline Voice Chat	None	Start voice chat inline in the editor
Chat: Quick Voice Chat	None	Start voice chat in the floating quick chat
Chat: Stop Listening and Submit	None	End voice input and submit the prompt
Chat: Read Aloud	None	Read a specific chat response using text-to-speech
Chat: Stop Reading Aloud	`Escape`	Stop text-to-speech playback

Custom Keybindings for Voice

You can assign your own shortcuts for voice commands. Open the Keyboard Shortcuts editor (Ctrl+K Ctrl+S) and search for "voice" or "dictation". Example custom keybinding in keybindings.json:

[
  {
    "key": "ctrl+u",
    "command": "workbench.action.chat.startVoiceChat",
    "when": "!voiceChatInProgress"
  },
  {
    "key": "ctrl+u",
    "command": "workbench.action.chat.stopListeningAndSubmit",
    "when": "voiceChatInProgress"
  },
  {
    "key": "ctrl+d",
    "command": "workbench.action.editorDictation.start",
    "when": "!editorDictation.inProgress"
  },
  {
    "key": "ctrl+d",
    "command": "workbench.action.editorDictation.stop",
    "when": "editorDictation.inProgress"
  }
]

The when clauses ensure the same key toggles the feature on and off.

Supported Platforms

Platform	Architecture
Windows	x64, ARM
macOS	x64 (Intel), ARM (Apple Silicon)
Linux	x64, ARM32, ARM64 (Ubuntu 20.04/22.04/24.04, Debian 11/12, RHEL 8, CentOS 8)

On Linux, the extension requires the ALSA shared library (libasound). Install it with sudo apt install libasound2 on Debian/Ubuntu if it is not already present.

19. Git Operations Inside VS Code

This section previews the key Git operations you will perform inside VS Code. Chapter 11 (Git & Source Control) covers each in full detail with step-by-step walkthroughs. This is your orientation.

Cloning a Repository

What it does: Downloads a complete copy of a GitHub repository to your local machine.

Method	Steps
Command Palette	`Ctrl+Shift+P` then type `Git: Clone` then paste the repository URL then choose a local folder
Terminal	Ctrl+` then type `git clone https://github.com/owner/repo.git`
Source Control view	If no folder is open, the Source Control view shows a "Clone Repository" button

Screen reader tip: After cloning, VS Code asks "Would you like to open the cloned repository?" Press Enter to open it immediately.

Forking a Repository

What it does: Creates your own copy of someone else's repository under your GitHub account.

Forking happens on GitHub.com, not inside VS Code. After forking:

Go to your fork on GitHub.com (github.com/your-username/repo)
Clone your fork using the steps above
VS Code's Git extension automatically tracks your fork as the origin remote

Pulling Changes

What it does: Downloads and applies new commits from the remote repository to your local copy.

Method	Steps
Command Palette	`Ctrl+Shift+P` then type `Git: Pull`
Status Bar	Click the sync icon (circular arrows) in the Status Bar
Terminal	Ctrl+` then type `git pull`
Source Control view	Click the "..." menu then Pull

Fetching Changes

What it does: Checks for new commits on the remote without applying them. Fetch is "look but do not touch."

Method	Steps
Command Palette	`Ctrl+Shift+P` then type `Git: Fetch`
Terminal	Ctrl+` then type `git fetch`

After fetching, the Status Bar shows if you are behind the remote (e.g., "0 up, 3 down" means 3 commits to pull).

Pushing Changes

What it does: Uploads your local commits to the remote repository.

Method	Steps
Command Palette	`Ctrl+Shift+P` then type `Git: Push`
Status Bar	Click the sync icon
Terminal	Ctrl+` then type `git push`
Source Control view	Click the "..." menu then Push

Branching

What it does: Creates an isolated workspace for your changes without affecting the main branch.

Method	Steps
Command Palette	`Ctrl+Shift+P` then type `Git: Create Branch` then enter branch name
Status Bar	Click the branch name (bottom-left) then select "Create new branch"
Terminal	Ctrl+` then type `git checkout -b branch-name`

Staging and Committing

What it does: Staging selects which changes to include. Committing saves them as a permanent snapshot.

Open Source Control (Ctrl+Shift+G)
Navigate the changes list with Up/Down Arrow
Press Enter on a file to see the diff
Press + (or use the stage button) to stage a file
Move to the commit message input at the top
Type your commit message
Press Ctrl+Enter to commit

Learning Cards: Git in VS Code

Screen reader users

Source Control view (Ctrl+Shift+G): Your screen reader announces the number of changed files. Navigate with Up/Down Arrow.
Staging: With a file focused in the changes list, press the stage button (announced as "Stage Changes"). Or open Command Palette and type Git: Stage.
Committing: The commit message input is at the top of the Source Control view. Type your message and press Ctrl+Enter.
Branch switching: The current branch name is in the Status Bar. Click or Enter on it for a branch picker. Your screen reader announces each branch name.
Sync status: The Status Bar shows upload/download arrow counts. Tab to it to hear "0 pending uploads, 2 pending downloads" style announcements.

Low vision users

Source Control view uses colored indicators: green + for new files, yellow M for modified, red D for deleted
The diff editor shows added lines with a green background and removed lines with a red background
Use the minimap gutter in the diff view to see the overall pattern of changes
Branch name in the Status Bar is always visible - the font respects your zoom level

Sighted users

Click the Source Control icon (branch/fork icon) in the Activity Bar
Click + next to files to stage them, or click the + on the "Changes" header to stage all
Type your commit message in the text box at the top and click the checkmark to commit
The branch name in the bottom-left Status Bar is clickable for branch switching

Next: Working with Pull Requests Back: Working with Issues Related: Git & Source Control in VS Code | GitHub Pull Requests Extension | GitHub Copilot | Screen Reader Cheat Sheet | VS Code Accessibility Reference

05 vscode accessibility

VS Code Setup & Accessibility Basics

Your Accessible Development Environment - The Foundation

Workshop Recommendation (Chapter 5)

Chapter 5 Challenge Set

Challenge 5.1 Step-by-Step: VS Code Accessibility Baseline

Completing Chapter 5: Submit Your Evidence

Expected Outcomes

If You Get Stuck

Learning Moment

Learning Pattern Used in This Chapter

Table of Contents

1. Why VS Code for Open Source Contribution

2. The Bridge: github.dev - VS Code in Your Browser

Before you install anything: try VS Code right now in your browser

How to Access github.dev

Method 1: The Period Key Shortcut (Fastest)

Where it works

Method 2: Direct URL

Method 3: From the Repository Page

What You Get in github.dev

What github.dev Does NOT Have

Why github.dev Matters for This Workshop

Use github.dev when

Use desktop VS Code when

Screen Reader Experience in github.dev

Activate screen reader mode immediately

What changes

Navigation

NVDA/JAWS users

VoiceOver users

Try It Right Now

3. Screen Reader Mode in VS Code

Activating Screen Reader Mode

Verify it is active

What Changes in Screen Reader Mode

NVDA-Specific Settings for VS Code

JAWS-Specific Settings for VS Code

VoiceOver-Specific Settings for VS Code (macOS)

4. The VS Code Interface Tour

The Five Major Regions

Navigating Between Regions

Learning Cards: Finding Your Way Around VS Code

5. The Accounts Button and GitHub Sign-In

Why Sign In Matters

Signing In

From the Accounts Button

From the Command Palette

Verifying You Are Signed In

Learning Cards: GitHub Sign-In

6. Verifying GitHub Copilot Status

Where to Check Copilot Status

Status Bar Indicator

Command Palette Check

Quick Test

Troubleshooting Copilot

Learning Cards: Copilot Status

7. The Status Bar

What the Status Bar Contains (Left to Right)

Navigating the Status Bar with a Keyboard

Learning Cards: Status Bar

8. The Menu Bar

Menu Bar Structure

Accessing the Menu Bar

Learning Cards: Menu Bar

9. Settings Sync

What Gets Synced

Enabling Settings Sync

Conflict Resolution

Learning Cards: Settings Sync

Profiles

Creating a Profile

Switching Profiles

Workshop Profile Recommendations

Exporting and Sharing Profiles

Profiles and Settings Sync

Learning Cards: Profiles

10. The Settings Editor

Opening the Settings Editor

Navigating the Settings Editor

Find in Current File (`Ctrl+F`)

Global Search Across the Workspace (`Ctrl+Shift+F`)

Go to Symbol with Inline Filtering (`Ctrl+Shift+O`)

Example output when pressing `Alt+H` in the editor