Источник:	Accessibility in Visual Studio Code
Перевод:	© Анатолий Камынин
Дата публикации:	05.02.2023

Интегрированная среда разработки программ Visual Studio Code поддерживает множество функций, позволяющих сделать приложение доступным для многих пользователей. Возможность изменить масштаб текста и выбрать цветовую схему с высокой контрастностью облегчает визуальное взаимодействие с редактором исходного кода, поддержка полной навигации при помощи клавиатуры позволяет работать без использования мыши, а редактор оптимизирован для работы с программами экранного доступа.

Масштабирование

коэффициент масштабирования в VS Code можно установить с помощью меню View -> Appearance -> Zoom. Коэффициент масштабирования увеличивается или уменьшается на 20 процентов при каждом выполнении команды Zoom.

1. Увеличить коэффициент масштабирования:View -> Appearance -> Zoom In ( Ctrl+равно)
2. Уменьшить коэффициент масштабирования: -> Appearance -> Zoom Out ( Ctrl+минус)
3. Отменить масштабирование: View -> Appearance -> Reset Zoom ( Ctrl+Numpad0)

Примечание: если используется масштабирование, необходимо удерживать клавишу alt , чтобы мышь могла перемещаться по элементам, отображаемым по наведению.

Сохранение коэффициента масштабирования

При изменении масштабирования с помощью команд View -> Zoom In /Out коэффициент масштабирования сохраняется в настройках VS Code. Значение по умолчанию равно 0, и каждое приращение/уменьшение изменяет коэффициент масштабирования window.zoomLevel на 20 процентов.

Цветовая тема с высокой контрастностью

VS Code поддерживает высококонтрастную цветовую тему на всех платформах. Используйте File -> Preferences -> Color Theme (Ctrl+K, затем Ctrl+T) для получения выпадающего списка для Выбора цветовой темы. Затем выберите в этом списке тему с высокой контрастностью «High Contrast theme».

Цветовое зрение

