Разработка сайтов в слепую: как это? Ответ в статье

Здравствуйте. Меня спрашивали, как я: незрячий, делаю сайты, программирую. В этой статье рассмотрю несколько моментов, которые считаю важным осветить:

1. Кратко о том, как пользуюсь компьютером
2. Горячие клавиши, как инструмент ускорения работы
3. языки программирования - это текст. Как я с ним взаимодействую
4. Доступные незрячим инструменты разработки
5. Как управляю внешним видом сайтов, как взаимодействую с css
6. Идеальный инструмент создания сайтов - это CMS
7. Заключение

Кратко о том, как пользуюсь компьютером

Для работы в Windows и ubuntu использую программы экранного доступа. Они:

• Парсят текстовое содержимое, включая тексты кнопок, ссылок, переключателей, списков, галочек (у нас они озвучиваются как "флажок"), описания изображений (На сайтах это тег alt, в программах не знаю что за это отвечает), и так далее;
• Взаимодействует с установленным в ОС или встроенным в скринридер синтезатором речи. Это специальная программа, представляющая собой искусственный голос. Любой ассистент, говорящий погоду или иную информацию использует для вывода на динамик устройства синтезатор речи;
• Не озвучивает изображения, которые не подписаны текстом, не позволяет использовать приложения, типа Opera 12 и более старых версий, слабо поддерживает QtCreator и т. д.

Уже долгое время в Windows я использую бесплатную opensource программу экранного доступа (скринридер) NVDA, а в Ubuntu - Orca.

Если вы не совсем поняли после прочтения, подписывайтесь на мой аккаунт @denis-skripnik: завтра-послезавтра опубликую видео, где всё расскажу и покажу.

Горячие клавиши, как инструмент ускорения работы

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

Если бы мы изучали всё курсором Мыши, тратили бы кучу времени, так как сразу найти нужное не можем. Для достижения этого результата есть специальные горячие клавиши. Например, в редакторе визуальном на goldvoice.club есть панель инструментов с кучей кнопок для форматирования текста, к которой можно перейти, нажав alt+f10.
Также их мы используем для перемещения по веб-страницам: h - заголовки, 1-6 - заголовки разного уровня, q - цитата. И так далее. В ином случае изучение контента занимало бы не 2-5 минут, а 10-20.
Но, естественно, незрячие пользуются и стандартными горячками, которые повышают скорость работы, например, windows+tab - переключение между рабочими столами в windows 10, ctrl+o - открытие файлов во многих программах.

языки программирования - это текст. Как я с ним взаимодействую

Во-первых, просматриваю код, нажимая клавиши стрелок:
Вертикальные позволяют прослушивать содержимое всей строки, горизонтальные - перемещаться по символам (Если нажимать ctrl + эти клавиши, будет происходить изучение до следующего пробела).

Во-вторых, есть комбинация клавиш insert+стрелка вниз. После этого синтезатор речи читает весь текст, пока не остановлю, нажимая Control. Но если для чтения текстов и веб-страниц такой подход удобен, то для изучения программного кода - нет, поскольку многое упускаю, что критично.
Правда возможность чтения кода также зависит от редактора/IDE. В некоторых приложениях при перемещении стрелок ничего не происходит (Только если выделить всё и скопировать). Видимо не учтена навигация. Этим часто грешит всё, созданное на QT. Только QtCreator позволяет это делать, да и здесь есть проблемы.

Также хочу в данном разделе статьи рассказать о том, что я не читаю отступы перед кодом для определения уровня: слишком долго прослушивать все пробелы или табы перед кодом на каждой строке. Для этого отслеживаю фигурные скобки "{", "}".
Пример:

int main() { // Первый уровень
 cout << "Вывод на экран" << endl; // Второй уровень
} // Первый уровень

Добавлю, что в настоящее время в колледже изучаю C++, Паскаль. Дома с июля php (Застрял на одной проблеме, которую не получается решить). Планирую изучить python и javascript (Или наоборот).

