VSCode - How to Jump between Points in a File

This article contains tips to jump between points (combination of line & column number) in a single file in VSCode for screen reader users (blind, visually impaired, etc).

This article is based on personal experience.

Background

I often face situation where I have to jump from 1 point to another line back and forth in a single file. It is a bit challenging for me since now I am a screen reader user.

As an example, in JSON file below I need to look for skus in products to replace sku (xxx) in the cart array. Imagine scenarios with much more products and more cart items. It will require me to traverse through the products for each cart item.

For this tutorial let's just say carts, that we need to fill in as a work point. And sku field , that we will look for, as a lookup point.

Sighted Users

This is how a sighted user typically will complete the task:

1. Get the name of the first cart item. Cursor is at work point.
2. Scroll to products.
3. Scan through the products until find the matching name (lookup point).
4. Copy the sku.
5. Scroll back to the first item of cart (work point).
6. Replace xxx with the copied sku.
7. Repeat from the beginning for the second item in cart.

The steps above are pretty simple because a sighted user only need to scroll down/up without having to repeatedly press keys to navigate.

Screen Reader Users

The Challenge

SC users (Screen reader users), on the other hand, do not use scrolling devices. They only use keyboards to give input to computer. SC users have to press key up / down to 'scroll' the pages.

During the navigation process, SC users have to press up/down key to move cursor 1 line to read each line until reaching the intended 'section'. It will require much longer time to complete simple task such as above, compared to sighted users.

Below are tips I used to workaround the challenge.

Let's consider an initial condition for each tips where the cursor is at "name" : "Milk" (line 4).

Use PgUp and PgDn Keys

Users can use PgUp, to move up 1 page, and PgDn to move down 1 page. Until approximately near the intended lines, the lookup point, user can use arrow up / down to read each line to get to the lookup point.

The challenge SC users may have with this method is to remember how many times they have to press PgUp or PgDn keys to jump back and forth betwen work point to lookup point. The distance between work point and lookup point may change everytime lines are inserted or deleted between those 2 points.

Use Line Numbers

Another way to jump is by remember the line number of the work point and line number near the lookup point.

To jump to a certain line number in VSCode : - Press `Ctrl` + ` G` to open a modal. - Type in the destination line number, then press `Enter`.

With this method SC users have to remember the line numbers and they will change everytime a line is inserted or deleted between work point and lookup point.

Find 'dummy' anchors

This was the method I preferred compared to the previous ones. We can use dummy anchors to mark the work point and lookup point. Dummy anchor, in my own term, is a sequence of characters that not existed in the file.

For example we can type `aaa` 1 line above work point and `bbb` near the lookup point. I use `aa` and `bbb` because I now there are no such substring in the related file and it just faster to type those characters. Then I use VSCode 'find' tool, press `Ctrl` + `F`, to jump between work point and lookup point.

The downside of this method is we have to remember to remove those dummy anchors after being used, and we have to move those dummy anchors if we want to change the jumping points. This is still not the ideal solution to match the scrolling speed used by sighted users.

Use multiple 'editor Group'

This is the ideal method I found out a while ago.

'Editor group' is group of 1 or multiple files or tabs. One of the benefit of usin multiple editors is to compare same file of different version (commit) side by side. We can also view the exactly same file version in multiple editor group at the same time. Any changes we make to file `xxx` in any editor group will instantly reflected in the same file `xxx` in other editor group.

When we start VSCode, by default, we will only have 1 editor group (Editor group 1). Pressing `Ctrl` + `2` will open empty editor group 2, `Ctrl` + `3` will open empty editor group 3, and so on.

Below are the steps to jump between work point and lookup point back and forth :

1. Press Ctrl + \ to open new editor group with the exact files currently being opened. The cursor will also at the same point (work point), but editor group 2 is active now.
2. Move the cursor to lookup point, copy the required sku.
3. Press Ctrl + 1. This will move focus to editor group 1 with the cursor at the same position (work point).
4. Paste the sku.
5. Press Ctrl + 2 to focus on the editor group 2. Cursor on the editor groop 2 is still at the lookup point.
6. Press Ctrl + 1 if we want to focus back to editor group 1.

We can use this method to jump between multiple points back and forth.

This method, IMHO, is faster than the 'scrolling' method commonly used by sighted users. To close editor group2, just close all the file in the editor group 2. Press `Ctrl` + `w` to close the currently focused file.

Conclusion

I just found out about the 'multiple editor groups' method few weeks ago. I am still trying to make that method a habit. By far using multiple editor groups to jump between points really increase my productivity.

I had been looking for a perfect way to jump between multiple points for a long time. By sharing my experience I hope this article could help some people, both sighted and screen reader users.

Good luck !