In this YouTube playlist I describe how we blind interact with Visual Studio Code editor using a screen reader. Transitioning can be quite overwhelming and daunting for those whom, the world has turned upside down by blindness. Young coders can also benefit by learning how a code editor such as vsCode works.
Unlike our sighted counterparts who use a graphical mouse and strategic right clicks to access context menus for selection, text moving, and pasting, we blind consume our code one line at a time. Many of the usual hints and messages sitting off to side go unnoticed for a very long time by blind coders. So, any help in jumping in and understanding why they would want to use certain capabilities can be overwhelming. My hope is that I provide the critical elements essential for code editing, navigation, selecting, cutting, and pasting. Also to make you aware on what some of those features are. I will give you a workflow and approaches to code while making the least amount of errors possible. I hope to fill in where documentation and other tutorials are lacking for visually impaired.
This YouTube playlist currently consists of 10 parts in a total of 14 videos. I have strived to make the videos as short as 15 minutes. Unfortunately, a few of them are 20+ minutes long. I have made it so that in one year you can hear my screen reader in one ear and my narration in the other. Making it easy for you to adjust the volumes of each of them based on your requirement. I am using Fusion with Jaws in this video, but all of this is valid for any other screen reader including NVDA.
vsCode Introduction using a screen reader
In order to make use of YouTube’s short cut keys, please turn off your screen navigation keys.
j or l will rewind or fast forward 10 seconds respectively
k to pause or play
shift < or > to increase or decrease playback rate
comma or . when paused will advance or go back a frame ( useful) for ocr and visually impaired
shift+N or P for next or previous video in the playlist
shift+? help screen ( you will need navigation keys for this dialogue)
Here are the individual videos You can click on them to go directly to them.
vsCode Part 1 Welcome
13:51 minutes
A Brief Introduction to vsCode. My screen reader customizations. How to explore debug console/terminal terminal tree. Some keys discussed.
vsCode Part 2settings, cmd palate, file explorer
11:41 minutes
How to change/modify settings from search and the JSON file. Workings of command palate and how to search it.
vsCode Part 3 Outline and brace Navigation
08:54 minutes
How to navigate large amounts of code use Outline navigation and matching braces navigation. This can be parenthesis, brackets as well. Using the keys ctrl + shift + o and ctrl + shift + backslash.
vsCode Part 4 Split Editor Groups Anchor Selection
17:29 minutes
How to perform split editing; this is where a file is being edited in 2 or more windows/groups. Explaining editor groups and how to perform a snippet and how to transfer code between snippets.
Lastly I demonstrate anchor selection, where to drop an anchor selection.
Selection of cursor from anchor point from anywhere in the code.
ctrl + backslash to split. ctrl + k ctrl + l to fold as well.
ctrl+k ctrl+b drop anchor, ctrl+k+ctrl+k to select from anchor to cursor.
vsCode Part 5 find replace text selection
15:41 minutes
How to use the “find and replace” feature and things to watch for as a blind coder (behavior). 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
- Use Emmet to create HTML 5.0 compliant Doc.
- Create a div label input from Emmet.
- Advantages of utilizing Emmet vs typing it all in manually for a blind person.
vsCode Part 7Emmet combobox
12:34 minutes
Using Emmet to generate a Select with 3 options. ComboBox.
vsCode Part 8Emmet List items
12:05
Using Emmet to generate List with 3 items containing links each.
vsCode Part 9a Emmet Table with Column Row Headings
17:08 minutes
Using Emmet to create multi column tables with accessibility in mind. Creating Row headers.
vsCode Part 9b Emmet Table
11:45 minutes
Using Emmet to create group type headers above the other hears. Fully accessible multi-layered tables with headings.
vsCode Part 10a Snippet Creation Prep Work
16:54 minutes
- Using Emmet to do the creation beginings. Prep work prior to putting 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
- Create a snippet file in the workspace. Then create the initial snippet in the file for testing purposes.
- Once tested, copy the single input line snippet we created in the previous video.
- Then we add outer quotes and commas, and verify test.
- In the next video we will make it a multi-line snippet.
vsCode Part 10c Snippet multi input block reusability demoed
08:49 minutes
The final steps to convert the single line input into a multi-line input snippet. Demonstration by 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 create a signature snippet with a stopping end point to fill in description.
- Creating a fun snippet assigned to a key where you can choose from a choice list of languages.
- Assigning signature snippet to key that automatically imports any selected text when invoked by the hotkey. More can be added if desired.
Useful Resources related to this post and playlist
the Definitive VS Code Snippet Guide for Beginners