Если говорить про веб в целом, знаю html и основы css.

Доступные незрячим инструменты разработки

Текстовые редакторы

Я пользуюсь Notepad++. AkelPad тоже доступен, но мне меньше нравится. Стандартный блокнот Windows тоже позволяет с ним работать, но он не подходит для разработки сайтов и не имеет кучи классных функций, которые есть в Notepad++.

IDE

На первом месте Visual Studio 2015 и 2017 (Бесплатная версия).
На втором - phpDesigner 8. Жаль, что постоянно не могу этим приложением пользоваться. Меня впечатлил уровень доступности, но пока купить не получается.
Третье место - PascalABC. В институте мы изучаем до сих пор Паскаль, поэтому пользуюсь данной IDE. И меню, и редактор, и компиляция доступны.
На четвёртом месте QtCreator. Программа, в принципе, доступна, но в список ошибок приходится переходить, используя NVDA-Курсор, который добирается в места, в которые нельзя попасть при помощи стрелок, табом или с использованием hotkeys. Кроме этого, перемещаясь построчно, часто слышу выпадающий список "Выберите символ", из-за чего приходится нажимать 2 раза alt, дабы вернуться в код путём входа и выхода из меню файл, что надоедает.
Всё.

Как управляю внешним видом сайтов, как взаимодействую с css

Если кратко - очень редко.

Css - это язык, позволяющий оформлять страницы. Соответственно незрячие не могут создавать оформление с нуля, так как все элементы будут отображаться криво, залазить друг на друга.
Я использую css только в том случае, если код адаптивный, взят с другого сайта/блога, да и после этого спрашиваю у окружающих меня людей, как всё смотрится.

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

1. Говорю тем, кто меня окружает, цвет чего надо посмотреть
2. Они смотрят и сравнивают с таблицей цветов на https://www.artlebedev.ru/colors/
3. я копирую HEX код
4. После этого ищу совпадения в css файлах и изменяю на чёрный. Когда изменения происходят в нужном месте, идём дальше
5. Находим нужный цвет в той же таблице
6. Вставляем его в нужное место
7. Если сайт адаптивный, проверяем изменения, восстановив размер браузера, и на мобильном устройстве. Если цвет не изменился, повторяю пункты с 4 по 6.
   Естественно это очень муторно, поэтому для тех, кому уже сайт сделал, не изменяю цвета, да и новым стараюсь говорить, что для меня это практически невозможно.

Идеальный инструмент создания сайтов - это CMS

Если бы не было движков сайтов (Wordpress и т. п.), я не знаю как бы создавал сайты. Так что очень благодарен прогрессу за эти инструменты.
Они облегчают работу тем, что позволяют выбирать шаблон и устанавливать его. Настройка же происходит прямо в админке, без использования css.

В 2011 году я пользовался Wordpress, потом перешёл на Maxsite CMS. Сейчас подумываю возвратиться на WP, так как мой знакомый из Томска разработал супер скрипт, позволяющий устанавливать WP со всеми настройками, плагинами и их параметрами, с шаблоном адаптивным, позволяющим выбирать цветовую схему.

Тестировал и другие CMS: ModX Revo (Не всё доступно в админке), Livestreet (Громоздкая), Joomla (Версия 2.5 не понравилась: планирую изучить последнюю версию), Drupal (Не помню почему отказался от данного инструмента создания сайтов). В папке специальной у меня лежит ещё несколько движков, которые надо протестировать, но пока руки до этого не доходят. Среди них есть и EVO версия ModX.

P. S. Пробовал и конструкторы, но понял, что их не стоит использовать в связи с подконтрольностью владельцам, с ограниченностью функционала. Ещё до CMS создал каталог файлов разных на ucoz, но потом отказался и от сайта, и от конструктора (От Юкоз по причинам, указанным ранее).

Заключение

Если статья понравилась, была интересна, прошу проапвоутить её. У вас остались вопросы? пишите их в комментарии.

Также буду благодарен и другим комментам.