В Visual Studio Marketplace можно найти расширения, учитывающие особенности цветового зрения. Воспользуйтесь представлением Extensions (Ctrl +Shift+X

После установки цветовой темы из Marketplace её нужно выбрать, изменив цветовую тему с помощью меню File -> Preferences -> Color Theme (Code -> Preferences -> Color Theme на macOS) Ctrl+K, затем Ctrl+T. (Code > Preferences > Color Theme (> «Код» > цветовая тема в macOS) Ctrl + K Ctrl + T.

Рекомендуемые темы для пользователей с особенностями цветового зрения

• Подойдёт для большинства форм дальтонизма и соответствует темам в настройках GitHub. : GitHub
• Учитывает особенности цветового зрения для примерно 20 языков программирования: Gotthard
• Созданы с учетом deuteranopia и обладают высоким контрастным соотношением цветов: Blinds.
• Учитывает как дальтонизм, так и светочувствительность: Greative.
• Подходит для большинства форм дальтонизма и соответствует критериям цветового контраста WCAG 2.1: Pitaya Smoothie.

Настройка цвета предупреждений

Для VS Code цветовой темой по умолчанию является Dark+. Однако в пользовательском интерфейсе можно сменить как тему, так и цвета отдельных элементов оформления.

Примечание: обратитесь к разделу Color Themes, чтобы узнать больше о переопределении цветов в текущей теме.

Чтобы настроить цвета линий, обозначающих ошибки/предупреждения, перейдите в раздел File -> Preference -> Settings (Code -> Preference -> Settings на macOS), чтобы найти пользовательские настройки. Найдите «color customizations», найдите параметр workbench.colorCustomizations, а затем откройте пользовательский settings.json, выбрав «Edit in settings.json».

В файле settings.json добавьте следующий код в самые внешние фигурные скобки. Вы сможете назначить цвет каждому объекту, указав шестнадцатеричный код.

"workbench.colorCustomizations": {
"editorError.foreground": "#ffef0f",
"editorWarning.foreground": "#3777ff"
}

1. editorError.foreground - Переопределяет цвет волнистой линии под ошибкой.
2. editorWarning.foreground - Переопределяет цвет волнистой линии под предупреждением.
3. editorError.background - Переопределяет цвет фона ошибки.
4. editorWarning.background - Переопределяет цвет фона предупреждения.

Изменение цвета фона также помогает устранить потенциальные проблемы для пользователей с особенностями цветового зрения. Выбранный цвет подсвечивает соответствующую ошибку или предупреждение.

Выбор доступных цветов

Восприятие цветов субъективна по отношению к типу аномальной трихроматии (дальтонизма). Уровень тяжести отличается у разных людей и может быть обозначен четырьмя типами состояний:

1. Дейтеранопия: Определяется пониженная чувствительность к зеленому свету. Это наиболее распространенная форма дальтонизма.
2. Протанопия: Определяется пониженная чувствительность к красному свету.
3. Тританопия: Определяется пониженной чувствительностью к синему свету. Это состояние считается редким.
4. Монохромия: Также упоминается как ахроматопсия и определяется невозможностью видеть все цвета. Это самая редкая форма дальтонизма. Дополнительную информацию можно получить на странице What is Achromatopsia?.

Одним из подходов к выбору лучших цветов для конкретного состояния является применение дополнительных цветов. Это цвета, расположенные друг напротив друга на цветовом круге.

Примечание: более подробную информацию о подборе дополнительных цветов, а также доступ к симулятору дальтонизма и интерактивному цветовому кругу можно получить на странице Adobe Color

Навигация при помощи клавиатуры

VS Code предоставляет большой список команд в палитре команд (Command Palette) (Ctrl + Shift + P), чтобы пользователи могли работать в среде VS Code без использования мыши. Нажмите комбинацию клавиш Ctrl+SHIFT+P, затем введите имя команды (например, 'git'), чтобы отфильтровать список команд.

VS Code также содержит множество предустановленных сочетаний клавиш, которые отображаются справа от команды в Command Palette. Пользователь может назначить собственные сочетания клавиш. Необходимо открыть меню File -> Preferences -> Keyboard Shortcuts (Ctrl+KCtrl+S), чтобы вызвать редактор сочетаний клавиш, где можно найти и изменить привязки клавиш для команд VS Code. Дополнительные сведения о настройке или добавлении собственных сочетаний клавиш см. в разделе Key Bindings.

Для быстрой навигации по рабочему столу рекомендуется использовать команды Focus Next Part (F6) и Focus Previous Part (Shift+F6).

Выделение текста с помощью клавиатуры

Чтобы упростить начало и завершение выделения текста с помощью клавиатуры, VS Code предоставляет четыре команды: установить отметку выделения — Set Selection Anchor (Ctrl+KCtrl+B), выделить текст от отметки до курсора — Select From Anchor to Cursor (Ctrl + K, затем Ctrl + K), снять отметку выделения — Cancel Selection Anchor(Escape) и перейти к отметке выделения — Go to Selection Anchor.

Навигация при помощи клавиши Tab

Клавишу Tab можно использовать для перехода между элементами управления пользовательского интерфейса VS Code, а сочетание клавиш SHIFT+Tab для перехода по элементам в обратном порядке. При этом элемент, получивший фокус, обозначается визуальным ндикатором (рамкой).

Все элементы в workbench поддерживают навигацию при помощи клавиши Tab, но панели инструментов и списки вкладок workbench имеют только одну точку, на которую можно переместиться по клавише Tab, чтобы избежать слишком большого количества нажатий этой клавиши. После того, как фокус перейдёт на панель инструментов или список вкладок, можно использовать клавиши со стрелками для навигации по ним.

Поведение клавиши Tab

По умолчанию при нажатии клавиши Tab в окне редактора исходного кода вставляется символ табуляции (или пробелы в зависимости от настроек Отступа) и фокус не покидает окно редактирования. Можно переключить поведение клавиши Tab с помощью Ctrl + M, так чтобы последующие нажатия клавиши Tab перемещали фокус из окна редактора на другие элементы интерфейса. Если заданное по умолчанию поведение клавиши Tab отключено, то в строке состояния будет присутствовать соответствующий индикатор.

Также поведение клавиши Tab можно переключить в Command Palette (CTRL+SHIFT+P) с помощью Toggle Tab Key Moves Focus.

Файлы, доступные только для чтения, никогда не перехватывают клавишу Tab. Интегрированный терминал (Integrated Terminal) поддерживает переключение поведения клавиши Tab с помощью Ctrl+M.

Программы экранного доступа

VS Code взаимодействует с программами экранного доступа в редакторе с, применяя разбиение текста на страницым. Разработчики VS Code протестировали использование следующих программ экранного доступа: NVDA и JAWS на Windows, VoiceOver на macOS и Orca на Linux.

Для NVDA разработчики рекомендуют оставаться в режиме клавиатурного фокуса и применять горячие клавиши для навигации, а не использовать режим обзора.

При использовании программ экранного доступа действия Go to Next/Previous Error or Warning (F8 и Shift+F8) позволяют переходить по ошибкам / предупреждениям в прямом и обратном порядке. При этом могут появиться подсказки / предложения по исправлению, которые будут представлены программой экранного доступа. По этим предложениям / подсказкам можно перемещаться при помощи комбинаций клавиш Ctrl + Стрелка вверх и Ctrl + Стрелка вниз, или отклонить их при помощи Shift + Escape. Отключить автоматическое всплывающее окно с предложениями / подсказками можно при помощи параметра editor.quickSuggestions.

В панеле редактора diff можно использовать действия Go to Next/Previous Difference (F7 и Shift+F7), чтобы вызвать панель Diff Review, которая позволяет перемещаться по отличающимся фрагментам, представленным в унифицированном формате исправлений. Стрелки вверх и стрелки вниз можно использовать для навигации по неизменённым, вставленным или удаленным строкам. Нажатие клавиши Enter вернёт фокус на панель редактора diff на строку с соответствующим номером (или к строке с ближайшим существующим номеромв случае, если выбранная строка была удалена). По клавише Escape или сочетанию клавиш можно закрыть панель Diff Review.

Справка по специальным возможностям

При помощи комбинации клавиш ALT+F1 можно вызвать справку по специальным возможностям, находясь в редакторе, чтобы проверить состояние различных параметров специальных возможностей в VS Code.

Оптимизация для программы экранного доступа

Когда VS Code обнаруживает, что используется программа экранного доступа, то выполняет переключение в режим, оптимизированный для пользовательского интерфейса, такого как редактор и интегрированный терминал. В строке состояния в правом нижнем углу отображается сообщение «Screen Reader Optimized». Этот режим можно отключить, щёлкнув по указанному тексту.

Некоторые функции, такие как folding (сворачивание) и minimap (обзор кода), отключаются в режиме оптимизации для программ экранного доступа. Для того, чтобы управлять использованием режима оптимизации для программ экранного доступа, предназначен параметр Editor: Accessibility Support (editor.accessibilitySupport), который может принимать значения off или on, а также по умолчанию auto, чтобы оптимизация включалась автоматически при обнаружении работающей программы экранного доступа.

Терминал

По тексту, отображаемому во встроенном терминале VS Code, можно перемещаться с помощью команд navigation mode, присутствующих в Command Palette (нажмите клавишу F1 и выполните поиск по запросу «terminal navigation mode»).

Интеграция оболочки

Терминал поддерживает функцию, называемую shell integration, которая поддерживает множество дополнительных возможностей. При использовании программы экранного доступа особенно полезны функции Run Recent Command и Go to Recent Directory.

Минимальный коэффициент контрастности

Параметр terminal.integrated.minimumContrastRatio может быть установлен на число от 1 до 21, это приведёт к тому, что цвет шрифта и фона будет регулироваться до тех пор, пока не будет достигнут указанный коэффициент контрастности или не будет достигнут чистый белый (#FFFFFF) на чёрном (#000000).

Примечание параметр terminal.integrated.minimumContrastRatio не применяется к символам powerline.

строка состояния

После того, как фокус перейдёт в строку состояния с помощью команды focus Next Part (F6), можно использовать клавиши со стрелками для перемещения фокуса по элементам строки состояния.

Редактор diff

В редакторе Diff есть обзорная панель, в которой представлены изменения в унифицированном формате исправлений. В этой панели можно перемещаться между изменениями с помощью команд Go to Next Difference (F7) и Go to Previous Difference (Shift+F7). По строкам можно перемещаться с помощью клавиш со стрелками, а нажатие клавиши Enter вернёт фокус в редактор Diff на выбранную строку.

Отладчик

Интерфейс отладчика VS Code доступен пользователю и предоставляет следующие возможности:

• Изменения в процессе отладки анонсируются (например, 'started', 'breakpoint hit', 'terminated', ...).
• Все действия отладки доступны с клавиатуры.
• Представление Run and Debug и Debug Console поддерживают навигацию при помощи клавиши Tab.
• Переход в отладку доступен с клавиатуры ( Ctrl+K Ctrl+I).
• Можно добавить сочетания клавиш для установки фокуса на каждую область отладчика.

Звуковые подсказки

Звуковые подсказки указывают, имеет ли текущая строка определенные маркеры, такие как: ошибки, предупреждения, точки останова, свёрнутые фрагменты текста или встроенные предложения. Они воспроизводятся, когда основной курсор меняет свою строку или при первом добавлении маркера к текущей строке. Звуковые подсказки включаются автоматически при обнаружении работающей программы экранного доступа, но также могут управляться параметром audioCues.*.

Команда Help: List Audio Cues перечисляет все доступные звуковые подсказки, позволяет прослушать каждую звуковую подсказку при перемещении по списку и просмотреть, какие подсказки включены в данный момент.

Наведение

В некоторых ситуациях элементы интерфейса, появляющиеся при наведении, не работает должным образом, что затрудняет их использование с программами увеличения экрана. Чтобы обойти эту проблему, пока такой элемент активен, удерживайте клавишу Alt или Option, чтобы «зафиксировать» его на месте и не позволить скрыться. Отпускание клавиши разблокирует элемент, чтобы он вёл себя как обычно.

Известные проблемы

Существуют некоторые известные проблемы взаимодействия VS Code со специальными возможностями в зависимости от платформы. С полным списком проблем со специальными возможностями VS Code можно ознакомиться на странице https://github.com/microsoft/vscode/issues?q=is%3Aopen+is%3Aissue+label%3Aaccessibility.

macOS

Реализована поддержка программы экранного доступа для редактора с помощью VoiceOver.

Linux

VS Code хорошо работает с программой экранного доступа Orca. Если в вашем дистрибутиве Linux Orca не читает содержимое редактора:

• Убедитесь, что параметр VS Code editor.accessibilitySupport установлен в значение on. Это можно сделать через File -> Preferences -> Settings или выполнив команду Show Accessibility Help и нажав клавиши Ctrl+E , чтобы включить поддержку специальных возможностей. "editor.
• Если Orca все еще молчит, попробуйте установить значение для переменной среды: ACCESSIBILITY_ENABLED=1.

После включения этого параметра VS Code должен взаимодействовать с программой экранного доступа Orca.