Материал подготовлен при поддержке Сбербанка

По официальной статистике Минздрава, более чем у 20 миллионов жителей России временные или постоянные нарушения зрения. Согласно данным главного офтальмолога РФ Владимира Нероева, количество учтённых тотально незрячих и слабовидящих в России составляет 218 тысяч человек, из них абсолютно незрячих — 103 тысячи. Но реальное число людей с нарушениями зрения значительно выше.

Тотально незрячих людей немного. Но игнорировать их потребности — значит не только не соответствовать современным стандартам, но и терять аудиторию. Например, Сбербанк при разработке новой версии интернет-банка уделил отдельное внимание доступности для незрячих и сделал сайт удобным.

Как работают программы экранного доступа

Инженеры ещё в конце 80-х начали искать решения, которые помогли бы людям с нарушениями зрения пользоваться компьютером. Сейчас незрячие люди при работе с компьютером и смартфоном используют программы экранного доступа. Первая подобная программа JAWS появилась в 1989 году. Её разработал американец Тед Хентер, потерявший зрение после дорожной аварии.

В основе технологии ротор — функция выбора элементов, с помощью которой пользователь перемещается по странице, и голосовой интерфейс, который описывает все её элементы: заголовки, ссылки, картинки и так далее.

Принцип работы у JAWS и её аналогов идентичный. Скринридер, отвечающий за сканирование данных на экране, выводит информацию блоками. Разработчик приложения и операционная система определяют, какая именно информация попадёт в эти блоки.

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

Важно, чтобы визуальные элементы были подписаны так называемыми «альтами» — подписями для скринридера. Если картинка или пиктограмма на кнопке не подписаны, то пользователь слышит «right arrow.jpg», а на адаптированном сайте он услышит «перейти на следующую страницу».

JAWS изначально создавался для MS-DOS. Это была одна из немногих программ для чтения с экрана, работающих в текстовом режиме этой операционной системы.

Теперь аналогичные программы разработаны для каждой системы. У Apple — это VoiceOver, на Android — TalkBack, для Windows — NVDA и JAWS.

«Технологий море. С их помощью можно обеспечить высокий уровень цифровой инклюзии людей с различными особенностями. Но мы их не применяем. На мой взгляд, потому что мы ещё не до конца повзрослели как общество.

Последний качественный прорыв, мне кажется, случился более 10 лет назад. Тогда Apple выпустил на рынок технологию VoiceOver в iPhone 3GS. Сопоставимых по масштабу функциональных прорывов я сейчас не наблюдаю. То, что есть, просто достраивается: где-то что-то улучшается, где-то что-то ухудшается — но заметного прогресса нет.»

Анатолий Попко - руководитель проекта Dialogue in the Dark, эксперт Всероссийского общества слепых и консультант Сбербанка по вопросам доступности продуктов

Ситуация с доступностью мобильных приложений, информационных сервисов, интернет-ресурсов в России изменяется не очень быстро. Движение есть, но оно поступательное. Стремление Сбербанка обеспечить полную доступность всех удалённых каналов является приятным исключением, высоко оцененным пользователями с нарушениями зрения.

Особенности разработки для незрячих

Для создания доступного интерфейса прежде всего требуется корректная верстка. На более поздних этапах разработки необходимо проводить автоматизированное тестирование доступности и тестирование на целевых группах.

«Когда мы начали обновлять дизайн интернет-банка, мы в первую очередь попросили макеты новой страницы у дизайнеров, и вместе с незрячим экспертом банка посмотрели, какие там будут области, как их лучше разметить заголовками.

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

В качестве примера: раньше, чтобы через интернет версию Сбербанк Онлайн перевести деньги, приходилось выполнять порядка 20 или даже 30 нажатий на стрелки клавиатуры для перемещения по странице. Сейчас достаточно пяти нажатий.»

Михаил Кузьмин - руководитель направления, Дивизион «Особенные решения» Сбербанка

Незрячие пользователи довольно консервативны, многие из них принципиально не обновляют операционные системы и приложения на своих смартфонах — им придётся заново их исследовать и изучать. При разработке нового Сбербанк Онлайн программисты старались сделать его не просто доступным, а удобно доступным, чтобы пользователь мог работать с ним без посторонней помощи, так как речь идёт о банковской тайне.

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

