Skip to content

Commit ef0bb74

Browse files
author
GitHub Workshop Bot
committed
Enhance docs with GitHub accessibility guide content and rebuild HTML
- Ch02: Add official repos screen reader guide reference, landmark names tip, enhanced Watch section with Custom notification option - Ch04: Add official issues screen reader guide reference, NVDA+F7 orientation tip, filter state caveat note - Ch06: Add official PRs screen reader guide reference, Copilot actions button tip, Resolve Conversations section, Checks Tab section, enhanced diff navigation with Ctrl+Alt+Arrow keys, delete branch tip after merge - Ch13: Add 3 official guide references (Copilot, custom instructions, custom agents), Shift+Alt+F1 screen reader mode toggle, Built-in Actions via Command Palette section, accessibility resources (A11y LLM Eval, Beast Mode Prompt, Markdown A11y Guidelines), video tutorial links for screen readers - Rebuild all HTML from updated markdown (230 files)
1 parent 07ee858 commit ef0bb74

File tree

125 files changed

+12229
-1815
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

125 files changed

+12229
-1815
lines changed

docs/00-pre-workshop-setup.md

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,14 @@ That is it. No tokens to generate, no keys to create, no strings to paste. If yo
153153

154154
> **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.
155155
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+
156164
> **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).
157165
158166
Workshop policy
@@ -293,10 +301,11 @@ A profile picture humanizes your contributions. It can be a photo or any image.
293301

294302
## Step 4 - Check GitHub Feature Preview Settings
295303

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:
297305

298306
- **New Issues Experience** - improves heading hierarchy, ARIA landmark structure, and live-region announcements on the Issues pages
299307
- **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
300309

301310
Both have been broadly rolled out and may already be active on your account. Check before the workshop begins.
302311

@@ -335,6 +344,7 @@ Both have been broadly rolled out and may already be active on your account. Che
335344
- An **"Enable"** button - press `Enter` to enable the feature
336345
- A **"Disable"** button - the feature is already enabled; no action needed
337346
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
338348

339349
</details>
340350

@@ -351,6 +361,7 @@ Both have been broadly rolled out and may already be active on your account. Che
351361
8. Press `Tab` to move to the end of the feature detail section
352362
9. If you hear **"Enable"**, press `VO+Space` to activate it. If you hear **"Disable"**, it is already on.
353363
10. Repeat for **"New Files Changed Experience"**
364+
11. Repeat for **"GitHub Command Palette"** if it appears in the list
354365

355366
</details>
356367

@@ -364,6 +375,7 @@ If you open Feature Preview and neither **"New Issues Experience"** nor **"New F
364375
| --------- | ------------------------------------------ |
365376
| **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. |
366377
| **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. |
367379

368380
> **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.
369381
@@ -626,6 +638,13 @@ This extension lets you review and manage pull requests without leaving VS Code.
626638
3. Press `Tab` to move into the results list
627639
4. Arrow down to find **"GitHub Pull Requests"** with publisher **"GitHub"**
628640
- 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**.
629648
5. Press `Enter` to open the details page
630649
6. Press `Tab` to the **Install** button and press `Enter` or `Space`
631650
7. VS Code will announce when installation is complete

docs/02-navigating-repositories.md

Lines changed: 77 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
> This guide covers everything you need to explore a GitHub repository using your keyboard and screen reader. No mouse required.
88
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+
911

1012
## Workshop Recommendation (Chapter 2)
1113

@@ -25,6 +27,20 @@ Use this sequence before moving to graded chapters:
2527
4. Move to Chapter 4 for issue-based, traceable challenges.
2628

2729

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+
2844
## What Is a Repository Page?
2945

3046
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
5066
Step 3: Press NVDA+F7 (or VO+U) - scan headings to understand what's on the page
5167
```
5268

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+
5371

5472
## Navigating the Repository Tabs
5573

@@ -64,6 +82,19 @@ The tab bar is visible just below the repository name. Click the tab you want -
6482

6583
</details>
6684

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.
95+
96+
</details>
97+
6798
<details>
6899
<summary>Screen reader users (NVDA / JAWS)</summary>
69100

@@ -98,8 +129,19 @@ The file table is the main panel of the Code tab, showing folders and files with
98129

99130
</details>
100131

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>
103145

104146
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.”
105147

@@ -145,6 +187,19 @@ Mouse users see the current branch name as a button with a dropdown arrow (e.g.,
145187

146188
</details>
147189

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.
200+
201+
</details>
202+
148203
<details>
149204
<summary>Screen reader users (NVDA / JAWS)</summary>
150205

@@ -247,6 +302,24 @@ cd learning-room
247302
</details>
248303

249304

305+
## 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+
250323
## Watching, Starring, and Forking
251324

252325
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
266339
1. Press `L` to navigate through list items to reach the **Main** landmark
267340
2. Continue pressing `L` until you find the **Watch** button (reads as “Watch this repository”)
268341
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
270343
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.
271345

272346
</details>
273347

0 commit comments

Comments
 (0)