Как звучат сайты: незрячие люди рассказывают об использовании интернета
Материал подготовлен при поддержке Сбербанка
По официальной статистике Минздрава, более чем у 20 миллионов жителей России временные или постоянные нарушения зрения. Согласно данным главного офтальмолога РФ Владимира Нероева, количество учтённых тотально незрячих и слабовидящих в России составляет 218 тысяч человек, из них абсолютно незрячих — 103 тысячи. Но реальное число людей с нарушениями зрения значительно выше.
Тотально незрячих людей немного. Но игнорировать их потребности — значит не только не соответствовать современным стандартам, но и терять аудиторию. Например, Сбербанк при разработке новой версии интернет-банка Сбербанк Онлайн уделил отдельное внимание доступности для незрячих и сделал сайт удобным.
Как работают программы экранного доступа
Инженеры ещё в конце 80-х начали искать решения, которые помогли бы людям с нарушениями зрения пользоваться компьютером. Сейчас незрячие люди при работе с компьютером и смартфоном используют программы экранного доступа. Первая подобная программа JAWS появилась в 1989 году. Её разработал американец Тед Хентер, потерявший зрение после дорожной аварии.
В основе технологии ротор — функция выбора элементов, с помощью которой пользователь перемещается по странице, и голосовой интерфейс, который описывает все её элементы: заголовки, ссылки, картинки и так далее.
Принцип работы у JAWS и её аналогов идентичный. Скринридер, отвечающий за сканирование данных на экране, выводит информацию блоками. Разработчик приложения и операционная система определяют, какая именно информация попадёт в эти блоки.
Предлагаем угадать на слух, какой сайт звучит в аудиофрагменте. Правильные ответы мы собрали в конце статьи.
При работе с сайтом скринридер работает, в первую очередь, с кодом, html-метками, размечающими блоки текста и заголовки, а также с самим текстом. Правильно расставленные метки дают незрячему пользователю информацию о структуре страницы и позволяют быстро по ней перемещаться.
Важно, чтобы визуальные элементы были подписаны так называемыми «альтами» — подписями для скринридера. Если картинка или пиктограмма на кнопке не подписаны, то пользователь слышит «right arrow.jpg», а на адаптированном сайте он услышит «перейти на следующую страницу».
JAWS изначально создавался для MS-DOS. Это была одна из немногих программ для чтения с экрана, работающих в текстовом режиме этой операционной системы.
Технологий море. С их помощью можно обеспечить высокий уровень цифровой инклюзии людей с различными особенностями. Но мы их не применяем. На мой взгляд, потому что мы ещё не до конца повзрослели как общество.
Последний качественный прорыв, мне кажется, случился более 10 лет назад. Тогда Apple выпустил на рынок технологию VoiceOver в iPhone 3GS. Сопоставимых по масштабу функциональных прорывов я сейчас не наблюдаю. То, что есть, просто достраивается: где-то что-то улучшается, где-то что-то ухудшается — но заметного прогресса нет.
Ситуация с доступностью мобильных приложений, информационных сервисов, интернет-ресурсов в России изменяется не очень быстро. Движение есть, но оно поступательное. Стремление Сбербанка обеспечить полную доступность всех удалённых каналов является приятным исключением, высоко оцененным пользователями с нарушениями зрения.
Особенности разработки для незрячих
Для создания доступного интерфейса прежде всего требуется корректная верстка. На более поздних этапах разработки необходимо проводить автоматизированное тестирование доступности и тестирование на целевых группах.
Когда мы начали обновлять дизайн интернет-банка, мы в первую очередь попросили макеты новой страницы у дизайнеров, и вместе с незрячим экспертом банка посмотрели, какие там будут области, как их лучше разметить заголовками.
Мы сразу предусмотрели процесс автоматизированного тестирования ещё до тестовых стендов. Разработчик ставит себе в браузер приложение, которое ещё на уровне кода анализирует страницу и подсвечивает проблемные места, чтобы разработчик мог исправить основные ошибки.
В качестве примера: раньше, чтобы через интернет версию Сбербанк Онлайн перевести деньги, приходилось выполнять порядка 20 или даже 30 нажатий на стрелки клавиатуры для перемещения по странице. Сейчас достаточно пяти нажатий.
Незрячие пользователи довольно консервативны, многие из них принципиально не обновляют операционные системы и приложения на своих смартфонах — им придётся заново их исследовать и изучать. При разработке нового Сбербанк Онлайн программисты старались сделать его не просто доступным, а удобно доступным, чтобы пользователь мог работать с ним без посторонней помощи, так как речь идёт о банковской тайне.
Например, в мобильном приложении Сбербанка есть довольно редкая для российского рынка функция — звуковая индикация загрузки страницы. Во многих других приложениях, когда, например, рассчитывается комиссия на операцию, телефон не издаёт сигналов. И незрячий человек не понимает — приложение зависло или не прошло целевое действие. В подобных ситуациях приложение Сбербанка издает специальные щелчки, которые сигнализируют о том, что приложение работает.
Использование клавиатуры
При управлении с клавиатуры незрячему пользователю должно быть очевидно положение фокуса, а переход между элементами должен быть логичным – сверху вниз и слева направо, в порядке визуального расположения элементов.
Разработчики не всегда учитывают, что при навигации с помощью скринридера любое всплывающее (модальное) окно должно выделяться с помощью клавиатурного фокуса, иначе незрячий пользователь не поймёт, что оно появилось.
Пользователь должен иметь возможность выбрать и активировать любой интерактивный элемент на странице с помощью клавиш Tab, пробела и стрелок. Если есть элементы, раскрывающиеся при наведении на них курсора, то должна быть предусмотрена альтернатива для скринридера — в этом могут помочь библиотеки доступности wai-aria.
Специфика для незрячего пользователя в том, что он воспринимает всю информацию на слух. Зрячий пользователь, например, может нажать на кнопку, посмотреть на следующий экран и довольно быстро вернуться обратно.
У человека с нарушениями зрения на это уйдёт намного больше времени: нажатиями кнопок ему придётся перемещаться по экрану и прослушать все элементы.
Неподписанные и непрочитываемые поля
Все элементы на странице должны быть свёрстаны отдельно. Если подписи к полям и формам свёрстаны как единый текстовый блок, незрячий человек не узнает, к какому полю какая подпись относится. Особое внимание следует уделять таблицам и элементам captcha. Защищённый «молчащей» captcha сценарий будет навсегда закрыт для незрячего пользователя.
В Сбербанк Онлайн практикуется сценарный подход, чтобы убедиться, что все этапы полностью доступны для незрячего пользователя и на его пути не возникнет неподписанной кнопки или неозвучиваемой информации.
Выбор целевого контента
Для незрячих пользователей особенно важна функция, позволяющая беспрепятственно перемещаться по странице и переходить к основному контенту. Она дает возможность пропустить рекламу и перепрыгнуть через длинную навигацию к нужной информации веб-страницы, уменьшая количество контента, который они прослушивают.
В коде HTML есть метки для заголовков разного уровня. Когда незрячий пользователь слышит страницу в первый раз, он нажатием на «горячую клавишу» перемещается по этим заголовкам. Ему необязательно пролистывать весь экран – он может сразу переместиться на заголовок нужного уровня или, например, в раздел курсов валют. Для корректной работы разработчик должен разметить все заголовки нужного уровня и все области.
Масштабирование и контрастность
При грамотной разработке пользователь сможет самостоятельно выбрать масштаб контента – при этом сайт останется читаемым. Использовать адаптивную верстку для этого – лучшее решение. Это и закроет потребности слабовидящих пользователей (у которых есть остаточное зрение), и обеспечит адаптируемость сайта под любое устройство.
Также должны быть соблюдены требования к контрастности. Минимальный её коэффициент — 4,5:1. Проверить свой сайт на контрастность можно с помощью плагинов и программ: Stark plugin, Colour Contrast Analyser, Colorable.
Логичные переходы
Первым элементом для пользователя скринридера должен быть первый элемент страницы — как правило, это кнопка «назад» или заголовок. Разработчики должны учитывать, что курсор можно ставить не в начало страницы, а на первый значимый по смысловой нагрузке элемент.
Если мы говорим о доступных цифровых сервисах, то я всегда привожу в пример Сбербанк. Во-первых, это приложение Сбербанк Онлайн для iOS и Android. Во-вторых, это Сбербанк Бизнес Онлайн, сейчас в веб-версии.
Я тотально незрячий человек и при взаимодействии с компьютером и гаджетами использую программу экранного доступа. Если приложение и сайт адаптированы, то для того, чтобы осуществлять платежи мне не приходится прибегать к помощи других людей.
Например, если мне нужно ввести смс с кодом подтверждения, то раньше мне требовалось переключаться между приложениями, запоминать код или просить сделать это других людей. Теперь смс зачитывает сринридер и предлагает подставить её в приложение автоматически, это очень удобно.
Подробнее о доступности интерфейса можно почитать в гайдлайнах, которые разработал Сбербанк и разместил в открытом доступе.
Как российские компании внедряют доступность
Навигация для незрячих напрямую связана с клавиатурой. Работа с этим элементом ввода реализована, например, на сайте Госуслуг. Страницы полностью адаптированы для работы со скринридером, области размечены, элементы подписаны, заголовки и все кнопки кликабельны.
Сайт Пенсионного Фонда России предлагает не только удобные настройки контрастности для слабовидящих. Там разработали и встроили виджет, зачитывающий выделенный текст – это удобно для слабовидящих, но для незрячего всё равно потребуется скринридер на персональном компьютере.
Помимо веб-версии банк адаптировал и своё приложение Сбербанк Онлайн и Сбербанк Бизнес Онлайн для предпринимателей. А недавно и веб-версия Сбербанк для бизнеса стала доступной для слабовидящих.
Правильные ответы:
1. Delivery Club
2. Ситимобил
3. Оkkо
Из личного опыта реализации accessibility:
1. Все скринридеры довольно сильно отличаются друг от друга — намного сильнее, чем обычные браузеры. Конечное звучание зависит и от скринридера, и от браузера, и от версии операционной системы.
2. Ни один скринридер не поддерживает WAI-ARIA на 100%. Многие приёмы и примеры с официального сайта могут работать в реальном скринридере не совсем корректно.
3. При включении скринридера браузеры переходят в особый режим работы. В этом режиме клавиатурное взаимодействие начинает определяться aria-разметкой, поэтому тестировать навигацию с клавиатуры нужно обязательно при включённом скринридере.
4. Внедрять поддержку доступности для сайта или сервиса лучше всего ещё на этапе дизайна. UX-составляющей в этом процессе очень много. Дизайнер должен учитывать поведение скринридера, взаимодействие компонентов сайта, цветовую палитру, размеры шрифтов.
5. Есть множество нюансов дизайна. Например, нельзя показывать изменение некоторого состояния элемента одним лишь цветом. Нужно или рисовать иконку, или добавлять текстовое описание.
6. Доступная цветовая палитра — это боль. Официальная формула расчёта контрастности не совсем удачна и может выдавать странные результаты для многоцветных изображений. Например, контрастность белого текста на цветной кнопке или плашке может оказаться недостаточной.
7. Если планируется аудит доступности сайта или сервиса сторонней компанией-аудитором, то следует знать, что это весьма непростой процесс: аудитор будет придираться даже к чтению графиков и карт.
8. Кстати говоря, встраиваемые гуглокарты, в отличие от сайта Google Maps, сами по себе не поддерживают чтение. Нужно дорабатывать их самостоятельно.
9. Аналогично, библиотеки для рисования графиков сами по себе не учитывают скринридеры. В каждом конкретном случае нужно придумывать своё решение этой проблемы.
10. Если аудитор проверил страницу, то это ещё не значит, что она теперь точно доступна на 100%. Попросите его проверить её ещё раз, и она вам найдёт новые ошибки. Это следует учитывать, когда аудит изначально заказан клиентом, а вы заказываете у аудитора предварительные проверки.
А можно раскрыть более подробно личный опыт реализации accessibility.
В настоящий момент разрабатываем магазин и честно говоря, я задаюсь этим вопросом. Но с какого конца начать, нет понимания. С командой сошлись на том, что минимум титры к видеоматериалам. Возможно синхронист, но нет понимания востребованности. Но, это пока в сторону людей с ограничением по слуху, а с ограничением по зрению...
Мысли ... В России все плохо и с доступной средой и с материалами для уникальных людей. Если посмотреть на прогрессивные страны - редкий концерт даже реп исполнителей обходиться без сурда, а потенциал лояльной аудитории огромный.
Ни один скринридер не поддерживает WAI-ARIA на 100%
а почему так, это технически невозможно? хотя почему тогда стандарт существует..
вместе с незрячим экспертом банка посмотрели