Незрячий программист — о разработке «на слух» и доступности интернета
Дмитрий Попов — незрячий веб-разработчик, пользуется программами экранного доступа. Эксперт по доступности сайтов, аналитик доступности многочисленных проектов, в том числе таких крупных, как сайт «УкрЗалiзниця». Веб-технологии изучил самостоятельно. Преподавал математику в Славянской школе-интернате для слепых и слабовидящих детей. С 2013 года живет в Киеве.
В интервью Дмитрий рассказал о работе за компьютером для незрячих и о том, как сделать интернет более доступным для людей с проблемами зрения.
Дмитрий выступил с докладом «Как незрячие люди видят ваш сайт» на конференции WSD в Киеве
— Дима, как вы заинтересовались ИТ и программированием?
Я по образованию учитель математики и информатики, еще в университете изучил основы HTML, JavaScript. Меня это заинтересовало, и я еще тогда начал пытаться делать свои сайты, сначала как лабораторные для вуза, потом уже как свои проекты. В то время как раз были популярны бесплатные хостинги narod.ru. Со временем понял, что одного HTML мало, начал осваивать PHP. Просто открывал какие-то скрипты, читал код, разбирался.
— Расскажите, как незрячие люди работают с компьютером?
Незрячие пользуются компьютером с помощью специальных программ — скринридеров. Скринридер зачитывает активный текст, то есть тот, который сейчас под курсором. Озвучивание идет сверху вниз, то есть программа просто по порядку считывает HTML разметку.
На улице незрячих можно встретить не так часто, потому что среда в городе не очень приспособлена. А в интернете эти люди как раз очень активны — они общаются, читают статьи, делают покупки в интернет-магазинах, сидят в соцсетях. Некоторые и работают онлайн, при этом работодатель даже не догадывается об их проблемах со зрением.
Что касается разработки, то для работы достаточно блокнота, клавиатуры и синтезатора речи. Иногда я работал в паре с другими разработчиками и замечал, что со скринридером иногда процесс идет даже быстрее, чем обычная работа с визуальной доступностью — к примеру, скринридер четко озвучивает все символы и не дает перепутать апостроф с одинарной кавычкой.
— А как, например, происходит отладка, поиск какого-то бага?
Я могу стрелками ходить по строчкам, и при активации начинает зачитываться вся строка. Могу внутри строки двигаться вперед назад, и скринридер будет озвучивать посимвольно.
Все незрячие люди привыкают к озвучке на больших скоростях. Я использую режим, в котором зачитывается 400 слов в минуту — это максимальная скорость из мне известных.
— Для вас программирование — это работа или хобби?
И то, и другое. Я пишу сайты для себя, занимаюсь их продвижением, зарабатываю за счет размещения рекламы. Коммерческие заказы никогда не брал.
Активно занимаюсь волонтерскими проектами, связанными с доступностью сайтов для незрячих. Один из них — #Детектор_Web_доступності, проект организации «Вір в Україну». Меня туда пригласили как эксперта — мы проверяем государственные сайты на предмет доступности и пишем рекомендации по устранению найденных проблем. Уже есть первые результаты и обратная связь от Министерств. В числе тех, кто уже подкорректировал свои сайты, — Минагрополитики и Правительственный портал.
— А можно подробнее о доступности? С какими проблемами сталкиваются незрячие при посещении сайтов? Как их исправить?
Скажу сразу, что доступность — это не какая-то дополнительная надстройка. Если сайт разработан грамотно с точки зрения разработки, HTML, то он уже будет доступным — за исключением, возможно, каких-то особо сложных форм. Проблемы возникают, когда, например, разработчики вместо кнопки делают элемент <span> и через JavaScript навешивают на него какое-то действие. Для скринридера это не кнопка, не ссылка, а просто текст, нейтральный элемент, и он не может на нем сфокусироваться.
Точно так же с заголовками. Заголовки используются для навигации — чтобы быстро найти, например, начало статьи. Но это работает, если заголовок прописан через соответствующий тег, а не просто выделен жирным шрифтом или крупным кеглем.
Возникают проблемы, когда отсутствуют текстовые подписи — например, ссылки на соцсети в виде иконок. Если поверх иконки добавить текст, то это испортит дизайн, но можно добавить подпись в атрибуте aria-label из стандарта WAI-ARIA, разработанного специально для решения вопросов доступности для незрячих. Элемент aria-label не виден визуально, но озвучивается скринридером.
Еще один момент — сложные меню, которые раскрываются при наведении мыши. Но, согласно требований доступности WCAG, все функции сайта должны быть доступны при помощи клавиатуры.
Можно сказать, есть 2 основные проблемы. Во-первых, большинство разработчиков просто не знают, насколько среди пользователей их сайтов велик процент людей с нарушениями зрения. Эта тема не на слуху.
И во-вторых, может показаться, что написать доступный сайт или исправить существующий — это сложно, требует много затрат. Но это не так. Можно даже просто следовать правилам SEO — фактически те же принципы, что делают сайт индексируемым поисковиками, и позволяют ему быть корректно озвученным скринридером.
Я стараюсь поднимать тему доступности. Пишу в техподдержку сайтов, предлагаю решения. Иногда получаю обратную связь, иногда нет.
Frontend-лаборатория «Blind Accessibility» — обсуждали проблемы, с которыми сталкиваются незрячие при посещении сайтов. Дмитрий — справа
— Каких изменений уже удалось добиться?
Один из позитивных примеров, когда получилось — сайт zakaz.ua, сервис доставки продуктов из супермаркетов. Раньше там при заказе доставки надо было выбрать на карте свой район, и это можно было сделать только мышкой. С клавиатуры сервис был недоступен, и незрячему пользователю приходилось каждый раз просить кого-то о помощи. По моей просьбе разработчики сделали так, что теперь достаточно выбрать адрес один раз, и он сохраняется в cookies на долгий срок. А в новой версии сайта планируют и вовсе отказаться от карты — район будет определяться сам при вводе улицы.
Сейчас общаюсь с ПриватБанком — у них в приложении Приват24 для айфонов недоступна услуга заказа билетов для незрячих.
При общении с администрацией я делаю акцент не столько на социальную ответственность, сколько на практическую выгоду — объясняю, что незрячие люди — это достаточно большой процент потенциальных клиентов, они тоже пользуются сервисами, платными услугами, и для бизнеса невыгодно их игнорировать. Небольшие изменения в коде могут привести
— Слышала, что вы также принимали участие в доработке сайта «УкрЗалізниці». Что там надо было улучшить?
История с UZ.gov.ua длится уже более 3 лет. Все началось с того, что юрист Андрей Стегницкий выиграл суд против УЗ, и суд обязал сделать сайт доступным для незрячих, в частности виджет покупки билетов. Однако за 3 года так ничего сделано и не было, и только этим летом организация незрячих ГУД снова подняла этот вопрос. Меня пригласили в качестве эксперта в команду, и буквально за 3 дня исправили все проблемы.
Мы внесли правки в сервис покупки билетов. Изначально в форме выбора места свободные места от занятых отличались только цветом, и с помощью скринридера было невозможно определить их статус. Мы просто добавили элемент aria-label с указанием, свободно данное место или занято. Этот атрибут никак не отображается визуально, но доступен для скринридера.
Несколько строк, которые сделали UZ.gov.ua доступным (из презентации Дмитрия для WSD)
Правда, остались сложности с онлайн-оплатой, но она проходит на странице стороннего сервиса Plategka.com. Там невозможно ввести CCV/CCV2 — на виртуальной клавиатуре у кнопок нет подписей. Мы общаемся с администрацией сервиса, но пока, к сожалению, безуспешно.
Так что, как показывает практика, намного больше времени уходит не на саму доработку программы, а на то, чтобы донести необходимость внести эти изменения.
— А как вы можете оценить большинство сайтов, насколько они доступны? Есть ли разница между украинскими и зарубежными?
За рубежом дела намного лучше. Как раз в рамках «Детектора Web доступності» я недавно проверял государственные сайты Германии, Франции, США — у них минималистично, грамотно написанные странички, очень продуманные в плане логики меню. А у нас перегружены слайдерами, новостями в виде бегущей строки.
Если сравнивать временные изменения, то ситуация сейчас лучше, чем 10 лет назад — тогда в моде был flash, всякие сайдеры, крутилки, карусели. Сейчас в тренде минимализм, и благодаря этому дела с доступностью обстоят гораздо лучше.
— Какие инструменты вы используете для анализа доступности?
Я тестирую непосредственно скринридером. Но работа с этим ПО достаточно специфична, и на его освоение может понадобиться какое-то время.
Для поверхностной проверки можно использовать:
— Markup Validation Service — проверка сайта на общую валидность HTML;
— AChecker — валидатор на основе анализа HTML-кода. Не учитывает JavaScript, ошибки выводятся в текстовом виде, не очень удобны для анализа. Выдаёт список потенциальных проблем, большая часть из которых не соответствуют действительности, однако список может использоваться в качестве дополнительного чек-листа;
— Wave web accessibility и расширение для Chrome WAVE Evaluation Tool — находят большое количество ошибок, предоставляют подсказки по исправлению и ссылку на стандарт, предоставляют информацию в удобном виде, подсвечивают синтаксис и aria-атрибуты;
— Tota11y — встраиваемый на страницу с помощью букмарклета визуализатор и валидатор доступности. Поддерживает измерение контрастности. В отличие от Wave Evaluation Tool, не показывает все ошибки сразу и определяет не так много ошибок;
— AInspector Sidebar for Firefox — в отличие от предыдущих валидаторов, позволяет находить ошибки в логике применения aria-атрибутов. Кроме списка ошибок выдает также список проверок, которые рекомендуется сделать вручную.
Но лучшая проверка — живой тест. Можно, например, скачать NVDA (свободно распространяемый скринридер), включить режим «Просмотрщик речи» и зайти на сайт. Или обратиться за помощью к незрячему.
— Расскажите о UAradio — как пришла идея запустить свой радио-сервис?
Это проект для души. Идея родилась в 2014 году — я заметил, что тогда стало появляться много хорошей украинской музыки, но было мало радиостанций, которые бы ее крутили. Это сейчас уже появился закон о квотах.
Кроме меня, в проекте задействована музыкальный редактор Юлия. Она занимается формированием плей-листа.
— Какие у вас дальнейшие планы? Какие активности планируете?
Есть идея развивать «Детектор Web доступності», собрать команду и создать полноценный информационный сервис — чтобы разработчик, узнав, что его сайт недоступен, мог обратиться к нам, получить информацию, заказать тестирование, получить рекомендации. Это все без оплаты со стороны разработчика — проект волонтерский.
— Что можете посоветовать незрячим начинающим программистам?
Сейчас есть огромное количество возможностей для развития — множество онлайн-учебников, открытые онлайн-курсы. Учиться стало намного проще, чем
Я считаю, что каждый должен быть в чем-то специалистом — и, желательно, лучшим :) Не обязательно в широкой сфере, можно в узкой, да и в узкой этого проще добиться. Так что советую выбрать то, что интересует, и развиваться в этой области.
