Знание и понимание инструмента, с которым ты работаешь, является важным фактором профессионального роста специалиста в любой отрасли. Это касается и области разработки программного обеспечения.
Особенно это важно для людей, которые взаимодействуют с компьютером с помощью различных ассистивных технологий. Применительно ко мне речь идет об использовании программ чтения с экрана (screen reader).
У меня есть небольшой остаток зрения, который мне помогает в работе, но надежды на него нет, надо стремиться к повышению эффективности используемых в работе инструментов.
В этой статье решил проанализировать функции VS Code, которые делают продукт от компании Microsoft доступным для всех пользователей.
Что такое VS Code
VS Code – это мощный текстовый редактор, с помощью которого можно писать код на различных языках программирования и не только. Благодаря огромному количеству расширений и собственных встроенных функций, VS Code можно назвать редактором, который стремится к полноценной IDE (интегрированной среде разработки).
Доступность из коробки
- изменение масштаба (zoom)
- темы оформления
- навигация с клавиатуры
- доступность встроенного терминала
- пару слов про сигналы (Accessibility Signal)
Microsoft стремится делать свои продукты доступными для всех пользователей, вне зависимости от имеющихся у них ограничений.
Здорово, что редактор VS Code доступен без каких-либо дополнительных действий со стороны пользователей. Да, каждый может настроить все функции под собственные нужды, но дополнительно устанавливать ничего не требуется. После того как вы установите редактор к себе на компьютер, с ним уже можно будет работать. Более того, если вы, как я, используете screen reader, то VS Code поймет это.
Документация к VS Code содержит специальный раздел Accessibility, в котором собраны основные функции доступности. Предлагаю пройтись по некоторым из них.
Изменение масштаба (zoom)
Масштаб всех отображаемых элементов управления и редактора кода в VS Code можно изменить двумя способами:
- через меню (“Вид” -> “Внешний вид”)
- комбинацией горячих клавиш:
- Ctrl + = увеличить масштаб
- Ctrl + — уменьшить масштаб
- Ctrl + Numpad0 сброс масштаба
Увеличение (уменьшение) масштаба происходит с шагом 20%.
Для себя я увеличил масштаб на 20%. Но для меня эта настройка актуальна только на большом экране. На экране ноутбука она для меня не подходит, так как все равно ничего не увижу, и остается одна надежда на screen reader, а точнее на мое умение работать с ним.
Темы оформления
Вот тут точно нет пределов для экспериментов! Лично мой выбор – “Темная современная, Default Dark Modern”.
Есть две темы, которые обозначены, как темы с высокой контрастностью для лучшего восприятия текста и элементов управления.
Темная высокая контрастность. Default High Contrast
Светлая высокая контрастность. Default High Contrast Light
Но только встроенными темами выбор не ограничивается. Существует специальный сайт, где можно посмотреть и выбрать любую понравившуюся тему. Если нужны контрастные темы, на сайте есть поиск, введите в качестве ключевого слова для поиска, например, “high contrast”, и вы увидите множество контрастных тем.
Выбор тем
Дальше все максимально просто. Выбираем тему, например, Deepdark Material Theme и жмем кнопку “VS Code”.
После того как откроется VS Code, сразу будет предложено установить эту тему, как расширение. Устанавливаем и оцениваем.
Вот так выглядит установленная тема Deepdark Material Theme. Full Black Version:
На странице, посвященной функциям Accessibility VS Code, Microsoft дает рекомендации по использованию тем для максимальной доступности интерфейса при различных заболеваниях глаз, влияющих на восприятие цветов.
Например, в качестве рекомендации предлагается использовать тему Pitaya smoothie, которая доступна для большинства форм дальтонизма и соответствует критериям WCAG 2.1 (Web Content Accessibility Guidelines) по цветовому контрасту.
Pitaya smoothie
И на этом работа с настройками оформления не заканчивается. Есть еще возможность изменять цвета различного рода предупреждений и подсказок по коду. Более подробно с этим можно ознакомиться в документации.
Возможность менять цветовые темы – это важный элемент, обеспечивающий доступность VS Code, как инструмента для профессиональной работы для людей с плохим зрением или с заболеваниями, связанными с восприятием цветов.
Навигация с клавиатуры
Есть несколько категорий пользователей, для которых наличие возможности взаимодействовать с приложением только с помощью клавиатуры является определяющим. Если такой возможности нет, то это становится барьером, преодолеть который либо невозможно, либо преодоление сопряжено с колоссальными усилиями.
В первую очередь, речь идет о незрячих пользователях, а также о пользователях с нарушением двигательных функций и мелкой моторики.
Есть еще и профессиональные пользователи, для которых важна скорость и эффективность работы. Дело в том, что когда ты много набираешь текста, и тебе часто необходимо переключаться между окнами или вкладками приложения, то сделать это гораздо эффективней с помощью клавиатуры, а не мыши.
Разработчики VS Code проделали огромную работу над реализацией функции клавиатурной навигации. Для навигации по основным группам элементов управления можно использовать клавишу F6 (для перемещения “вперед”) и сочетание клавиш Shift + F6 (для движения “назад”). Также можно использовать более привычную клавишу Tab, но есть один нюанс.
В тот момент, когда фокус находится непосредственно в редакторе кода или терминале, нажатие клавиши Tab вставит знак табуляции. Для того чтобы этого избежать, необходимо перед нажатием клавиши Tab нажать сочетание клавиш Ctrl + m для перехвата табуляции.
Сам я такой штукой не пользуюсь. Мне достаточно клавиши F6 (Shift + F6). После того как фокус попадает на нужную группу, перемещение между элементами внутри группы осуществляется стрелками, а иногда и табуляцией.
Кроме перемещения между элементами управления с помощью клавиатуры можно выполнять много различных функций. Это реализовано посредством сочетания горячих клавиш. Таких сочетаний просто огромное количество. Кроме того, есть возможность добавлять пользовательские сочетания клавиш.
А вот этой функциональностью я активно пользуюсь и скажу вам честно, что надо бы тут поднажать, так как это существенно повышает эффективность работы.
Ниже привожу некоторые сочетания клавиш, которыми я активно пользуюсь:
- Shift + Alt + . или Ctrl + . помогает применить быстрые действия, если они доступны. Например, часто помогает при импорте объекта из другого модуля;
- Ctrl + D выделение фрагмента кода, например, название переменной, функции, метода и т.п.;
- Ctrl + / закомментировать строку или выделенную область;
- F12 переход к определению класса, функции или метода;
- Ctrl + Shift + O перейти в режим навигации по объектам в открытом файле;
- Ctrl + G переход к заданной строке;
- F8 и Shift + F8 переход между ошибками в файле.
Как некую точку входа можно использовать палитру команд, которая открывается по сочетанию клавиш Ctrl + Shift + P. После этого вводим ключевое слово, например, git и можем в списке допустимых действий увидеть сочетания клавиш для них.
Посмотреть полный список команд, а также отредактировать сочетание клавиш можно с помощью команды Ctrl + K Ctrl + S (сочетание клавиш следует нажимать последовательно).
Доступность встроенного терминала
А вот со встроенным в VS Code терминалом я пока подружиться не могу, но очень хочу. Один момент, терминал, дорогой, если ты меня читаешь, давай дружить, мне нашей дружбы так не хватает в работе!
Возможно, сейчас, еще раз пройдясь по официальной документации, я все же нащупаю путь к сердцу терминала.
Терминал можно открыть сочетанием клавиш Ctrl + `. Справку по специальным возможностям терминала можно получить, нажав Alt + F1.
Первое, что меня напрягает, так это то, что я без совершения дополнительных действий не могу прочитать текст, который я сам ввел. Разработчики предлагают мне воспользоваться функцией Focus Accessible Terminal – функция, которая позволяет программам экранного доступа читать текст терминала. Да, в каком-то смысле это удобно, не надо использовать объектную навигацию. Но, черт возьми, почему я не могу просто прочитать введенный текст?
А проблема вот в чем. У меня в качестве терминала по умолчанию используется bash. А с доступностью bash у меня проблемы есть и вне VS Code. Решение пока такое: заменил на PowerShell, который не страдает такими проблемами. Также сделал себе пометку поглубже изучить проблему с доступностью bash.
А вот так выглядит функция просмотра буфера терминала. Тут надо поэкспериментировать, возможно, что это окажется удобным. Сразу могу сказать, что копировать текст вывода точно удобнее.
Говоря о доступности терминала, нельзя не затронуть тему доступности процесса отладки. Но эта тема для отдельной статьи, которую я обязательно подготовлю в ближайшее время.
Пару слов про сигналы (Accessibility Signal)
Еще один способ сделать работу с редактором VS Code доступной – это использование звуковых маркеров, сигналов.
Идея проста: если в строке кода встречаются ошибки, предупреждения или же курсор попал на строку свернутого кода, то VS Code с помощью различных сигналов сообщит об этом.
Как говорится, лучше один раз услышать (увидеть), чем читать описания. Ниже привожу небольшую демонстрацию сигналов, которые используются в VS Code.
В качестве заключения
Является ли это исчерпывающим руководством по доступности VS Code? Конечно, нет. Более того, каждый пользователь в силу своих предпочтений, опыта взаимодействия с VS Code и целей, для которых он использует этот редактор, определяет для себя набор необходимых для него инструментов доступности. Самое главное, что благодаря разработчикам и большому комьюнити VS Code сегодня является доступным инструментом, который используется в профессиональной деятельности.
При желании связаться со мной достаточно легко. Пишите мне на bks2408@mail.ru или в Telegram. С моим портфолио на GitHub можно ознакомиться вот по этой ссылке.