Версия сайта для незрячих и слабовидящих: описание и алгоритм внедрения в проект

Почему незрячие и слабовидящие пользователи важны?

Количество слабовидящих пользователей Интернета значительно возросло с развитием адаптивных технологий и доступности сайтов. Согласно отчету Всемирной организации здравоохранения (ВОЗ) и Всемирного банка, более 2,2 миллиарда человек в мире страдают от нарушений зрения или слабовидения. Это означает, что большое количество людей с ограниченными возможностями зрения имеют потенциальный интерес к использованию сайтов и Интернета в целом.

Тренд на рост доступности веб-сайтов и мобильных приложений для инвалидов в России зафиксирован на государственном уровне. Можно выделить следующие основополагающие рекомендации:

• 8-ФЗ "Об обеспечении доступа к информации о деятельности государственных органов и органов местного самоуправления"
• 181-ФЗ "О социальной защите инвалидов в Российской Федерации"
• ГОСТ Р 52872-2012
• ГОСТ Р 52872-2019 

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

• rzd.ru — Официальный сайт ОАО "Российские железные дороги".
• kremlin.ru — Официальный сайт Президента Российской Федерации.
• cbr.ru — Центральный банк Российской Федерации.
• sfr.gov.ru — Социальный фонд России.

Технические решения

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

Решения для незрячих:

Программы чтения с экрана: Программы чтения с экрана, такие как JAWS (Job Access With Speech) и NVDA (NonVisual Desktop Access), используются как незрячими, так и слабовидящими людьми. Эти программы обеспечивают озвучивание текста и других элементов интерфейса, позволяя пользователям слушать содержимое экрана.

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

Решения для слабовидящих:

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

Увеличение масштаба и зумирование: Слабовидящие пользователи часто используют функции увеличения масштаба и зумирования в операционных системах и браузерах. Это позволяет им увеличивать размер текста и изображений для лучшего восприятия.

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

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

Требования к верстке веб-сайта

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

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

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

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

Семантическая разметка: Используйте семантическую разметку HTML, такую как теги заголовков (h1, h2, h3 и т. д.), списки и параграфы. Это поможет пользователям лучше понимать структуру страницы и навигацию.

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

Доступные формы: При создании форм на сайте используйте ясные инструкции, предоставьте информацию об ошибках ввода и используйте различные способы обозначения обязательных полей (например, маркеры или символы «*»).

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

Устранение анимации: Если на сайте есть анимированные элементы или автоматический переход между страницами, предоставьте возможность отключить или управлять анимацией для пользователей, которым это может вызвать дискомфорт или затруднения.

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

Готовые решения для слабовидящих из России

В России были разработаны две бесплатных библиотеки, которые можно интегрировать с сайтом на любой CMS:

BVI (Button visually impaired) — это плагин, который автоматически изменяет версию вашего сайта для слабовидящих людей. Панель на сайте для слабовидящих дает возможность изменять цветовую гамму сайта, размеры шрифтов, синтезатор речи озвучит вслух изменения настроек. С помощью неё можно изменять функции сайта, которые удовлетворят потребностями людей с ограниченными возможностями.

Мибок: Версия для слабовидящих — плагин, предназначенный для автоматической генерации версии сайта, пригодной для использования соответствующей категорией граждан. По приказу Минкомсвязи России от 23.12.2016 N682 программный продукт внесен в Единый реестр российских программ для электронных вычислительных машин и баз данных - Регистрационный номер ПО: 2524.

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

Что должен уметь исполнитель для разработки под незрячих пользователей? 

1. Уметь работать с документацией ПО, чтобы корректно изменить верстку и структуру страниц под потребности незрячих пользователей, в частности можем порекомендовать:
   ГОСТ Р 52872-2012.
   Web Content Accessibility Guidelines (WCAG) 2.0.
   Обзорная статья по проблемам с доступностью и способам их решения.
2. Иметь экспертизу адаптации цифровых сервисов для незрячих пользователей.
3. Иметь экспертизу тестирования цифровых сервисов со стороны незрячих пользователей.
4. Иметь экспертизу в работе с нестандартными элементами языка HTML.

Как  выбрать компанию-разработчика грамотно? 

1. Проверить, есть ли у компании-разработчика опыт в создании цифровых сервисов для незрячих пользователей.
2. Уточнить функционал, который выполняла компания в рамках адаптации: анализ и подготовка рекомендаций, разработка, тестирование. Если компания не имеет экспертизы в ряде пунктов, рассмотреть привлечение дополнительных подрядчиков для закрытия экспертизы.
3. Убедиться, что компания-разработчик понимает: адаптация сервиса для незрячих пользователей может быть трудоемкой (в зависимости от запроса Заказчика). Если у разработчика нет этого понимания, то Заказчик может столкнуться с тем, что разработчик недооценит стоимость проекта и будет искать способы сэкономить, что ухудшит результат для незрячих пользователей.

Какие вопросы задать исполнителю?

1. Был ли у вас опыт разработки с нуля цифровых сервисов для незрячих пользователей? Запросить ссылку на проект, изучить результат
2. Был ли у вас опыт адаптации уже существующих цифровых сервисов для незрячих пользователей? Запросить ссылку на проект, изучить результат
3. Адаптировали ли вы цифровой сервис под особенности ПО NVDA? Что на ваш взгляд сложнее всего сделать в процессе адаптации (привести 1-2 конкретных примера)?
4. Какие решения по работе со слабовидящими пользователями вы используете? Что на ваш взгляд сложнее всего сделать в процессе адаптации (привести 1-2 конкретных примера)?
5. Как вы тестируете результат работы для незрячих пользователей?
6. Как вы понимаете, что нужно сделать в рамках адаптации сайта для незрячих пользователей, что является источником перечня работ?

Напоследок: подводный камень при разработке

Основная и неочевидная сложность заключается в тестировании готового продукта. При работе над проектом клиента команда Atman использовала сервис NVDA, но не имея продолжительного опыта использования сервиса, машинально переключалась на более привычные и удобные способы тестирования:

• подключала зрение, визуально анализировала объекты на сайте
• использовала мышь

Из-за этого данные тестирования искажались, и мы в несколько итераций учились отказываться от мыши и зрения, работая только с клавиатурой и озвучкой NVDA. Зато результат получил положительную оценку от целевой аудитории = )

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