WebStorm 2018.2 Help

Accessibility

WebStorm lets you enable various accessibility features to accommodate your needs. You can use a screen reader or adjust font size, colors, and the behavior of certain UI elements to make the process of working with WebStorm easier.

Set up a screen reader

Currently, we fully support screen readers for WebStorm on Windows. You can use screen readers for WebStorm on macOS to some extent. Yet, to get a full advantage of the screen readers' support, we recommend Windows.

  1. Download and enable your preferred screen reader.

    Check the following recommended screen readers:

    • NVDA - use the NVDA 2015 or later. If you use the 32-bit version of NVDA, you must install the 32-bit JRE on your machine, as this version of NVDA requires C:\Windows\SysWOW64\WindowsAccessBridge-32.DLL to work with WebStorm. If NVDA cannot locate this file, the NVDA Event Log window displays the appropriate message.

    • JAWS - download the version you need and restart your computer to enable the JAWS screen reader.

  2. Ensure you have installed the proper Java version for your screen reader, as follows:
    • If your screen reader is 32-bit, install the 32-bit JRE version 1.7 or later. If your screen reader is 64-bit, install the 64-bit JRE version 1.7 or later.

    • To enable the Java Access Bridge, open the command prompt and type [JRE_HOME]\bin\jabswitch -enable, where [JRE_HOME] is the directory of the JRE on your machine. For Java version 1.8, the Java Access Bridge is part of JDK and you don't need to download or enable it separately.

    Your computer may have multiple versions of some important components of the Java Access Bridge and they may not be compatible across versions. You need to verify that your Java Access Bridge configuration is correct.

    If your screen reader is 32-bit, ensure that C:\Windows\SysWOW64\WindowsAccessBridge-32.DLL is present and has a version number of 7.x.x.x or higher. The file's description should read "Java(TM) Platform SE 7".

  3. Download and install WebStorm.

  4. To enable the support of the screen reader before the initial launch of WebStorm, do the following:
    • Open the configuration directory that contains files with personal settings, such as, keymaps, color schemes, and so on.

      Syntax
      %HOMEPATH%\.<product><version>\config
      Example
      C:\Users\JohnS\.WebStorm2018.2\config
      Syntax
      ~/Library/Preferences/<product><version>
      Example
      ~/Library/Preferences/WebStorm2018.2
      Syntax
      ~/.<product><version>/config
      Example
      ~/.WebStorm2018.2/config

    • Create a file called idea.properties.

    • Add the ide.support.screenreaders.enabled=true property to the file you have created.

  5. Launch WebStorm. The Support screen readers option that is located in Settings / Preferences | Appearance & Behavior | System settings will be enabled.

Customize the IDE

You can customize IDE depending on your accessibility needs.

Adjust colors for red-green color vision deficiency

You can adjust colors if you have red-green color vision deficiency. In this case, code fragments such as errors that are usually highlighted in red or strings that are usually green, will change the color to accommodate your needs (red will change to orange, green will change to blue). The color of the progress bar in the test runner will also get adjusted so it can be easily recognized.

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog and then go to Appearance & Behavior | Appearance.

  2. From the options on the right, in the UI Options section, select the Adjust colors for red-green vision deficiency (protanopia, deuteranopia) option and click OK to save your changes.

Check the following example with the Before image that has String highlighted in green color and Errors highlighted in red and the After image where the colors are adjusted:

before color adjustment
after color adjustment

Configure colors for code elements, editor, hyperlinks, etc.

You can adjust colors for code elements, errors, elements of the editor, and tool windows.

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog and then go to Editor | Color Scheme | General.

  2. From the options list on the right, select what you want to adjust the color for. For example, you can select Code and adjust colors for injected language fragments or matched braces, etc. Click OK to save changes.

You can also adjust colors for debugger, consoles and other parts of IDE: simply select the appropriate node in the list of options located in Settings / Preferences | Editor | Color Scheme.

Override the default UI fonts

You can override the default fonts of the UI elements.

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog and then go to Appearance & Behavior | Appearance.

  2. From the options on the right, in the UI options section, select Override default fonts by (not recommended) and specify the font name and its size. Click OK to save changes.

Resize tool windows

You can resize the actual tool windows vertically or horizontally using shortcuts.

  1. To resize vertically up or down, press Ctrl+Shift+Up or Ctrl+Shift+Down.

  2. To resize horizontally left or right, press Ctrl+Shift+Left or Ctrl+Shift+Right.

Adjust text size in the editor

You can change font and a size of the text in the editor.

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog and then go to Editor | General.

  2. From the options on the right, select the Change font size (Zoom) with Ctrl+Mouse Wheel option to quickly change the text size (turning the mouse wheel) while you are working in the editor.

  3. If you need to specify the exact font size, select Editor | Font.

  4. From the options on the right, specify the font, its size, line spacing, and other available options. Click OK to save changes.

Customize shortcuts

You can configure custom shortcuts to actions that you frequently use.

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog and then go to Keymap.

  2. From the list of options on the right such as menus, actions, and tools, select the action you need.

  3. Right-click the selected item and from the context menu, select an action you want to perform such as Add keyboard shortcut, Add mouse shortcut, or Add abbreviation.

  4. In the dialog that opens, specify a shortcut. If you need, select the Second stroke option and specify an additional key for the shortcut. Click OK to save changes.

Please note that you can ignore a conflict and assign a shortcut to several actions. However, it is strongly recommended that you avoid binding two actions with the same shortcut, because the priority of these actions is not defined.

Customize smart keys behavior

You can configure the behavior of the smart keys.

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog and then go to Editor | General | Smart keys.

  2. From the options on the right, select or clear the smart keys options, for example, you can clear the Insert paired brackets or Insert paired quotes option that automatically inserts closing bracket or a quote since it might not be useful when you use a screen reader. Click OK to save changes.

Disable the automatic code completion

You can disable the automatic code completion to avoid an auto-insertion of code elements when you work in the editor with a screen reader.

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog and then go to Editor | General | Code completion.

  2. From the options on the right, clear the Smart Type Completion option. If you need, clear the Basic Completion to disable the basic completion as well.

Customize code folding

You can control the code folding behavior and specify what should or should not be folded.

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog and then go to Editor | General | Code folding.

  2. From the options on the right, select what should be collapsed by default.

Customize code style

You can configure spaces, tabs and indents.

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog and then go to Editor | Code Style | [Language].

  2. From the options on the right, click Tabs and Indents to configure tabs or Spaces to configure where and how to use spaces.

  3. Click OK to save changes.

Manage mouse pointer focus mode

You can configure how the mouse pointer behaves when opening dialogs.

  1. Press Ctrl+Alt+S to open the Settings/Preferences dialog and then go to Appearance & Behavior | Appearance.

  2. From the options on the right, select the Automatically position mouse cursor on default button checkbox. Select this checkbox to have the mouse pointer placed at the default button when a dialog opens. If the checkbox is not selected, the pointer location does not change.

  3. Click OK to save changes.

You can check Editor basics and Guided Tour Around WebStorm User Interface to familiarize yourself with other useful shortcuts.

Last modified: 19 November 2018