スクリーンリーダーでプログラミング：キーボードによる範囲選択

こんにちは、土田淳也(@mocoatuya)です。
スクリーンリーダーで快適にプログラミングができる方法を探してメモを残していこうと思っています。

今回はVSCodeでのキーボードを使った範囲選択の方法について書いていきます。

環境

OS：Windows10
スクリーンリーダー：NVDA
音声エンジン：JTalk
エディタ：VSCode
ターミナル：Windows Terminal

単語ごとの選択

「Ctrl」+「Shift」+「→（もしくは←）」で単語ごとの選択ができます。

一行ごとの選択

「Ctrl」+「l」で一行の選択ができます。複数回「Ctrl」+「l」を押すことで複数行の選択ができます。

一定の範囲ごとの選択

「Shift」+「Alt」+「→」で選択範囲を広げる
「Shift」+「Alt」+「←」で選択範囲を狭める

「Shift」+「Alt」+「→（もしくは←）」により一定の範囲をまとめて選択することができます。カーソルの位置により選択される範囲に違いが出てくるので注意が必要ですが、ある親要素の子要素をまとめて選択するなどの使い方ができます。視覚的にインデントの情報を得ることができない場合に非常に強力なショートカットになります。

以下に示すhtmlの例では,
<div id="target">の直後にカーソルがある状態でShift+Alt+→を押すことで
<div id="target">の子要素をすべて選択することができます。

    <div>
     <div id="target">
       <p>まとめて選択されます</p>
       <p>まとめて選択されます</p>
       <p>まとめて選択されます</p>
       <p>まとめて選択されます</p>
       <p>まとめて選択されます</p>
       <p>まとめて選択されます</p>
     </div>
   </div>  

また以下のJavascriptのように関数が入れ子になっている場合、スクリーンリーダーの読み上げでは対応するかっこが分かりづらい問題があります。

// かっこの数が多くて対応するかっこが分かりづらいJavascriptの例
function practiceShortCutKey(greeting,name) {
 if (greeting == "おはよう") {
   console.log("おはよう");
   if(name="NVDA"){console.log('NVDA')}
 } else if (greeting == "こんにちは") {
   console.log("こんにちは");
   if(name="NVDA"){console.log('NVDA')}
 } else if (greeting = "こんばんは") {
   console.log("こんばんは");
   if(name="NVDA"){console.log('NVDA')}
 }
}
practiceShortCutKey("こんばんは","NVDA");

このようなコードで特定のifの中身のみを選択したい場合などもShift+Alt+→で簡単に範囲選択することができます。

ただし、カーソルの位置により選択される範囲が異なるので注意が必要です。

選択範囲の読み上げ

選択された範囲は
デスクトップ用キーの場合　NVDAキー+Shift+上矢印
ラップトップ用キー場合　NVDAキー+Shift+S
で読み上げさせることができます。

まとめ

選択範囲をキーボードで指定する方法について書いてきました。
他にもスクリーンリーダーを使ったプログラミングでの良い工夫などありましたら是非情報発信してくださると幸いです。