This repository contains files used on the Intro To YouTube video playlist. See playlist link below.
Checkout the Article called VSCode Intro Repository for YouTube Video at Blind Heroes website
In this YouTube playlist, I describe how to interact with the VisualStudio Code editor using a screen reader.
Transitioning can be quite overwhelming and daunting for those who had had their world turned upside down by blindness. Young coders can benefit by learning how a code editor such as VSCode works. If you are a blind coder, you can do this.
People who are blind consume code line by line. Our sighted counterparts can take in a whole screen at a glance. Most VSCode instructions refer to using the mouse for selecting, cutting, pasting, moving, and copying text, and all other actions. People who are blind must rely on the keyboard to perform actions in VSCode and elsewhere. Many of the usual hints and messages sitting off to the side go unnoticed for a very long time, if at all. So any help in jumping in and understanding why you would want to use certain capabilities can be overwhelming.
In this video series, I provide the most critical elements for code editing, navigation, selection, cutting, copying, and pasting using only the keyboard. I give you a workflow and approach for entering code and creating the least amount of errors to fix. I fill in where documentation and other tutorials are lacking for people who are blind and visually impaired.
This YouTube playlist consists of 10 video parts and 14 videos. I strived to make the videos shorrt: 15 minutes or less. A few are 20+ minutes long. The sound of the screen reader is in one ear while the narration is in the other ear. This means you can adjust the volume of each ear separately. I use Fusion with Jaws in this video, but all content is valid for any other screen reader including NVDA.
See the next section for a short description of the individual videos. Click this link to go to the playlist.
VSCode Introduction using a screen reader
While watching the videos, turn off Browse mode to use YouTube's shortcut keys.
- In JAWS, press JAWSKey+Z
- In NVDA, press NVDA+SPACE
- In VoiceOver, press Left and Right arrows together
| To | Press |
|---|---|
| Rewind 10 seconds | j |
| Fast forward 10 seconds | l |
| Play and pause | k |
| Increase play rate or go forward a frame when paused | > |
| Decrease play rate or go back a frame when paused | < |
| Go to next video | SHIFT+N |
| Go to previous video | SHIFT+P |
| Get help | ? |
Note: Put your screen reader in browse mode to read the help screen.
Click these links to go to the individual videos.
VSCode Part 1, Welcome : 13:51 minutes
- Introduces the VSCode interface briefly
- Discusses some of my screen reader customizations
- How to explore the debug console/terminal terminal tree. Some keys discussed
VSCode Part 2: settings, Command palate, file explorer: 11:41 minutes
- Reviews how to change and modify settings from search and the JSON file.
- Discusses how the command palate works and how to search for commands.
VSCode Part 3: Outline and Pairs Navigation: 08:54 minutes
- How to navigate large amounts of code
- Using Outline Navigation
- Matching pairs navigation, including matching parentheses, brackets, and braces
- Using CONTROL+SHIFT+O and CONTROL+SHIFT+BACKSLASH
VSCode Part 4: Split Editor Groups Anchor Selection 17:29 minutes
- Explains how to perform split editing, so you can work on two parts of the same file in two windows
- Explains what editor groups are and how to use them
- How to perform snippets
- How to block copy a folded code section from one group to the newly created snippet code
- Demonstrates anchor selection: dropping an anchor , moving somewhere else in the code, and selecting from the anchor to the cursor, avoiding the need to hold the SHIFT key down to select content
- How to split and fold code
VSCode Part 5: Find and replace: 15:41 minutes
- How to use the find and replace dialog and the behavior to watch for as a blind coder
- Practices I use when selecting text and pasting code
VSCode Part 6: New project, Emmet, HTML doc label inputHtml, Emmet label input, new project ... 21:43 minutes
- Using Emmet to create HTML 5.0 compliant Documents
- Creating a div label input from Emmet
- Discusses the great advantages of using Emmet vs typing HTML manually
VSCode Part 7: Emmet Combobox 12:34 minutes
Using Emmet to generate a combobox with three selections.
VSCode Part 8Emmet List items 12:05 minutes
Useing Emmet to generate a List with 3 items containing links
Using Emmet to create multi column tables with accessibility in mind, including Row headers
VSCode Emmet Tables Part 9B, 11:45 minutes
Using Emmet to create group type headers above the other headers, totally accessible multi-layered tables with headings
VSCode Part 10A: Snippet Creation Prep Work 16:54 minutes
- Using Emmet to begin Prep work before making the snippet file
- Changing quotes to apostrophes
- Adding snippet variables in appropriate places with initial values for prompts
VSCode Part 10b Snippet File creation test 22:47 minutes
- Creating a snippet file in the workspace
- Creating the initial snippet in the file for testing everything
- Once tested, copying the single input line snippet we created in the previous video
- Adding outer quotes and commas, and verifying the test in preparation for the next video, in which we make a multi-line snippet
- Performing the final steps to convert the single line input into a multi line input snippet
- Creating 2 snippet blocks with different prompts and colors and borders each
- How to creat a signature snippet with a stopping end point to fill in description.
- Demonstrates a fun snippet assigned to a key where you choose from a choice list of languages.
- Assigning a signature snippet to a key that automatically imports any selected text when invoked by the hot key; You can add more if desired from there
- Accessibility in VSCode
- Emmet in Visual Studio
- Emmet Cheat Sheet
- Table Element markup
- the Definitive VS Code Snippet Guide for Beginners
-GitHub Repository for files in the video by Lewis