You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/00-pre-workshop-setup.md
+20-1Lines changed: 20 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -153,6 +153,14 @@ That is it. No tokens to generate, no keys to create, no strings to paste. If yo
153
153
154
154
> **Screen reader note:** The authorization page opens in your default browser. After approving, the browser shows a message saying you can return to VS Code. Use `Alt+Tab` (Windows) or `Cmd+Tab` (macOS) to switch back.
155
155
156
+
> **Default browser warning:** VS Code opens the GitHub authorization page in your operating system's **default browser**, not necessarily the browser you use day-to-day. If your default browser is set to something unexpected (for example, an older browser without your screen reader configured), the OAuth page may open in an unfamiliar environment.
157
+
>
158
+
> **Before the workshop:** Verify which browser is your OS default:
159
+
> -**Windows:** Settings, Apps, Default apps, look for "Web browser"
160
+
> -**macOS:** System Settings, Desktop and Dock, Default web browser
161
+
>
162
+
> Set it to the browser where your screen reader and GitHub login are already configured. This avoids a confusing moment during the first `git push` when the authorization page opens somewhere you did not expect.
163
+
156
164
> **Tip - GitHub Mobile for push notification 2FA:** If you have not already, install the free [GitHub Mobile](https://github.com/mobile) app (iOS and Android). Once linked to your account, every 2FA prompt becomes a single tap on a push notification instead of typing a 6-digit code. The app supports VoiceOver (iOS) and TalkBack (Android).
157
165
158
166
Workshop policy
@@ -293,10 +301,11 @@ A profile picture humanizes your contributions. It can be a photo or any image.
293
301
294
302
## Step 4 - Check GitHub Feature Preview Settings
295
303
296
-
GitHub continuously rolls out improvements to its interface. Some enhancements start as opt-in Feature Previews before becoming the standard experience. Two features matter most for screen reader users working through this workshop:
304
+
GitHub continuously rolls out improvements to its interface. Some enhancements start as opt-in Feature Previews before becoming the standard experience. Three features matter most for screen reader users working through this workshop:
297
305
298
306
-**New Issues Experience** - improves heading hierarchy, ARIA landmark structure, and live-region announcements on the Issues pages
299
307
-**New Files Changed Experience** - adds proper landmark structure, an accessible file tree, and better keyboard navigation to the Files Changed tab in Pull Requests
308
+
-**GitHub Command Palette** - a keyboard-first command launcher (`Ctrl+K` on Windows, `Cmd+K` on macOS) that lets you navigate to any repository, issue, PR, file, or page by typing its name. Faster than clicking through menus and fully accessible with screen readers
300
309
301
310
Both have been broadly rolled out and may already be active on your account. Check before the workshop begins.
302
311
@@ -335,6 +344,7 @@ Both have been broadly rolled out and may already be active on your account. Che
335
344
- An **"Enable"** button - press `Enter` to enable the feature
336
345
- A **"Disable"** button - the feature is already enabled; no action needed
337
346
11. Go back and repeat steps 9-10 for **"New Files Changed Experience"**
347
+
12. Repeat again for **"GitHub Command Palette"** if it appears in the list
338
348
339
349
</details>
340
350
@@ -351,6 +361,7 @@ Both have been broadly rolled out and may already be active on your account. Che
351
361
8. Press `Tab` to move to the end of the feature detail section
352
362
9. If you hear **"Enable"**, press `VO+Space` to activate it. If you hear **"Disable"**, it is already on.
353
363
10. Repeat for **"New Files Changed Experience"**
364
+
11. Repeat for **"GitHub Command Palette"** if it appears in the list
354
365
355
366
</details>
356
367
@@ -364,6 +375,7 @@ If you open Feature Preview and neither **"New Issues Experience"** nor **"New F
|**New Issues Experience**| Issues list uses proper `<ul>` list structure. Issue titles are h3 headings. ARIA live regions announce filter result updates. Toolbar uses arrow key navigation. Close issue via `Ctrl+Shift+Enter` from the comment box. |
366
377
|**New Files Changed Experience**| Files Changed tab includes a navigable file tree region. Diffs are structured as tables with row/column navigation. Filter changed files field is reachable with `E`. Inline comment mode activates with `Enter` on a focused diff line. |
378
+
|**GitHub Command Palette**| Press `Ctrl+K` (Windows) or `Cmd+K` (macOS) from any GitHub page to open a command palette. Type to search for repositories, issues, PRs, files, settings, or actions. Results appear in a list navigable with `Arrow` keys. Press `Enter` to go. Screen readers announce each result as you arrow through the list. Scope the search with prefixes: `#` for issues/PRs, `!` for projects, `>` for commands, `/` for files. |
367
379
368
380
> **Why this matters:** Without these features enabled, the keyboard and screen reader workflows described throughout this workshop will not match what you see on screen. Enabling them before you begin ensures everything works as documented.
369
381
@@ -626,6 +638,13 @@ This extension lets you review and manage pull requests without leaving VS Code.
626
638
3. Press `Tab` to move into the results list
627
639
4. Arrow down to find **"GitHub Pull Requests"** with publisher **"GitHub"**
628
640
- This extension was formerly named "GitHub Pull Requests and Issues" - either name is correct
641
+
642
+
> **Extension imposter warning:** The VS Code Marketplace contains third-party extensions with similar names. Always verify the **publisher** before installing. The correct extensions for this workshop are:
643
+
>
644
+
> -**GitHub Pull Requests** - publisher must be **GitHub** (verified badge)
645
+
> -**GitHub Copilot** - publisher must be **GitHub** (built in, no manual install needed)
646
+
>
647
+
> If the publisher name says anything other than "GitHub" (for example, a personal username or an unfamiliar company), **do not install it**. A screen reader user can verify the publisher: after arrowing to a search result, `Tab` forward past the extension name to hear "Publisher: GitHub" or similar. If you accidentally install a wrong extension, press `Ctrl+Shift+X`, find it, and select **Uninstall**.
629
648
5. Press `Enter` to open the details page
630
649
6. Press `Tab` to the **Install** button and press `Enter` or `Space`
631
650
7. VS Code will announce when installation is complete
Copy file name to clipboardExpand all lines: docs/02-navigating-repositories.md
+77-3Lines changed: 77 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,6 +6,8 @@
6
6
7
7
> This guide covers everything you need to explore a GitHub repository using your keyboard and screen reader. No mouse required.
8
8
9
+
> **Official GitHub Accessibility Guide:** GitHub publishes an NVDA-focused guide for navigating repositories with a screen reader at [Using GitHub Repositories with a Screen Reader](https://accessibility.github.com/documentation/guide/repos/). This chapter covers the same material with additional perspectives (VoiceOver, low vision, CLI) and workshop-specific guidance. Use the official guide as a companion reference.
10
+
9
11
10
12
## Workshop Recommendation (Chapter 2)
11
13
@@ -25,6 +27,20 @@ Use this sequence before moving to graded chapters:
25
27
4. Move to Chapter 4 for issue-based, traceable challenges.
26
28
27
29
30
+
### About Learning Cards in This Chapter
31
+
32
+
This chapter provides learning cards: expandable blocks that offer perspective-specific guidance for different ways of working. Not every card appears at every step. Open the ones that match how you work.
33
+
34
+
The following table describes the four learning card types used in this chapter.
35
+
36
+
| Card | Who it helps | What it covers |
37
+
| --- | --- | --- |
38
+
| Visual / mouse | Sighted users navigating with a mouse or trackpad | Click targets, visual cues, layout orientation |
39
+
| Low vision | Users with magnification, zoom, or high-contrast themes | Zoom-friendly navigation, locating controls at high magnification |
40
+
| Screen reader (NVDA / JAWS) | Screen reader users on Windows | Keystroke sequences, Focus and Browse mode, landmark navigation |
41
+
| Screen reader (VoiceOver) | Screen reader users on macOS | VO key sequences, rotor usage, interaction model |
42
+
43
+
28
44
## What Is a Repository Page?
29
45
30
46
When you navigate to a GitHub repository (e.g., `https://github.com/owner/repo-name`), you land on the **repository home page** (also called the Code tab). This page has several distinct regions:
@@ -50,6 +66,8 @@ Step 2: Press D - navigate through landmarks to learn page structure
50
66
Step 3: Press NVDA+F7 (or VO+U) - scan headings to understand what's on the page
51
67
```
52
68
69
+
> **Key landmark names you will hear with `D`:** Repository pages have three main landmark sections: **"Repository Navigation"** (the tab bar), **"Main"** (the file tree, branch selector, repo details, and contributors), and **"Repository Files Navigation"** (the rendered README content). Within each landmark, press `H` or `2` to navigate subsections - most are organized under heading level 2.
70
+
53
71
54
72
## Navigating the Repository Tabs
55
73
@@ -64,6 +82,19 @@ The tab bar is visible just below the repository name. Click the tab you want -
64
82
65
83
</details>
66
84
85
+
<details>
86
+
<summary>Low vision users (zoom, high contrast)</summary>
87
+
88
+
The tab bar is just below the repository name. At 200% browser zoom or higher:
89
+
90
+
- The tabs may wrap to two lines. Each tab remains a standard link.
91
+
- The active tab is indicated by an underline. In Windows High Contrast mode, the underline uses the system accent color.
92
+
- Tab counts ("Issues · 14") appear as part of each tab's text and remain readable at high magnification.
93
+
- If tabs are hard to click at high zoom, press `Tab` from the repo heading to cycle through each tab link sequentially.
94
+
-**Keyboard shortcut:** Press `G` then `I` to jump directly to Issues, or `G` then `P` for Pull requests. These two-key shortcuts work from any page in the repository.
@@ -98,8 +129,19 @@ The file table is the main panel of the Code tab, showing folders and files with
98
129
99
130
</details>
100
131
101
-
<details>
102
-
<summary>Screen reader users</summary>
132
+
<details><summary>Low vision users (zoom, high contrast)</summary>
133
+
134
+
The file table occupies the main content area of the Code tab. At high magnification:
135
+
136
+
- The table has three columns: Name, Message (last commit), and Date. At 200%+ zoom, the Message and Date columns may be truncated. Hover over truncated text to see the full message in a tooltip.
137
+
- Folder icons appear before folder names; file icons appear before file names. In Windows High Contrast mode, these icons use system colors with visible outlines.
138
+
- Click any folder or file name to navigate into it. The names are standard links with hover underlines.
139
+
- Use `Ctrl+F` (browser Find) to search for a specific file name rather than scrolling a long file list at high zoom.
140
+
- The **Go to file** button (`T` keyboard shortcut) opens a search-as-you-type file finder. This is the fastest way to navigate to a specific file at any zoom level.
141
+
142
+
</details>
143
+
144
+
<details><summary>Screen reader users</summary>
103
145
104
146
Press `T` to jump to the next table on the page. The first table you will hit is usually the files table. NVDA will announce: “Table with [N] rows and 3 columns.”
105
147
@@ -145,6 +187,19 @@ Mouse users see the current branch name as a button with a dropdown arrow (e.g.,
145
187
146
188
</details>
147
189
190
+
<details>
191
+
<summary>Low vision users (zoom, high contrast)</summary>
192
+
193
+
The branch selector button shows the current branch name (e.g., "main") with a dropdown arrow. It sits just above the file table.
194
+
195
+
- At high magnification, the button may wrap next to other controls. It is a standard button with visible border and text.
196
+
- Click it to open a dropdown with a search field and branch list. Type part of a branch name to filter the list.
197
+
- In the dropdown, branch names can be long. At high zoom, they may truncate. Hover for the full name.
198
+
- In Windows High Contrast mode, the currently active branch is highlighted with the system selection color.
199
+
-**Alternative:** Press `W` to open the branch/tag picker directly from the keyboard. This avoids needing to find and click the button.
## Fork vs. Clone vs. Branch - What Is the Difference?
306
+
307
+
These three concepts are related but serve different purposes. Students often confuse them, so here is a side-by-side comparison.
308
+
309
+
The following table compares forks, clones, and branches across six dimensions.
310
+
311
+
| Dimension | Fork | Clone | Branch |
312
+
| --- | --- | --- | --- |
313
+
|**What it creates**| A new repository on GitHub under your account | A local copy of a repository on your computer | A named pointer to a line of commits within the same repository |
314
+
|**Where it lives**| On GitHub (your account) | On your local machine | Inside any repository (local or remote) |
315
+
|**Relationship to original**| Linked (GitHub tracks the "parent" repo) | Independent copy (but has `origin` remote pointing to GitHub) | Part of the same repository |
316
+
|**When to use it**| Contributing to a repo where you do not have write access (most open source) | Working locally with Git and VS Code | Creating an isolated workspace for a feature, fix, or experiment |
317
+
|**How to contribute back**| Open a pull request from your fork to the original (upstream) repo | Push your branch to the remote, then open a PR | Open a pull request from your branch to `main`|
318
+
|**Workshop usage**| Not required for the Learning Room (you have direct write access) | Optional in Block 0 (for local Git work in Ch11+) | Required from Chapter 6 onward (feature branches for every PR) |
319
+
320
+
**In this workshop,** you will primarily use **branches** (Chapter 6 onward) and optionally **clone** the Learning Room for local work (Chapter 11). Forking is the standard workflow when contributing to repositories where you are not a collaborator, which is covered in [Contributing to Open Source](appendix-t-contributing-to-open-source.md).
321
+
322
+
250
323
## Watching, Starring, and Forking
251
324
252
325
These three actions let you follow, bookmark, or copy a repository.
@@ -266,8 +339,9 @@ The **Watch**, **Star**, and **Fork** buttons are at the top-right of the reposi
266
339
1. Press `L` to navigate through list items to reach the **Main** landmark
267
340
2. Continue pressing `L` until you find the **Watch** button (reads as “Watch this repository”)
268
341
3. Press `Enter` to open the subscription submenu
269
-
4. Press `↑/↓` to browse options: Participating, All Activity, Ignore
342
+
4. Press `↑/↓` to browse options: Participating, All Activity, Ignore, Custom
270
343
5. Press `Enter` to confirm
344
+
6. If you choose **Custom**, a dialog opens with checkboxes for specific activity types (Issues, Pull requests, Releases, Discussions, Security alerts). Check the boxes you want and activate the **Apply** button.
0 commit comments