VSCode-Intro-YouTube ReadMe

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.

Why This Project

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.

VSCode Playlist

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

Short List Of YouTube Keystrokes

Note: Put your screen reader in browse mode to read the help screen.

Playlist Videos

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

VSCode Part 9A: an Emmet Table with Column and Row Headers 17:08 minutes

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

VSCode Part 10C, Snippet multi input block reusability demoed 08:49 minutes

• 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

VSCode Part 10D, Snippets Inline Choices and variables assigning key 17:56 minutes

• 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

Useful Resources related to this post and playlist

• Accessibility in VSCode
• Emmet in Visual Studio
• Emmet Cheat Sheet
• Table Element markup
• the Definitive VS Code Snippet Guide for Beginners

Repository and Other Pages

-GitHub Repository for files in the video by Lewis

• Blind Heroes YouTube Channel