Repository navigation
Expand file tree
/
Copy path11-vscode-interface.html
More file actions
1711 lines (1622 loc) · 95.7 KB
/
Copy path11-vscode-interface.html
File metadata and controls
1711 lines (1622 loc) · 95.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="GIT Going with GitHub - A two-day accessible open source workshop by Community Access">
<title>VS Code: Interface and Setup - GIT Going with GitHub</title>
<link rel="stylesheet" href="../styles/github-markdown.css">
<link rel="stylesheet" href="../styles/highlight.css">
<link rel="stylesheet" href="../styles/custom.css">
<style>
.markdown-body {
box-sizing: border-box;
min-width: 0;
max-width: 980px;
margin: 0;
padding: 45px;
}
.page-layout {
max-width: 1320px;
margin: 0 auto;
padding: 1rem 1rem 2rem;
display: grid;
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
gap: 1.25rem;
align-items: start;
}
@media (max-width: 767px) {
.page-layout {
grid-template-columns: 1fr;
padding: 0.5rem 0.5rem 1rem;
}
.markdown-body {
padding: 15px;
}
}
</style>
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<header class="site-header" role="banner">
<div class="site-header-inner">
<nav aria-label="Breadcrumb" class="breadcrumb">
<a href="../index.html">Home</a> <span aria-hidden="true">›</span> <span aria-current="page">VS Code: Interface and Setup</span>
</nav>
<div class="header-actions">
<a href="https://github.com/Community-Access/git-going-with-github/wiki" class="wiki-link" target="_blank" rel="noopener noreferrer">
<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.06l-2.573 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.457 1.457 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 1 1 1.06-1.06l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h.25a.25.25 0 0 0 .25-.25v-5.5Z"/>
</svg>
Wiki
</a>
<form role="search" class="search-form" action="../search.html" method="get">
<label for="site-search" class="search-label">Search docs</label>
<input
type="search"
id="site-search"
class="search-input"
name="q"
placeholder="Search docs…"
autocomplete="off"
aria-label="Search documentation"
>
<button type="submit" class="search-button" aria-label="Submit search">
<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"/>
</svg>
</button>
</form>
</div>
</div>
</header>
<div class="page-layout">
<aside class="guided-sidebar" aria-label="Guided reference">
<h2 class="guided-title">Guided Reference</h2>
<p class="guided-intro">Follow the learning order, then jump into challenge issue views, appendices, and support resources.</p>
<section class="guided-progress" aria-label="Learning progress">
<h3>Learning Progress</h3>
<p class="guided-progress-copy">15 of 55 pages in the guided sequence</p>
<div class="guided-progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="27" aria-label="Guided sequence progress">
<span class="guided-progress-fill" style="width:27%;"></span>
</div>
<p class="guided-progress-percent">27% complete</p>
</section>
<section class="guided-resume" aria-label="Resume learning">
<a id="resume-link" class="guided-resume-link" href="../index.html" hidden>Resume where you left off</a>
</section>
<nav class="guided-nav" aria-label="Workshop navigation">
<section class="guided-section">
<h3>Start Here</h3>
<ul>
<li><a href="../index.html">Workshop Home</a></li>
<li><a href="../docs/course-guide.html">Course Guide</a></li>
<li><a href="../docs/get-going.html">Get Going with GitHub</a></li>
<li><a href="../docs/CHALLENGES.html">Challenge Hub</a></li>
</ul>
</section>
<section class="guided-section">
<h3>Learning Order</h3>
<details open>
<summary>Day 1 chapters</summary>
<ul>
<li><a href="../docs/00-pre-workshop-setup.html">Pre-Workshop Setup - GIT Going with GitHub</a></li>
<li><a href="../docs/01-choose-your-tools.html">Choose Your Adventure: A Tool Tour</a></li>
<li><a href="../docs/02-understanding-github.html">Understanding GitHub's Web Structure</a></li>
<li><a href="../docs/03-navigating-repositories.html">Navigating Repositories</a></li>
<li><a href="../docs/04-the-learning-room.html">The Learning Room: Your Personal Practice Repository</a></li>
<li><a href="../docs/05-working-with-issues.html">Working with Issues</a></li>
<li><a href="../docs/06-working-with-pull-requests.html">Working with Pull Requests</a></li>
<li><a href="../docs/07-merge-conflicts.html">Merge Conflicts</a></li>
<li><a href="../docs/08-open-source-culture.html">Culture, Etiquette, and Community Standards</a></li>
<li><a href="../docs/09-labels-milestones-projects.html">Labels, Milestones, and Projects</a></li>
<li><a href="../docs/10-notifications-and-day-1-close.html">Notifications</a></li>
</ul>
</details>
<details open>
<summary>Day 2 chapters</summary>
<ul>
<li><a href="../docs/11-vscode-interface.html" aria-current="page" class="guided-active">VS Code: Interface and Setup</a></li>
<li><a href="../docs/12-vscode-accessibility.html">VS Code: Accessibility Deep Dive</a></li>
<li><a href="../docs/13-how-git-works.html">How Git Works: The Mental Model</a></li>
<li><a href="../docs/14-git-in-practice.html">Git & Source Control in VS Code</a></li>
<li><a href="../docs/15-code-review.html">Code Review: PRs, Diffs, and Constructive Feedback</a></li>
<li><a href="../docs/16-github-copilot.html">GitHub Copilot</a></li>
<li><a href="../docs/17-issue-templates.html">Issue Templates</a></li>
<li><a href="../docs/18-fork-and-contribute.html">Fork and Contribute: The Open Source Workflow</a></li>
<li><a href="../docs/19-accessibility-agents.html">Accessibility Agents</a></li>
<li><a href="../docs/20-build-your-agent.html">Capstone Project: Contribute an Impactful Agent</a></li>
<li><a href="../docs/21-github-accessibility-and-open-source.html">GitHub Accessibility and Open Source at Scale</a></li>
<li><a href="../docs/22-what-comes-next.html">What Comes Next: Your Developer Journey</a></li>
</ul>
</details>
</section>
<section class="guided-section">
<h3>Appendices</h3>
<details>
<summary>Reference library</summary>
<ul>
<li><a href="../docs/appendix-a-glossary.html">Appendix A: GitHub Concepts & Glossary</a></li>
<li><a href="../docs/appendix-b-screen-reader-cheatsheet.html">Appendix B: Screen Reader Cheat Sheet</a></li>
<li><a href="../docs/appendix-c-markdown-reference.html">Appendix C: Markdown and GitHub Flavored Markdown - Complete Guide</a></li>
<li><a href="../docs/appendix-d-git-authentication.html">Appendix D: Git Authentication</a></li>
<li><a href="../docs/appendix-e-advanced-git.html">Appendix E: Advanced Git Operations</a></li>
<li><a href="../docs/appendix-f-git-security.html">Appendix F: Git Security for Contributors</a></li>
<li><a href="../docs/appendix-g-vscode-reference.html">Appendix G: VS Code Accessibility Reference</a></li>
<li><a href="../docs/appendix-h-github-desktop.html">Appendix H: GitHub Desktop</a></li>
<li><a href="../docs/appendix-i-github-cli.html">Appendix I: GitHub CLI Reference</a></li>
<li><a href="../docs/appendix-j-cloud-editors.html">Appendix J: GitHub Codespaces</a></li>
<li><a href="../docs/appendix-k-copilot-reference.html">Appendix K: Copilot Reference</a></li>
<li><a href="../docs/appendix-l-agents-reference.html">Appendix L: Accessibility Agents Reference</a></li>
<li><a href="../docs/appendix-m-accessibility-standards.html">Appendix M: Accessibility Standards Reference</a></li>
<li><a href="../docs/appendix-n-advanced-search.html">Appendix N: GitHub Advanced Search</a></li>
<li><a href="../docs/appendix-o-branch-protection.html">Appendix O: Branch Protection Rules and Repository Rulesets</a></li>
<li><a href="../docs/appendix-p-security-features.html">Appendix P: GitHub Security Features</a></li>
<li><a href="../docs/appendix-q-actions-workflows.html">Appendix Q: GitHub Actions and Workflows</a></li>
<li><a href="../docs/appendix-r-projects-deep-dive.html">Appendix R: GitHub Projects Deep Dive</a></li>
<li><a href="../docs/appendix-s-releases-tags-insights.html">Appendix S: Releases, Tags, and Repository Insights</a></li>
<li><a href="../docs/appendix-t-community-and-social.html">Appendix T: Community and Social</a></li>
<li><a href="../docs/appendix-u-discussions-and-gists.html">Appendix U: Discussions and Gists</a></li>
<li><a href="../docs/appendix-v-github-mobile.html">Appendix V: GitHub Mobile</a></li>
<li><a href="../docs/appendix-w-github-pages.html">Appendix W: Publishing with GitHub Pages</a></li>
<li><a href="../docs/appendix-x-resources.html">Appendix X: Resources</a></li>
<li><a href="../docs/appendix-y-workshop-materials.html">Appendix Y: Accessing and Downloading Workshop Materials</a></li>
<li><a href="../docs/appendix-z-github-skills.html">Appendix Z: GitHub Skills - Complete Course Catalog</a></li>
<li><a href="../docs/appendix-aa-agent-installation-setup.html">Appendix AA: Agent Installation & Setup Across All Platforms</a></li>
<li><a href="../docs/appendix-ab-advanced-agent-patterns.html">Appendix AB: Advanced Agent Patterns & Skills</a></li>
<li><a href="../docs/appendix-ac-document-developer-tools.html">Appendix AC: Document & Developer Tool Agents</a></li>
</ul>
</details>
</section>
<section class="guided-section">
<h3>Challenge Lab</h3>
<ul>
<li><a href="../docs/CHALLENGES.html">Challenge Hub</a></li>
<li><a href="../work.html">Issue-Style Challenge Walkthrough</a></li>
<li><a href="../docs/17-issue-templates.html">Issue Template Deep Dive</a></li>
</ul>
</section>
<section class="guided-section">
<h3>External Resources</h3>
<ul>
<li><a href="https://lp.csedesigns.com/ggg/PODCASTS.html">Podcast Episodes <span class="guided-external">(external)</span></a></li>
<li><a href="https://lp.csedesigns.com/ggg/feed.xml">RSS Feed <span class="guided-external">(external)</span></a></li>
</ul>
</section>
<section class="guided-section">
<h3>Get Help</h3>
<ul>
<li><a href="https://github.com/Community-Access/support">Support Hub <span class="guided-external">(external)</span></a></li>
</ul>
</section>
</nav>
</aside>
<main id="main-content" class="markdown-body page-main">
<nav class="quick-jumps" aria-label="Quick jumps">
<h2 class="quick-jumps-title">Quick Jumps</h2>
<ul class="quick-jumps-list">
<li><a href="#course-content">Jump to course content</a></li><li><a href="#main-content">Jump to main content top</a></li><li><a href="#on-this-page">Jump to on-page sections</a></li><li><a href="#companion-media">Jump to companion audio</a></li><li><a href="../docs/CHALLENGES.html">Open challenge hub</a></li><li><a href="../work.html">Open issue-style challenge walkthrough</a></li>
</ul>
</nav>
<section id="companion-media" class="companion-media" aria-label="Companion podcast content">
<h2 class="companion-title">Companion Podcast and Transcript</h2>
<p class="companion-intro">Use audio and transcript companions to review concepts in a conversational format.</p>
<article class="companion-card">
<h3>VS Code Setup and Accessibility</h3>
<p class="companion-note">Companion audio: this episode reinforces key ideas and may not be a word-for-word reading of this page.</p>
<audio controls preload="none" class="companion-player" src="https://lp.csedesigns.com/ggg/media/ch-11-vscode-basics.mp3">
Your browser does not support the audio element.
</audio>
<p class="companion-links">
<a href="https://lp.csedesigns.com/ggg/media/ch-11-vscode-basics.mp3" target="_blank" rel="noopener noreferrer">Open audio file (external)</a>
<span aria-hidden="true"> · </span>
<a href="https://github.com/Community-Access/git-going-with-github/blob/main/podcasts/scripts/chapters/ch-11-vscode-basics.txt" target="_blank" rel="noopener noreferrer">Full transcript source (external)</a>
</p>
<details class="companion-preview"><summary>Transcript preview</summary><p><strong>Alex:</strong> Welcome back. Today we're setting up VS Code as an accessible place to do GitHub work, especially the kind of Markdown, review, and contribution work that shows up throughout this course.</p><p><strong>Jamie:</strong> And VS Code can sound a little intimidating if you've only used GitHub in the browser. Is this a whole new world, or just another way into the same projects?</p><p><strong>Alex:</strong> A bit of both. VS Code is a free, extensible code editor from Microsoft, and extensible means you can add features through extensions. GitHub.com is excellent for reading issues, reviewing pull requests, and having discussions, while VS Code is where editing, checking files, using Copilot, and moving through a repository can feel more direct.</p><p><strong>Jamie:</strong> So the browser is still important. We're not replacing it.</p></details>
</article>
</section>
<nav id="on-this-page" class="onpage-nav" aria-label="On this page">
<h2 class="onpage-title">On This Page</h2>
<ul class="onpage-list">
<li class="onpage-item"><a href="#your-accessible-development-environment---the-foundation">Your Accessible Development Environment - The Foundation</a></li>
<li class="onpage-item"><a href="#workshop-recommendation-chapter-11">Workshop Recommendation (Chapter 11)</a></li>
<li class="onpage-item onpage-sub"><a href="#chapter-11-practice-set">Chapter 11 Practice Set</a></li>
<li class="onpage-item onpage-sub"><a href="#practice-111-step-by-step-vs-code-accessibility-baseline">Practice 11.1 Step-by-Step: VS Code Accessibility Baseline</a></li>
<li class="onpage-item onpage-sub"><a href="#completing-chapter-11-submit-your-evidence">Completing Chapter 11: Submit Your Evidence</a></li>
<li class="onpage-item onpage-sub"><a href="#expected-outcomes">Expected Outcomes</a></li>
<li class="onpage-item onpage-sub"><a href="#if-you-get-stuck">If You Get Stuck</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-moment">Learning Moment</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-pattern-used-in-this-chapter">Learning Pattern Used in This Chapter</a></li>
<li class="onpage-item"><a href="#table-of-contents">Table of Contents</a></li>
<li class="onpage-item"><a href="#1-why-vs-code-for-open-source-contribution">1. Why VS Code for Open Source Contribution</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-why-vs-code">Learning Cards: Why VS Code</a></li>
<li class="onpage-item"><a href="#2-the-bridge-githubdev---vs-code-in-your-browser">2. The Bridge: github.dev - VS Code in Your Browser</a></li>
<li class="onpage-item onpage-sub"><a href="#before-you-install-anything-try-vs-code-right-now-in-your-browser">Before you install anything: try VS Code right now in your browser</a></li>
<li class="onpage-item onpage-sub"><a href="#how-to-access-githubdev">How to Access github.dev</a></li>
<li class="onpage-item onpage-sub"><a href="#what-you-get-in-githubdev">What You Get in github.dev</a></li>
<li class="onpage-item onpage-sub"><a href="#what-githubdev-does-not-have">What github.dev Does NOT Have</a></li>
<li class="onpage-item onpage-sub"><a href="#why-githubdev-matters-for-this-workshop">Why github.dev Matters for This Workshop</a></li>
<li class="onpage-item onpage-sub"><a href="#screen-reader-experience-in-githubdev">Screen Reader Experience in github.dev</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-githubdev">Learning Cards: github.dev</a></li>
<li class="onpage-item onpage-sub"><a href="#try-it-right-now">Try It Right Now</a></li>
<li class="onpage-item"><a href="#3-screen-reader-mode-in-vs-code">3. Screen Reader Mode in VS Code</a></li>
<li class="onpage-item onpage-sub"><a href="#activating-screen-reader-mode">Activating Screen Reader Mode</a></li>
<li class="onpage-item onpage-sub"><a href="#what-changes-in-screen-reader-mode">What Changes in Screen Reader Mode</a></li>
<li class="onpage-item onpage-sub"><a href="#nvda-specific-settings-for-vs-code">NVDA-Specific Settings for VS Code</a></li>
<li class="onpage-item onpage-sub"><a href="#jaws-specific-settings-for-vs-code">JAWS-Specific Settings for VS Code</a></li>
<li class="onpage-item onpage-sub"><a href="#voiceover-specific-settings-for-vs-code-macos">VoiceOver-Specific Settings for VS Code (macOS)</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-screen-reader-mode">Learning Cards: Screen Reader Mode</a></li>
<li class="onpage-item"><a href="#4-the-vs-code-interface-tour">4. The VS Code Interface Tour</a></li>
<li class="onpage-item onpage-sub"><a href="#the-five-major-regions">The Five Major Regions</a></li>
<li class="onpage-item onpage-sub"><a href="#navigating-between-regions">Navigating Between Regions</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-finding-your-way-around-vs-code">Learning Cards: Finding Your Way Around VS Code</a></li>
<li class="onpage-item"><a href="#5-the-accounts-button-and-github-sign-in">5. The Accounts Button and GitHub Sign-In</a></li>
<li class="onpage-item onpage-sub"><a href="#why-sign-in-matters">Why Sign In Matters</a></li>
<li class="onpage-item onpage-sub"><a href="#signing-in">Signing In</a></li>
<li class="onpage-item onpage-sub"><a href="#verifying-you-are-signed-in">Verifying You Are Signed In</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-github-sign-in">Learning Cards: GitHub Sign-In</a></li>
<li class="onpage-item"><a href="#6-verifying-github-copilot-status">6. Verifying GitHub Copilot Status</a></li>
<li class="onpage-item onpage-sub"><a href="#where-to-check-copilot-status">Where to Check Copilot Status</a></li>
<li class="onpage-item onpage-sub"><a href="#troubleshooting-copilot">Troubleshooting Copilot</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-copilot-status">Learning Cards: Copilot Status</a></li>
<li class="onpage-item"><a href="#7-the-status-bar">7. The Status Bar</a></li>
<li class="onpage-item onpage-sub"><a href="#what-the-status-bar-contains-left-to-right">What the Status Bar Contains (Left to Right)</a></li>
<li class="onpage-item onpage-sub"><a href="#navigating-the-status-bar-with-a-keyboard">Navigating the Status Bar with a Keyboard</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-status-bar">Learning Cards: Status Bar</a></li>
<li class="onpage-item"><a href="#8-the-menu-bar">8. The Menu Bar</a></li>
<li class="onpage-item onpage-sub"><a href="#menu-bar-structure">Menu Bar Structure</a></li>
<li class="onpage-item onpage-sub"><a href="#accessing-the-menu-bar">Accessing the Menu Bar</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-menu-bar">Learning Cards: Menu Bar</a></li>
<li class="onpage-item"><a href="#9-settings-sync">9. Settings Sync</a></li>
<li class="onpage-item onpage-sub"><a href="#what-gets-synced">What Gets Synced</a></li>
<li class="onpage-item onpage-sub"><a href="#enabling-settings-sync">Enabling Settings Sync</a></li>
<li class="onpage-item onpage-sub"><a href="#conflict-resolution">Conflict Resolution</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-settings-sync">Learning Cards: Settings Sync</a></li>
<li class="onpage-item onpage-sub"><a href="#profiles">Profiles</a></li>
<li class="onpage-item"><a href="#10-the-settings-editor">10. The Settings Editor</a></li>
<li class="onpage-item onpage-sub"><a href="#opening-the-settings-editor">Opening the Settings Editor</a></li>
<li class="onpage-item onpage-sub"><a href="#navigating-the-settings-editor">Navigating the Settings Editor</a></li>
<li class="onpage-item onpage-sub"><a href="#key-accessibility-settings-to-configure">Key Accessibility Settings to Configure</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-settings-editor">Learning Cards: Settings Editor</a></li>
<li class="onpage-item"><a href="#11-the-keyboard-shortcuts-editor">11. The Keyboard Shortcuts Editor</a></li>
<li class="onpage-item onpage-sub"><a href="#opening-the-keyboard-shortcuts-editor">Opening the Keyboard Shortcuts Editor</a></li>
<li class="onpage-item onpage-sub"><a href="#searching-for-shortcuts">Searching for Shortcuts</a></li>
<li class="onpage-item onpage-sub"><a href="#customizing-a-shortcut">Customizing a Shortcut</a></li>
<li class="onpage-item onpage-sub"><a href="#learning-cards-keyboard-shortcuts-editor">Learning Cards: Keyboard Shortcuts Editor</a></li>
<li class="onpage-item"><a href="#authoritative-sources">Authoritative Sources</a></li>
<li class="onpage-item onpage-sub"><a href="#section-level-source-map">Section-Level Source Map</a></li>
</ul>
</nav>
<div id="course-content"><h1 id="vs-code-interface-and-setup">VS Code: Interface and Setup</h1>
<blockquote>
<p><strong>Listen to Episode 11:</strong> <a href="https://lp.csedesigns.com/ggg/PODCASTS.html">VS Code Setup and Accessibility</a> - a conversational audio overview covering both this chapter and <a href="12-vscode-accessibility.html">Chapter 12</a>.</p>
</blockquote>
<blockquote>
<p><strong>Related appendices:</strong> <a href="appendix-g-vscode-reference.html">Appendix G: VS Code Reference</a> | <a href="appendix-b-screen-reader-cheatsheet.html">Appendix B: Screen Reader Cheat Sheet</a>
<strong>Authoritative sources:</strong> <a href="https://code.visualstudio.com/docs/getstarted/userinterface">VS Code Docs: User Interface</a> | <a href="https://code.visualstudio.com/docs/editor/accessibility">VS Code Docs: Accessibility</a></p>
</blockquote>
<h2 id="your-accessible-development-environment---the-foundation">Your Accessible Development Environment - The Foundation</h2>
<blockquote>
<p><strong>Day 2, Block 1 Material</strong></p>
<p>This chapter covers the VS Code interface: launching VS Code, signing in to GitHub, verifying Copilot is active, configuring screen reader mode, and navigating the Activity Bar, Status Bar, menus, settings, and keyboard shortcuts.</p>
<p>For accessibility deep-dive topics (keyboard navigation, Problems panel, Terminal, Copilot Chat, Accessible Help/View/Diff, Accessibility Signals, and VS Code Speech), see <a href="12-vscode-accessibility.html">Chapter 12: VS Code Accessibility Deep Dive</a>.</p>
<p><strong>Prerequisites:</strong> Complete Day 1 walkthrough of GitHub's browser interface before working through VS Code material.</p>
</blockquote>
<h2 id="workshop-recommendation-chapter-11">Workshop Recommendation (Chapter 11)</h2>
<p>For this workshop, Chapter 11 is a <strong>guided setup chapter</strong> with a lightweight completion practice.</p>
<ul>
<li><strong>Challenge count:</strong> 1 guided walkthrough</li>
<li><strong>Automation check:</strong> none - setup state is local/account-level and cannot be validated by the Learning Room PR bot</li>
<li><strong>Evidence:</strong> structured completion comment on your assigned challenge issue</li>
<li><strong>Pattern:</strong> open, configure, navigate, verify</li>
</ul>
<h3 id="chapter-11-practice-set">Chapter 11 Practice Set</h3>
<ol>
<li><strong>VS Code accessibility baseline</strong> - open VS Code (github.dev or desktop), enable screen reader mode, sign in to GitHub, verify Copilot status, and navigate core surfaces.</li>
</ol>
<h3 id="practice-111-step-by-step-vs-code-accessibility-baseline">Practice 11.1 Step-by-Step: VS Code Accessibility Baseline</h3>
<p><strong>Goal:</strong> 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.</p>
<p><strong>Where you are working:</strong> github.dev (VS Code in the browser) or desktop VS Code if you installed it in Block 0.</p>
<p><strong>Estimated time:</strong> 10-15 minutes.</p>
<ol>
<li>Open your Learning Room repository on GitHub.com.</li>
<li>Press <code>.</code> (the period key) on your keyboard. This launches <strong>github.dev</strong> - a full VS Code editor running in your browser. Wait a few seconds for it to load.</li>
<li>Enable screen reader mode:<ul>
<li><strong>Windows (NVDA/JAWS):</strong> Press <code>Shift+Alt+F1</code>. You should hear an announcement confirming screen reader mode is on.</li>
<li><strong>Mac (VoiceOver):</strong> Screen reader mode is usually already optimized. If navigation feels wrong, open Command Palette (<code>Cmd+Shift+P</code>) and run <code>Toggle Screen Reader Accessibility Mode</code>.</li>
</ul>
</li>
<li>Open the <strong>Explorer</strong> panel with <code>Ctrl+Shift+E</code> (Mac: <code>Cmd+Shift+E</code>). Your screen reader should announce the file tree.</li>
<li>Navigate to and open <code>README.md</code> from the file tree. Use arrow keys to move through files and <code>Enter</code> to open.</li>
<li>Open the <strong>outline/symbols</strong> view with <code>Ctrl+Shift+O</code> (Mac: <code>Cmd+Shift+O</code>). This shows all headings and sections in the current file - a key navigation tool for screen reader users.</li>
<li>Open the <strong>Command Palette</strong> with <code>Ctrl+Shift+P</code> (Mac: <code>Cmd+Shift+P</code>). Type any command name (for example, <code>Toggle Word Wrap</code>) and press <code>Enter</code> to run it. Press <code>Escape</code> to close without running.</li>
<li>Check the <strong>Accounts</strong> 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.</li>
<li>Check the <strong>Status Bar</strong> 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.</li>
</ol>
<p><strong>You are done when:</strong> 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.</p>
<h3 id="completing-chapter-11-submit-your-evidence">Completing Chapter 11: Submit Your Evidence</h3>
<p>Return to GitHub.com, open the assigned setup or Day 2 readiness issue, and post a completion comment:</p>
<pre><code class="hljs language-text">Chapter 11 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</code></pre>
<p>If any step was "no," add a note explaining where you got stuck so the facilitator can help. Close the assigned setup or readiness issue when done.</p>
<h3 id="expected-outcomes">Expected Outcomes</h3>
<ul>
<li>Student can launch and navigate github.dev or desktop VS Code.</li>
<li>Student can enable screen reader mode and hear navigation announcements.</li>
<li>Student has signed in to GitHub and can see their account status.</li>
<li>Student has verified GitHub Copilot is active (or knows it requires desktop VS Code).</li>
<li>Student can open core navigation surfaces (Explorer, Outline, Command Palette).</li>
<li>Student is ready for VS Code-based contribution chapters (6-16).</li>
</ul>
<h3 id="if-you-get-stuck">If You Get Stuck</h3>
<ol>
<li>Nothing happens when you press <code>.</code>? Make sure you are on the repository's main page (not inside an issue or PR). The <code>.</code> shortcut only works on repository code pages.</li>
<li>Screen reader mode toggle did not announce anything? Open Command Palette (<code>Ctrl+Shift+P</code>) and type <code>Screen Reader</code> to find the toggle manually.</li>
<li>Explorer panel is empty? VS Code may still be loading the repository. Wait 5-10 seconds and press <code>Ctrl+Shift+E</code> again.</li>
<li>On Mac with VoiceOver, navigation feels wrong? Run <code>Toggle Screen Reader Accessibility Mode</code> from Command Palette. VoiceOver sometimes needs the explicit toggle.</li>
<li>Cannot find the Accounts button? Open Command Palette and type <code>Accounts</code> to manage sign-in from there.</li>
<li>Copilot not showing in the status bar? github.dev does not support Copilot - you need desktop VS Code or a Codespace.</li>
<li>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.</li>
<li>Ask facilitator for a side-by-side demo and repeat the same steps.</li>
</ol>
<h3 id="learning-moment">Learning Moment</h3>
<p>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.</p>
<h3 id="learning-pattern-used-in-this-chapter">Learning Pattern Used in This Chapter</h3>
<ol>
<li>Open the tool in the simplest way possible (<code>.</code> key for github.dev).</li>
<li>Sign in and verify your identity and tools are ready (Accounts, Copilot).</li>
<li>Configure accessibility before doing any work (screen reader mode first).</li>
<li>Verify each navigation surface works with your assistive technology.</li>
<li>Record what worked and what didn't (evidence comment).</li>
</ol>
<h2 id="table-of-contents">Table of Contents</h2>
<ol>
<li><a href="#1-why-vs-code-for-open-source-contribution">Why VS Code for Open Source Contribution</a></li>
<li><a href="#2-the-bridge-githubdev---vs-code-in-your-browser">The Bridge: github.dev - VS Code in Your Browser</a></li>
<li><a href="#3-screen-reader-mode-in-vs-code">Screen Reader Mode in VS Code</a></li>
<li><a href="#4-the-vs-code-interface-tour">The VS Code Interface Tour</a></li>
<li><a href="#5-the-accounts-button-and-github-sign-in">The Accounts Button and GitHub Sign-In</a></li>
<li><a href="#6-verifying-github-copilot-status">Verifying GitHub Copilot Status</a></li>
<li><a href="#7-the-status-bar">The Status Bar</a></li>
<li><a href="#8-the-menu-bar">The Menu Bar</a></li>
<li><a href="#9-settings-sync">Settings Sync</a><ul>
<li><a href="#profiles">Profiles</a></li>
</ul>
</li>
<li><a href="#10-the-settings-editor">The Settings Editor</a></li>
<li><a href="#11-the-keyboard-shortcuts-editor">The Keyboard Shortcuts Editor</a></li>
<li><a href="#12-essential-keyboard-navigation-and-findfilter">Essential Keyboard Navigation and Find/Filter</a></li>
<li><a href="#13-the-problems-panel">The Problems Panel</a></li>
<li><a href="#14-the-terminal">The Terminal</a></li>
<li><a href="#15-copilot-chat-window">Copilot Chat Window</a></li>
<li><a href="#16-accessible-help-accessible-view-and-accessible-diff">Accessible Help, Accessible View, and Accessible Diff</a></li>
<li><a href="#17-accessibility-signals">Accessibility Signals</a></li>
<li><a href="#18-vs-code-speech---voice-input-and-output">VS Code Speech - Voice Input and Output</a></li>
<li><a href="#19-git-operations-inside-vs-code">Git Operations Inside VS Code</a></li>
</ol>
<hr>
<h2 id="1-why-vs-code-for-open-source-contribution">1. Why VS Code for Open Source Contribution</h2>
<p>GitHub's browser interface is excellent for reviewing, discussing, and triaging. VS Code is where you create. The difference:</p>
<table>
<thead>
<tr>
<th scope="col">Task</th>
<th scope="col">Browser</th>
<th scope="col">VS Code</th>
</tr>
</thead>
<tbody><tr>
<td>Navigate a repository</td>
<td>Excellent</td>
<td>Explorer sidebar</td>
</tr>
<tr>
<td>Read issues and PRs</td>
<td>Excellent</td>
<td>GitHub PR extension</td>
</tr>
<tr>
<td>Comment on a PR</td>
<td>Excellent</td>
<td>GitHub PR extension</td>
</tr>
<tr>
<td>Edit a file</td>
<td>Web editor</td>
<td>Full text editor with Copilot</td>
</tr>
<tr>
<td>Review a diff</td>
<td>Files Changed tab</td>
<td>Three-way merge view with navigation</td>
</tr>
<tr>
<td>Get AI help while writing</td>
<td>Not available</td>
<td>Copilot inline + Chat</td>
</tr>
<tr>
<td>Run Accessibility Agents</td>
<td>Not available</td>
<td>Copilot Chat with agent files</td>
</tr>
<tr>
<td>See errors in your contribution</td>
<td>After push</td>
<td>Real-time as you type</td>
</tr>
</tbody></table>
<p>For Markdown contributions (which is most of what <a href="https://github.com/Community-Access/accessibility-agents">accessibility-agents</a> 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.</p>
<h3 id="learning-cards-why-vs-code">Learning Cards: Why VS Code</h3>
<details>
<summary>Screen reader users</summary>
<ul>
<li>VS Code announces errors, warnings, and suggestions via ARIA live regions -- you hear problems as you type instead of after pushing to GitHub</li>
<li>Press <code>Ctrl+Shift+P</code> (Mac: <code>Cmd+Shift+P</code>) to open the Command Palette and access every VS Code feature without a mouse</li>
<li>The Explorer sidebar (<code>Ctrl+Shift+E</code>) gives you the same file tree as GitHub.com but with keyboard-driven editing one <code>Enter</code> away</li>
</ul>
</details>
<details>
<summary>Low vision users</summary>
<ul>
<li>VS Code supports zoom levels up to 500%: press <code>Ctrl+=</code> (Mac: <code>Cmd+=</code>) to increase and <code>Ctrl+-</code> (Mac: <code>Cmd+-</code>) to decrease</li>
<li>High Contrast themes are built in -- open Command Palette and type "Color Theme" to switch</li>
<li>Inline error squiggles use both color and underline style so they remain visible at any zoom level or contrast setting</li>
</ul>
</details>
<details>
<summary>Sighted users</summary>
<ul>
<li>The Activity Bar on the left shows icons for Explorer, Search, Source Control, Extensions, and more -- each lights up when active</li>
<li>Real-time red/yellow squiggles under errors and warnings appear as you type, replacing the GitHub "push and wait" cycle</li>
<li>Copilot suggestions appear as dimmed ghost text to the right of your cursor</li>
</ul>
</details>
<hr>
<h2 id="2-the-bridge-githubdev---vs-code-in-your-browser">2. The Bridge: github.dev - VS Code in Your Browser</h2>
<h3 id="before-you-install-anything-try-vs-code-right-now-in-your-browser">Before you install anything: try VS Code right now in your browser</h3>
<p>GitHub provides a web-based version of VS Code called <strong>github.dev</strong>. It runs entirely in your browser with zero installation. The keyboard shortcuts, screen reader mode, and editor experience are identical to the desktop app.</p>
<h3 id="how-to-access-githubdev">How to Access github.dev</h3>
<h4 id="method-1-the-period-key-shortcut-fastest">Method 1: The Period Key Shortcut (Fastest)</h4>
<p>From any GitHub repository page:</p>
<ol>
<li>Press <code>.</code> (period key - just the period, no modifier keys)</li>
<li>The page transforms into VS Code</li>
<li>You are now editing in github.dev</li>
<li>The URL changes to <code>github.dev/owner/repo</code></li>
<li>Screen reader mode works exactly as it does in desktop VS Code (toggle with <code>Shift+Alt+F1</code>)</li>
</ol>
<h4 id="where-it-works">Where it works</h4>
<ul>
<li>Repository home pages</li>
<li>File view pages</li>
<li>Pull request pages</li>
<li>Any branch or commit view</li>
</ul>
<p><strong>Screen reader note:</strong> The period key shortcut is a single keypress - no modifier keys. It is GitHub's universal "open this in VS Code" command.</p>
<p><strong>Alternative: Press <code>></code> (Shift+Period)</strong> to open github.dev in a <strong>new tab</strong>. This preserves your GitHub page and is the preferred method when you want to keep both interfaces open.</p>
<h4 id="method-2-direct-url">Method 2: Direct URL</h4>
<p>Change the domain in any GitHub URL:</p>
<ul>
<li><code>github.com/owner/repo</code> becomes <code>github.dev/owner/repo</code></li>
<li>Works for any branch, file, or commit URL</li>
</ul>
<h4 id="method-3-from-the-repository-page">Method 3: From the Repository Page</h4>
<details>
<summary>Visual / mouse users</summary>
<ol>
<li>Click the green <strong>Code</strong> button on any repository page</li>
<li>In the dropdown, click <strong>Open with github.dev</strong></li>
</ol>
</details>
<details>
<summary>Screen reader users (NVDA / JAWS / VoiceOver)</summary>
<ol>
<li>Navigate to the Code button (press <code>B</code> or <code>Tab</code> until you hear "Code, button" or similar)</li>
<li>Press <code>Enter</code> to open the dropdown menu</li>
<li>Press <code>Down Arrow</code> to reach "Open with github.dev"</li>
<li>Press <code>Enter</code></li>
</ol>
</details>
<h3 id="what-you-get-in-githubdev">What You Get in github.dev</h3>
<p>Everything in the list below works <strong>exactly like desktop VS Code</strong>:</p>
<ul>
<li><strong>Full text editor with syntax highlighting</strong></li>
<li><strong>All VS Code keyboard shortcuts</strong> (see <a href="#11-the-keyboard-shortcuts-editor">Section 11: Keyboard Shortcuts Editor</a> and <a href="appendix-g-vscode-reference.html#5-complete-keyboard-shortcuts">Appendix M</a>)</li>
<li><strong>Screen reader mode</strong> (<code>Shift+Alt+F1</code> to activate - Mac: <code>Shift+Option+F1</code>)</li>
<li><strong>File Explorer</strong> (<code>Ctrl+Shift+E</code> - Mac: <code>Cmd+Shift+E</code>) - browse the entire repository</li>
<li><strong>Search across files</strong> (<code>Ctrl+Shift+F</code> - Mac: <code>Cmd+Shift+F</code>)</li>
<li><strong>Source Control (Git)</strong> (<code>Ctrl+Shift+G</code> - Mac: <code>Cmd+Shift+G</code>) - stage, commit, push changes</li>
<li><strong>Markdown preview</strong> (<code>Ctrl+Shift+V</code> - Mac: <code>Cmd+Shift+V</code>)</li>
<li><strong>Command Palette</strong> (<code>Ctrl+Shift+P</code> - Mac: <code>Cmd+Shift+P</code>) - access every VS Code command</li>
<li><strong>Go to File</strong> (<code>Ctrl+P</code> - Mac: <code>Cmd+P</code>) - instant file picker</li>
<li><strong>Go to Symbol</strong> (<code>Ctrl+Shift+O</code> - Mac: <code>Cmd+Shift+O</code>) - navigate by headings in Markdown</li>
<li><strong>Multiple editor tabs and split view</strong></li>
<li><strong>Settings sync</strong> - if you sign in, your VS Code settings apply here too</li>
</ul>
<h3 id="what-githubdev-does-not-have">What github.dev Does NOT Have</h3>
<ul>
<li><strong>No terminal</strong> - cannot run shell commands, npm, git CLI</li>
<li><strong>Limited Copilot and agent support</strong> - use desktop VS Code or Codespaces for the workshop's full Copilot, agent, terminal, and browser-agent exercises</li>
<li><strong>No Accessibility Agents</strong> - agents rely on extensions that need desktop VS Code</li>
<li><strong>Limited extension installation</strong> - only web-compatible extensions can run in github.dev; extensions that need a local runtime, terminal, or desktop APIs require desktop VS Code or Codespaces</li>
<li><strong>No debugger</strong> - debugging requires a local environment</li>
<li><strong>No live server or preview</strong> - except Markdown preview, which does work</li>
</ul>
<p>These limitations are why <strong>desktop VS Code exists</strong>. github.dev is for quick edits and reading code. Desktop is for Copilot, agents, terminal workflows, and full development.</p>
<h3 id="why-githubdev-matters-for-this-workshop">Why github.dev Matters for This Workshop</h3>
<p><strong>It is the bridge.</strong> You spend Day 1 in the GitHub browser interface. You spend Day 2 in desktop VS Code. github.dev sits in between:</p>
<ul>
<li>Same keyboard shortcuts as desktop VS Code (you learn them once)</li>
<li>Same screen reader mode (you configure it once)</li>
<li>Same file navigation patterns (Explorer, <code>Ctrl+P</code> / Mac: <code>Cmd+P</code>, <code>Ctrl+Shift+O</code> / Mac: <code>Cmd+Shift+O</code>)</li>
<li>But accessible instantly from any GitHub page with one keystroke</li>
</ul>
<h4 id="use-githubdev-when">Use github.dev when</h4>
<ul>
<li>You want to edit a file quickly without switching apps</li>
<li>You are on a machine where you cannot install software</li>
<li>You want to browse code with VS Code navigation (symbols, search, split view)</li>
<li>You are reviewing a PR and want to see the full file context</li>
</ul>
<h4 id="use-desktop-vs-code-when">Use desktop VS Code when</h4>
<ul>
<li>You need Copilot inline suggestions</li>
<li>You want to run Accessibility Agents</li>
<li>You are making multi-file changes that benefit from AI assistance</li>
<li>You need a terminal for git commands or running scripts</li>
</ul>
<h3 id="screen-reader-experience-in-githubdev">Screen Reader Experience in github.dev</h3>
<h4 id="activate-screen-reader-mode-immediately">Activate screen reader mode immediately</h4>
<ol>
<li>Press <code>.</code> on any GitHub repository to open github.dev</li>
<li>Press <code>Shift+Alt+F1</code> (Mac: <code>Shift+Option+F1</code>) to enable screen reader mode</li>
<li>VS Code announces "Screen reader optimized"</li>
</ol>
<h4 id="what-changes">What changes</h4>
<ul>
<li>Focus behavior adjusts for keyboard navigation</li>
<li>Code suggestions are announced via ARIA live regions</li>
<li>Error messages are announced when you navigate to them</li>
<li>Inline decorations are suppressed to reduce noise</li>
</ul>
<h4 id="navigation">Navigation</h4>
<ul>
<li>Use <code>Ctrl+Shift+E</code> to open the Explorer (file tree)</li>
<li>Use <code>Up/Down Arrow</code> to navigate files</li>
<li>Press <code>Enter</code> on a file to open it in the editor</li>
<li>The editor behaves like a standard text area - your screen reader's reading commands work normally</li>
</ul>
<h4 id="nvdajaws-users">NVDA/JAWS users</h4>
<ul>
<li>You remain in Browse/Virtual mode for the overall interface</li>
<li>When focus enters the editor text area, you are automatically in Forms/Focus mode</li>
<li>All standard cursor movement works: <code>Home</code>, <code>End</code>, <code>Ctrl+Home</code>, <code>Ctrl+End</code>, <code>Ctrl+F</code> to find</li>
</ul>
<h4 id="voiceover-users">VoiceOver users</h4>
<ul>
<li>Quick Nav OFF when inside the editor (<code>Left Arrow + Right Arrow</code> to toggle)</li>
<li>Use <code>VO+Shift+Down</code> to interact with the editor area</li>
<li>Standard text navigation (<code>Control+A</code> for line start, <code>Control+E</code> for line end, etc.)</li>
</ul>
<h3 id="learning-cards-githubdev">Learning Cards: github.dev</h3>
<details>
<summary>Screen reader users</summary>
<ul>
<li>Press <code>.</code> (period, no modifiers) on any GitHub repository page to open github.dev instantly -- your screen reader announces the VS Code interface loading</li>
<li>Immediately press <code>Shift+Alt+F1</code> (Mac: <code>Shift+Option+F1</code>) to enable screen reader mode after github.dev loads</li>
<li>Use <code>Ctrl+Shift+O</code> (Mac: <code>Cmd+Shift+O</code>) to navigate by headings in Markdown files -- this is the fastest way to scan a document</li>
</ul>
</details>
<details>
<summary>Low vision users</summary>
<ul>
<li>github.dev inherits your browser zoom level -- use <code>Ctrl+=</code> (Mac: <code>Cmd+=</code>) to enlarge the entire editor before you start working</li>
<li>Switch to a High Contrast theme via Command Palette (<code>Ctrl+Shift+P</code> then type "Color Theme") -- this persists for the session</li>
<li>The minimap on the right edge of the editor shows a zoomed-out preview of your file; disable it in Settings if it is distracting at high zoom</li>
</ul>
</details>
<details>
<summary>Sighted users</summary>
<ul>
<li>Look for the URL changing from <code>github.com</code> to <code>github.dev</code> to confirm you are in the web editor</li>
<li>The Activity Bar on the left and the Status Bar at the bottom look identical to desktop VS Code</li>
<li>Use <code>Ctrl+P</code> (Mac: <code>Cmd+P</code>) to open the quick file picker -- start typing a filename and select from the dropdown</li>
</ul>
</details>
<h3 id="try-it-right-now">Try It Right Now</h3>
<p>Before reading the rest of this guide:</p>
<ol>
<li>Open your Learning Room repository in your browser</li>
<li>Press <code>.</code> (period key)</li>
<li>github.dev opens</li>
<li>Press <code>Shift+Alt+F1</code> (Mac: <code>Shift+Option+F1</code>) to enable screen reader mode</li>
<li>Press <code>Ctrl+Shift+E</code> (Mac: <code>Cmd+Shift+E</code>) to open the Explorer</li>
<li>Navigate to <code>README.md</code> and press <code>Enter</code></li>
<li>Press <code>Ctrl+Home</code> (Mac: <code>Cmd+Up</code>) to go to the top of the file</li>
<li>Press <code>Ctrl+Shift+O</code> (Mac: <code>Cmd+Shift+O</code>) to see the outline (all headings)</li>
<li>Close the tab when done</li>
</ol>
<p><strong>You just used VS Code.</strong> The desktop version in the rest of this guide is the same experience - with Copilot, agents, and a terminal added.</p>
<hr>
<h2 id="3-screen-reader-mode-in-vs-code">3. Screen Reader Mode in VS Code</h2>
<blockquote>
<p><strong>See also:</strong> <a href="12-vscode-accessibility.html">Chapter 12: VS Code Accessibility</a> goes deeper into accessibility features, Accessible View, and signal customization.</p>
</blockquote>
<blockquote>
<p><strong>Who needs this section?</strong> 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 <a href="#4-the-vs-code-interface-tour">Section 4</a> - VS Code works fully without enabling this mode.</p>
</blockquote>
<p>VS Code has built-in accessibility support designed for screen reader users. It changes how focus moves, how announcements work, and how navigation behaves.</p>
<h3 id="activating-screen-reader-mode">Activating Screen Reader Mode</h3>
<table>
<thead>
<tr>
<th scope="col">Method</th>
<th scope="col">Steps</th>
</tr>
</thead>
<tbody><tr>
<td>Keyboard shortcut</td>
<td><code>Shift+Alt+F1</code> (Windows) / <code>Shift+Option+F1</code> (Mac)</td>
</tr>
<tr>
<td>Command Palette</td>
<td><code>Ctrl+Shift+P</code> (Windows) / <code>Cmd+Shift+P</code> (Mac) then type "screen reader" then select "Toggle Screen Reader Accessibility Mode"</td>
</tr>
<tr>
<td>Auto-detection</td>
<td>VS Code detects NVDA and JAWS automatically on Windows; VoiceOver on macOS</td>
</tr>
</tbody></table>
<h4 id="verify-it-is-active">Verify it is active</h4>
<p>Open Settings (<code>Ctrl+,</code> - Mac: <code>Cmd+,</code>) then search for <code>accessibility support</code> then confirm it shows <code>on</code> (not <code>auto</code>).</p>
<h3 id="what-changes-in-screen-reader-mode">What Changes in Screen Reader Mode</h3>
<table>
<thead>
<tr>
<th scope="col">Area</th>
<th scope="col">Normal Mode</th>
<th scope="col">Screen Reader Mode</th>
</tr>
</thead>
<tbody><tr>
<td>Suggestions list</td>
<td>Popup overlay</td>
<td>Announced via ARIA live region</td>
</tr>
<tr>
<td>Diff navigation</td>
<td>Visual highlighting</td>
<td>Announces "Added" / "Removed" before line content</td>
</tr>
<tr>
<td>Error indicators</td>
<td>Red underlines</td>
<td>Announced on focus</td>
</tr>
<tr>
<td>Inline decorations</td>
<td>Displayed visually</td>
<td>Suppressed to reduce noise</td>
</tr>
<tr>
<td>Tab completion</td>
<td>Visual ghost text</td>
<td>Announced as suggestion</td>
</tr>
</tbody></table>
<h3 id="nvda-specific-settings-for-vs-code">NVDA-Specific Settings for VS Code</h3>
<p>VS Code uses a web-based renderer. Configure NVDA for best results:</p>
<ol>
<li>Open NVDA Menu then Preferences then Settings then Browse Mode</li>
<li>Set "Maximum length of text on a single line" to <code>10000</code> (prevents truncation in long lines)</li>
<li>Under Object Presentation: set "Report tooltip delay" to <code>off</code></li>
<li>Recommended: use <strong>NVDA + Google Chrome</strong> for the integrated browser panels</li>
</ol>
<h3 id="jaws-specific-settings-for-vs-code">JAWS-Specific Settings for VS Code</h3>
<ol>
<li>JAWS should detect VS Code automatically and switch to PC Cursor mode for the editor</li>
<li>If the editor feels unresponsive, press <code>Insert+Z</code> to toggle virtual cursor off</li>
<li>For the integrated terminal: use <code>Insert+Z</code> to enter forms/PC mode, then interact with the terminal</li>
</ol>
<h3 id="voiceover-specific-settings-for-vs-code-macos">VoiceOver-Specific Settings for VS Code (macOS)</h3>
<ol>
<li>Open VS Code then <code>Shift+Alt+F1</code> (Mac: <code>Shift+Option+F1</code>) to confirm screen reader mode</li>
<li>In VoiceOver Utility: Verbosity then set "Punctuation" to "All" for reading code</li>
<li>Use Quick Nav OFF (<code>Left+Right Arrow</code>) when inside the editor - standard cursor navigation is more predictable</li>
<li>Use <code>VO+Shift+Down</code> to interact with the editor, <code>VO+Shift+Up</code> to stop interacting</li>
</ol>
<blockquote>
<p><strong>If VoiceOver says "selection replaced" when you type:</strong> some learners on macOS hear "selection replaced" when they type the first character in a file in the editor, in a new file or an existing one. Nothing has been replaced: your text is intact, and you can check by reading the line with <code>VO+L</code>. The cause is not yet known, and the same announcement has been reported in other Markdown editors, so it may come from VoiceOver rather than VS Code. Turning off macOS text replacements did not stop it. If it happens to you, add your macOS, VoiceOver and VS Code versions to <a href="https://github.com/Community-Access/git-going-with-github/issues/175">issue #175</a> so we can narrow it down.</p>
</blockquote>
<h3 id="learning-cards-screen-reader-mode">Learning Cards: Screen Reader Mode</h3>
<details>
<summary>Screen reader users</summary>
<ul>
<li>Toggle screen reader mode with <code>Shift+Alt+F1</code> (Mac: <code>Shift+Option+F1</code>) -- VS Code announces "Screen reader optimized" when activated</li>
<li>Set <code>editor.accessibilitySupport</code> to <code>"on"</code> (not <code>"auto"</code>) in Settings (<code>Ctrl+,</code>) for consistent behavior across sessions</li>
<li>NVDA users: set "Maximum length of text on a single line" to 10000 in Browse Mode settings to prevent long code lines from being truncated</li>
</ul>
</details>
<details>
<summary>Low vision users</summary>
<ul>
<li>Screen reader mode suppresses inline decorations that can clutter the display -- enable it even if you use a magnifier for a cleaner view</li>
<li>Pair screen reader mode with a High Contrast theme (<code>Ctrl+Shift+P</code> then "Color Theme") for maximum readability</li>
<li>Use <code>Ctrl+=</code> / <code>Ctrl+-</code> (Mac: <code>Cmd+=</code> / <code>Cmd+-</code>) to adjust font size independently of your OS zoom settings</li>
</ul>
</details>
<details>
<summary>Sighted users</summary>
<ul>
<li>Screen reader mode is invisible to sighted users -- you will not notice any visual changes if you toggle it on</li>
<li>If you are pair-programming with a screen reader user, enable it so the experience is consistent for both of you</li>
<li>The mode changes how suggestions are announced but does not remove any visual features you rely on</li>
</ul>
</details>
<hr>
<h2 id="4-the-vs-code-interface-tour">4. The VS Code Interface Tour</h2>
<p>Before diving into individual features, here is how VS Code is organized. Every area is reachable by keyboard.</p>
<h3 id="the-five-major-regions">The Five Major Regions</h3>
<table>
<thead>
<tr>
<th scope="col">Region</th>
<th scope="col">Where it sits</th>
<th scope="col">What it contains</th>
</tr>
</thead>
<tbody><tr>
<td>Menu Bar</td>
<td>Full width across the top</td>
<td>File, Edit, View, Go, Run, Terminal, Help menus</td>
</tr>
<tr>
<td>Activity Bar</td>
<td>Vertical strip along the left edge</td>
<td>Icons for Explorer, Source Control, Search, Extensions, Accounts</td>
</tr>
<tr>
<td>Sidebar</td>
<td>Right of the Activity Bar</td>
<td>Content for the selected activity (file tree, search results, etc.)</td>
</tr>
<tr>
<td>Editor Area</td>
<td>Large central region</td>
<td>Your open files</td>
</tr>
<tr>
<td>Panel</td>
<td>Below the Editor Area</td>
<td>Terminal, Problems, Output, Debug Console tabs</td>
</tr>
<tr>
<td>Status Bar</td>
<td>Very bottom, full width</td>
<td>Line, column, language, Git branch, Copilot status, encoding, notifications</td>
</tr>
</tbody></table>
<p><strong>How the regions fit together:</strong> VS Code has five major regions arranged in a grid. The <strong>Menu Bar</strong> spans the full width across the top. Below it, the <strong>Activity Bar</strong> runs vertically along the left edge (it contains icons for Explorer, Source Control, Search, Extensions, and more). The <strong>Sidebar</strong> appears to the right of the Activity Bar and shows content for the selected activity (file tree, search results, etc.). The <strong>Editor Area</strong> fills the large central region where your files open. Below the Editor Area, the <strong>Panel</strong> stretches across the bottom and contains the Terminal, Problems, Output, and Debug Console tabs. Finally, the <strong>Status Bar</strong> runs along the very bottom showing line number, column, language mode, Git branch, Copilot status, encoding, and notifications.</p>
<h3 id="navigating-between-regions">Navigating Between Regions</h3>
<table>
<thead>
<tr>
<th scope="col">Region</th>
<th scope="col">Keyboard Shortcut</th>
<th scope="col">What You Hear (Screen Reader)</th>
</tr>
</thead>
<tbody><tr>
<td>Activity Bar icons</td>
<td><code>Ctrl+Shift+E</code> / <code>G</code> / <code>F</code> / <code>X</code> / etc.</td>
<td>"Explorer", "Source Control", etc.</td>
</tr>
<tr>
<td>Sidebar content</td>
<td>Follows activity bar selection</td>
<td>Tree view or list content</td>
</tr>
<tr>
<td>Editor area</td>
<td><code>Ctrl+1</code> (first editor group)</td>
<td>File name and cursor position</td>
</tr>
<tr>
<td>Panel</td>
<td><code>Ctrl+Backtick</code> (terminal) or <code>Ctrl+Shift+M</code> (problems)</td>
<td>Panel name announcement</td>
</tr>
<tr>
<td>Status Bar</td>
<td><code>F6</code> cycles through regions</td>
<td>Status bar items read left to right</td>
</tr>
</tbody></table>
<p><strong>Key insight:</strong> Press <code>F6</code> 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.</p>
<h3 id="learning-cards-finding-your-way-around-vs-code">Learning Cards: Finding Your Way Around VS Code</h3>
<details>
<summary>Screen reader users (NVDA / JAWS / VoiceOver)</summary>
<ul>
<li><strong>F6</strong> is your best friend - it cycles through regions and your screen reader announces each one</li>
<li><strong>Ctrl+Shift+P</strong> (Command Palette) is your safety net - type any action name and VS Code finds it</li>
<li><strong>Alt+H</strong> (Accessible Help) tells you what shortcuts work in your current context</li>
<li>Use <strong>Ctrl+Shift+E</strong> for Explorer, <strong>Ctrl+Shift+G</strong> for Source Control, <strong>Ctrl+Shift+F</strong> for Search</li>
<li>The editor text area acts like a standard text field - all your screen reader reading commands work</li>
</ul>
</details>
<details>
<summary>Low vision users</summary>
<ul>
<li><strong>Ctrl+=</strong> / <strong>Ctrl+-</strong> to zoom the entire VS Code window (all UI elements scale)</li>
<li><strong>Ctrl+,</strong> then search <code>editor.fontSize</code> to set a comfortable default editor font size</li>
<li><strong>Ctrl+,</strong> then search <code>window.zoomLevel</code> to set a persistent zoom level</li>
<li>High Contrast themes: <strong>Ctrl+K Ctrl+T</strong> then choose "High Contrast" or "High Contrast Light"</li>
<li><strong>Ctrl+,</strong> then search <code>minimap</code> - set <code>editor.minimap.enabled</code> to <code>false</code> to remove the small code overview that may be hard to see</li>
<li><strong>Ctrl+B</strong> toggles the sidebar to give the editor more space</li>
</ul>
</details>
<details>
<summary>Sighted users</summary>
<ul>
<li>Click icons in the Activity Bar (left edge) to switch sidebar views</li>
<li>The bottom Panel shows Terminal, Problems, Output, and Debug Console</li>
<li>Drag panel borders to resize regions or double-click to collapse them</li>
<li><strong>Ctrl+B</strong> toggles the sidebar for a wider editor area</li>
<li><strong>Ctrl+J</strong> toggles the bottom Panel</li>
<li><strong>Ctrl+Shift+P</strong> opens the Command Palette - the universal search for any action</li>
</ul>
</details>
<hr>
<h2 id="5-the-accounts-button-and-github-sign-in">5. The Accounts Button and GitHub Sign-In</h2>
<blockquote>
<p><strong>See also:</strong> <a href="14-git-in-practice.html">Chapter 14: Git in Practice</a> covers the full Git workflow in VS Code including the Source Control panel.</p>
</blockquote>
<p>The <strong>Accounts</strong> 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.</p>
<h3 id="why-sign-in-matters">Why Sign In Matters</h3>
<ul>
<li><strong>GitHub Copilot</strong> requires an active GitHub sign-in to function</li>
<li><strong>Settings Sync</strong> requires sign-in to synchronize your preferences across machines</li>
<li><strong>GitHub Pull Requests extension</strong> needs authentication to create and review PRs from VS Code</li>
<li>Your GitHub identity appears in commits you make from VS Code</li>
</ul>
<h3 id="signing-in">Signing In</h3>
<h4 id="from-the-accounts-button">From the Accounts Button</h4>
<ol>
<li>Press <code>F6</code> until you hear the Activity Bar, then arrow down to the <strong>Accounts</strong> button (it is at the very bottom of the bar)</li>
<li>Press <code>Enter</code> to open the Accounts menu</li>
<li>Select <strong>"Sign in with GitHub to use GitHub Copilot"</strong> (or a similar prompt)</li>
<li>A browser window opens for GitHub OAuth authorization</li>
<li>Authorize VS Code, then return to the editor</li>
<li>Your screen reader announces your GitHub username in the Accounts button</li>
</ol>
<h4 id="from-the-command-palette">From the Command Palette</h4>
<ol>
<li>Press <code>Ctrl+Shift+P</code> then type <code>sign in</code></li>
<li>Select <strong>"GitHub: Sign In"</strong></li>
<li>Complete the browser OAuth flow and return to VS Code</li>
</ol>
<h3 id="verifying-you-are-signed-in">Verifying You Are Signed In</h3>
<ul>
<li><strong>Accounts button:</strong> Press <code>F6</code> to reach the Activity Bar, arrow down to Accounts. A screen reader announces your username.</li>
<li><strong>Command Palette:</strong> <code>Ctrl+Shift+P</code> then type <code>GitHub Copilot: Status</code>. If Copilot shows ready, you are signed in.</li>
<li><strong>Status Bar:</strong> Look for (or hear) the Copilot icon in the status bar at the bottom of the window.</li>
</ul>
<h3 id="learning-cards-github-sign-in">Learning Cards: GitHub Sign-In</h3>
<details>
<summary>Screen reader users</summary>
<ul>
<li>Press <code>F6</code> to cycle to the Activity Bar, then <code>Down Arrow</code> to the bottom to find the Accounts button</li>
<li>After signing in, the Accounts button label changes from "Accounts" to your GitHub username</li>
<li>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</li>
</ul>
</details>
<details>
<summary>Low vision users</summary>
<ul>
<li>The Accounts icon is the person silhouette at the bottom of the leftmost icon column</li>
<li>After sign-in, a small dot or badge appears on the icon indicating active session</li>
<li>If the icon is hard to see, use <strong>Ctrl+Shift+P</strong> and type <code>Accounts</code> to manage sign-in from the Command Palette</li>
</ul>
</details>
<details>
<summary>Sighted users</summary>
<ul>
<li>Click the person icon at the bottom of the Activity Bar</li>
<li>A dropdown menu shows your sign-in status and available accounts</li>
<li>After sign-in, the icon changes to show your GitHub avatar</li>
</ul>
</details>
<hr>
<h2 id="6-verifying-github-copilot-status">6. Verifying GitHub Copilot Status</h2>
<p>GitHub Copilot is your AI pair programmer. Before starting any contribution work, confirm it is active and responding.</p>
<h3 id="where-to-check-copilot-status">Where to Check Copilot Status</h3>
<h4 id="status-bar-indicator">Status Bar Indicator</h4>
<p>The Copilot icon appears in the <strong>Status Bar</strong> at the bottom-right of the VS Code window.</p>
<table>
<thead>
<tr>
<th scope="col">Icon State</th>
<th scope="col">Meaning</th>
</tr>
</thead>
<tbody><tr>
<td>Copilot icon (normal)</td>
<td>Copilot is active and ready</td>
</tr>
<tr>
<td>Copilot icon with warning triangle</td>
<td>Copilot has a configuration issue</td>
</tr>