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 sku
s 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:
- Get the
name
of the firstcart
item. Cursor is atwork point
. - Scroll to
products
. - Scan through the
products
until find the matchingname
(lookup point
). - Copy the
sku
. - Scroll back to the first item of
cart
(work point
). - Replace
xxx
with the copiedsku
. - 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 :
- 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. - Move the cursor to
lookup point
, copy the requiredsku
. - Press
Ctrl
+1
. This will move focus to editor group 1 with the cursor at the same position (work point
). - Paste the
sku
. - Press
Ctrl
+2
to focus on the editor group 2. Cursor on the editor groop 2 is still at thelookup point
. - 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 !
Top comments (0)