Skip to content

Monaco Editor Accessibility Guide

Alexandru Dima edited this page Jun 20, 2017 · 10 revisions

This page describes the features the Monaco Editor has to help make the editor accessible to all users.

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.

High Contrast Theme

[TODO]

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.

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. 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.

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 install this plugin from Derek Riemer, which increases NVDA's timeout for receiving a caret move event from 30ms to 200ms. This plugin will no longer be needed when NVDA ships a new version 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.

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, you can dismiss the suggestions with Shift+Escape. These alternative keybindings allow various Screen Reader software to remain in focus mode.

Accessibility Help

You can press [TODO] to trigger the Show Accessibility Help dialog while in an editor to check the state of various accessibility options.

Clone this wiki locally