スクリーンリーダーでプログラミング：エラーとツールチップの読み上げ

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

今回はエディタに表示されるエラーやツールチップをスクリーンリーダーに読み上げさせる方法について書いていきます。

環境

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

エラーを読み上げさせる

VSCodeを使用する場合の話となります。

晴眼者の場合、エディタに表示されているエラーを見つける方法として
・エラー箇所の赤線を見る
・VSCodeのProblems Viewの項目を見る
といった方法があると思います。

しかし、視覚障害があるなどの理由で視覚的な確認が難しい場合はスクリーンリーダーにエラーを読み上げさせる必要があります。

方法①：Problems Viewを使う

１，Ctrl+Shift+Pでコマンドパレットを開く
２，Problems:Focus on Problems Viewを選択（ショートカットを登録しておくと楽）

これで、どのファイルで何のエラーが発生しているかスクリーンリーダーに読み上げさせることができます。またエラー項目上でEnterを押すと、エラー箇所にジャンプすることができます。

方法②：Alt+F8を使う

Alt＋F8を押すことで現在編集している箇所より後方のエラーにジャンプすることができます。またジャンプした際にエラーの内容をスクリーンリーダーが読み上げてくれます（escキーでエラー表示を閉じる）。しかし、エラーの内容を一文字ごとに読ませることができないため（何か方法があったら教えてください...）エラーの内容をじっくり確認したい場合は

1,　Problems:Focus on Problems Viewを選択
2,　エラーにフォーカスを合わせてShift+F10
3,　Copy Messageでエラーをコピーしてどこかに貼り付けて確認

という方法があります。

ツールチップを読み上げさせる

ツールチップというのはコードを書く際のヒントを表示するものです。
例として関数のツールチップを表示させると

・引数がとりうる型の種類
・関数の返り値の型

といった情報を表示させることができます。

ツールチップは表示させたい箇所にマウスを重ねることで表示させることができるのですが、
キーボードの場合、Ctrl＋k＋i を押すことで表示させることができます（escキーでツールチップを閉じる）。また、マウスでの表示とは違いスクリーンリーダーがツールチップの内容を読み上げてくれます。しかし、表示されるツールチップを一文字ずつ読み上げさせる方法が分からないので、ご存じの方がいたら教えていただきたいです。

エラーが吐き出されやすい環境を作る

今回はエディタに表示されているエラーを見つける方法を書いてきました。しかし、エディタに表示されないエラーに対してはこの方法は適用できません。ということでエラーが吐き出されやすい環境を作ることも大切です。例えば、私の環境ではJavascriptで以下のようなコードを書いたときにはエラーが表示されません

function typoFunction(arg){
   console.log(atg)
}

しかし、TypeScriptで同じコードを書いたときには「Cannot find name 'atg'.」というエラーが吐き出されます。

function typoFunction(arg){
   console.log(atg)　//Cannot find name 'atg'.
}

視覚に頼れない場合にはデバックが大きな問題となると思います。
デバックにかかる時間を減らすために宣言型の言語を使うということも一つの良いアプローチかもしれません。

予測変換をやり直す方法

タイプミスを減らすために予測変換を使用することは必須となります。
しかし、以下のコードのように予測変換を間違えて選択してしまうことは多々起こることです。

function getElement(){
   // document.getElementByIdと書きたいが間違えた
   document.getElementsByClassName
}

このような場合 Ctrl+z で予測変換をする前の段階に戻し、 Ctrl+i で予測変換をやり直すことができます。

function getElement(){
   //Ctrl+zで document.getまで戻す
   document.get
}

function getElement(){
   // Ctrl+iで予測変換をやり直す
   document.getElementById
}

まとめ

今回書いた内容以外にも良い方法などありましたら是非、情報発信をしていただけると大変助かります。