Line numbers are not keyboard/screen reader accessible
monaco-editor version: 0.8.3 Browser: Any OS: Windows 10
During Accessibility testing, it was found that users cannot get information regarding the current line number with a screen reader while using the up/down arrow keys to navigate through lines of code in Monaco. It correctly reads the code text, but there is no obvious way to hear the line number.
Personally, I don't believe that users would always want to hear the line number while navigating text, but perhaps a polite, slightly delayed, aria-live region that announced the line number after focus remains on a line of text would be good. Or perhaps additional line information could be read from a selection on the F1 command palette (and/or shortcut key) if the user desires it.
Shown below is what is read using NVDA while arrowing down, though other screen readers are similar.

Why do we need to address line numbers? Isn't that more 'meta-content' than actual 'content'? For example, I wouldn't expect different colored text to be handled and differently than plain text in a screen reader
IMHO, I don't think the current line number should be read at all when navigating the text. Perhaps there should be a keyboard bound command that announces the current position / selection state via an aria alert.
@zersiax since this applies also to VS Code, what do you think?
There is another related accessibility behaviour, which is there in Monaco. While tabbing into the editor in side by side diff mode, the cursor stays on the first line, in case of the left hand side diff, but moves to the first change on the right hand side.
The focus on the left hand side is often not visible, I cases, where the first change requires the view to scroll down. Posting it in this thread as it seems relevant to me
@sorosoro2 The diff editor is today exposed to screen readers as two separate editors, the left-hand-side (or original), which is read-only, and the right-hand-side (or modified), which, depending on whom integrates us, is read-only or editable. We need to change this and expose the diff editor to screen readers in a different way. This work is tracked in https://github.com/Microsoft/vscode/issues/17263
This issue exists in Azure Steam Analytics VSO , Bug Link : https://msdata.visualstudio.com/Azure%20Stream%20Analytics/_workitems?id=39899&_a=edit
Same issue exists in Azure Portal VSO, Bug Link : http://vstfrd:8080/Azure/RD/_workitems/edit/9286067?fullScreen=false
Hi VS Code PM here,
I wanted to provide some more details about why screen readers are not reading line numbers for user navigates to each line:
- Reading a line number at the start of every line might be noisy for some users, and would degrade the experience. Namely, we invest a lot in making sure that the information is read in the most concise way possible.
- There is a limitation to our
HTMLTextAreathat we are using that does not give us full control over decorating lines with additional context information like line numbers that the Screen Readers would read. So there is not technically good way to fix this with our current approach. - There are two easy workarounds to find out the line number:
- First is
ctrl+gthat opens the command palette, reads the line number and allows the user to navigate to any other line number - Second is focusing on the status bar (F1 > focus status bar, or F6), and the status bar will read the current line number
- First is
I hope that helps and provides some clarity why this issue is still not tackled. Thank you for understanding 🙏
@isidorn you said
Reading a line number at the start of every line might be noisy for some users, and would degrade the experience. Namely, we invest a lot in making sure that the information is read in the most concise way possible.
Is it not possible to make this an optional setting in VS Code itself natively which can be enabled / disabled via a keyboard shortcut? Then users can turn it on and off as they need it.