Использование клавиатуры

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

Когда верстка готова, с помощью клавиши Tab проверяется фокус при управлении.

Разработчики не всегда учитывают, что при навигации с помощью скринридера любое всплывающее (модальное) окно должно выделяться с помощью клавиатурного фокуса, иначе незрячий пользователь не поймёт, что оно появилось.

Пользователь должен иметь возможность выбрать и активировать любой интерактивный элемент на странице с помощью клавиш Tab, пробела и стрелок. Если есть элементы, раскрывающиеся при наведении на них курсора, то должна быть предусмотрена альтернатива для скринридера — в этом могут помочь библиотеки доступности wai-aria.

«Специфика для незрячего пользователя в том, что он воспринимает всю информацию на слух. Зрячий пользователь, например, может нажать на кнопку, посмотреть на следующий экран и довольно быстро вернуться обратно.

У человека с нарушениями зрения на это уйдёт намного больше времени: нажатиями кнопок ему придётся перемещаться по экрану и прослушать все элементы.»

Михаил Кузьмин - руководитель направления, Дивизион «Особенные решения» Сбербанка

Неподписанные и непрочитываемые поля

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

В Сбербанк Онлайн практикуется сценарный подход, чтобы убедиться, что все этапы полностью доступны для незрячего пользователя и на его пути не возникнет неподписанной кнопки или неозвучиваемой информации.

Выбор целевого контента

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

В коде HTML есть метки для заголовков разного уровня. Когда незрячий пользователь слышит страницу в первый раз, он нажатием на «горячую клавишу» перемещается по этим заголовкам. Ему необязательно пролистывать весь экран – он может сразу переместиться на заголовок нужного уровня или, например, в раздел курсов валют. Для корректной работы разработчик должен разметить все заголовки нужного уровня и все области.

Заголовки первого уровня на макете должны быть заголовками H1 в коде — и наоборот. Обычный текст не должен выделяться как заголовок.

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

При грамотной разработке пользователь сможет самостоятельно выбрать масштаб контента – при этом сайт останется читаемым. Использовать адаптивную верстку для этого – лучшее решение. Это и закроет потребности слабовидящих пользователей (у которых есть остаточное зрение), и обеспечит адаптируемость сайта под любое устройство.

Также должны быть соблюдены требования к контрастности. Минимальный её коэффициент — 4,5:1. Проверить свой сайт на контрастность можно с помощью плагинов и программ: Stark plugin, Colour Contrast Analyser, Colorable.

Для читаемости сайта при изменении масштаба используется адаптивная вёрстка.

Логичные переходы

Первым элементом для пользователя скринридера должен быть первый элемент страницы — как правило, это кнопка «назад» или заголовок. Разработчики должны учитывать, что курсор можно ставить не в начало страницы, а на первый значимый по смысловой нагрузке элемент.

Если мы говорим о доступных цифровых сервисах, то я всегда привожу в пример Сбербанк. Во-первых, это приложение Сбербанк Онлайн для iOS и Android. Во-вторых, это Сбербанк Бизнес Онлайн, сейчас в веб-версии.

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

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

Анатолий Попко
руководитель проекта Dialogue in the Dark, эксперт Всероссийского общества слепых и консультант Сбербанка по вопросам доступности продуктов

Подробнее о доступности интерфейса можно почитать в гайдлайнах, которые разработал Сбербанк и разместил в .

Как российские компании внедряют доступность

Навигация для незрячих напрямую связана с клавиатурой. Работа с этим элементом ввода реализована, например, на сайте Госуслуг. Страницы полностью адаптированы для работы со скринридером, области размечены, элементы подписаны, заголовки и все кнопки кликабельны.

Сайт Пенсионного Фонда России предлагает не только удобные настройки контрастности для слабовидящих. Там разработали и встроили виджет, зачитывающий выделенный текст – это удобно для слабовидящих, но для незрячего всё равно потребуется скринридер на персональном компьютере.

Помимо веб-версии банк адаптировал и своё приложение и для предпринимателей. А недавно и веб-версия стала доступной для слабовидящих.

Источник vc.ru