Skip to content

Monaco Editor Accessibility Guide

Alexandru Dima edited this page Oct 24, 2017 · 10 revisions

This page describes the features the Monaco Editor has to help make the editor accessible to all users. The Monaco Editor is a source code editor, distributed as a library that can be embedded in web applications.

This page documents the default Monaco Editor settings and behaviour. Various editor integrators might choose to change or tweak certain editor behaviours, in which case it is best to consult their documentation.

Keyboard Navigation

The Monaco Editor will provide an exhaustive list of commands in the Command Palette (F1 or Alt+F1 on Internet Explorer), so you can use the editor without using the mouse. The Command Palette can also be invoked from the editor's context menu.

Screen shot of the Command Palette

High Contrast

On Edge, the Monaco Editor will automatically adjust to respect the High Contrast Theme and colors chosen in Windows:

Screen shot of the Editor on Edge when Windows is set to a High Contrast Theme

The command "Toggle High Contrast Theme" (in the Command Palette) will toggle the use of the high contrast theme for the editor, and works in any browser and Operating System:

Screen shot of the Editor configured with the High Contrast Theme

Tab Trapping

By default, pressing Tab in an editable editor inserts the Tab character (or spaces depending on the indentation setting) and does not navigate to the next focusable element on the page. You can toggle the trapping of Tab with Ctrl+M on Windows and Linux and with Ctrl+Shift+M on OSX, and subsequent Tab keys will move focus out of the editor.

You can also toggle Tab trapping from the Command Palette with the "Toggle Tab Key Moves Focus" action.

UI optimized for Screen Readers

The Monaco Editor supports screen readers in the editor using a strategy based on paging the text.

When using NVDA on Windows, we recommend to update to NVDA 2017.3 or higher. NVDA 2017.3 increases NVDA's timeout for receiving a caret move event from 30ms to 100ms. This version is the first one where the built-in timeout is increased from 30ms to 100ms.

The "Go to Next/Previous Error or Warning" actions (F8 and Shift+F8) allow screen readers to announce the error or warning messages. Use Escape or Shift+Escape to return focus to the editor at the position of the error or warning:

Screen Shot of the embedded pane which presents errors and warnings

The "Go to Next/Previous Difference" actions (F7 and Shift+F7), when in a diff editor pane, will bring up the Diff Review Pane, which allows the navigation of the diffs, presented in a unified patch format. Arrow Up and Arrow Down can be used to navigate through the unchanged, inserted or deleted lines. Pressing Enter will return focus to the modified pane of the diff editor at the selected line number (or closest still existing line number in case a deleted line is selected). Use Escape or Shift+Escape to dismiss the Diff Review Pane.

Screen Shot of the Diff Review Pane

When in an editable editor, and when the suggestions pop up, they will get announced to screen readers. It is possible to navigate the suggestions using Ctrl+Up and Ctrl+Down (as well as Arrow Up and Arrow Down), you can dismiss the suggestions with Escape or Shift+Escape. These alternative keybindings allow various Screen Reader software to remain in focus mode. If a suggestion has additional details, this will be read out and it is possible to read the additional details by pressing Ctrl+Space.

Accessibility Help

You can press Alt+F1 or Ctrl+F1 in IE to trigger the "Show Accessibility Help" dialog while in an editor to find out the current position in the editor and to check the state of various accessibility options. The editor can be dynamically optimized for screen reader software from this dialog.

Screen Shot of the accessibility help dialog