Делимся экспертизой, которую получили в одном из проектов: как устроена верстка веб-сайта для незрячих и слабовидящих. Какие есть решения и на что обратить внимание. Как подходить к выбору исполнителя на подобный проект.
Почему незрячие и слабовидящие пользователи важны?
Количество слабовидящих пользователей Интернета значительно возросло с развитием адаптивных технологий и доступности сайтов. Согласно отчету Всемирной организации здравоохранения (ВОЗ) и Всемирного банка, более 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.
Оба решения удобны тем, что разработаны российскими разработчиками и имеют русскоговорящую поддержку. Однако стоит учитывать, что не готовые решения закрывают не все требования к удобному сайту для слабовидящих, часть из них требуется реализовать на этапе верстки, отдельно от интеграции плагина.
Что должен уметь исполнитель для разработки под незрячих пользователей?
- Уметь работать с документацией ПО, чтобы корректно изменить верстку и структуру страниц под потребности незрячих пользователей, в частности можем порекомендовать:
ГОСТ Р 52872-2012.
Web Content Accessibility Guidelines (WCAG) 2.0.
Обзорная статья по проблемам с доступностью и способам их решения. - Иметь экспертизу адаптации цифровых сервисов для незрячих пользователей.
- Иметь экспертизу тестирования цифровых сервисов со стороны незрячих пользователей.
- Иметь экспертизу в работе с нестандартными элементами языка HTML.
Как выбрать компанию-разработчика грамотно?
- Проверить, есть ли у компании-разработчика опыт в создании цифровых сервисов для незрячих пользователей.
- Уточнить функционал, который выполняла компания в рамках адаптации: анализ и подготовка рекомендаций, разработка, тестирование. Если компания не имеет экспертизы в ряде пунктов, рассмотреть привлечение дополнительных подрядчиков для закрытия экспертизы.
- Убедиться, что компания-разработчик понимает: адаптация сервиса для незрячих пользователей может быть трудоемкой (в зависимости от запроса Заказчика). Если у разработчика нет этого понимания, то Заказчик может столкнуться с тем, что разработчик недооценит стоимость проекта и будет искать способы сэкономить, что ухудшит результат для незрячих пользователей.
Какие вопросы задать исполнителю?
- Был ли у вас опыт разработки с нуля цифровых сервисов для незрячих пользователей? Запросить ссылку на проект, изучить результат
- Был ли у вас опыт адаптации уже существующих цифровых сервисов для незрячих пользователей? Запросить ссылку на проект, изучить результат
- Адаптировали ли вы цифровой сервис под особенности ПО NVDA? Что на ваш взгляд сложнее всего сделать в процессе адаптации (привести 1-2 конкретных примера)?
- Какие решения по работе со слабовидящими пользователями вы используете? Что на ваш взгляд сложнее всего сделать в процессе адаптации (привести 1-2 конкретных примера)?
- Как вы тестируете результат работы для незрячих пользователей?
- Как вы понимаете, что нужно сделать в рамках адаптации сайта для незрячих пользователей, что является источником перечня работ?
Напоследок: подводный камень при разработке
Основная и неочевидная сложность заключается в тестировании готового продукта. При работе над проектом клиента команда Atman использовала сервис NVDA, но не имея продолжительного опыта использования сервиса, машинально переключалась на более привычные и удобные способы тестирования:
- подключала зрение, визуально анализировала объекты на сайте
- использовала мышь
Из-за этого данные тестирования искажались, и мы в несколько итераций учились отказываться от мыши и зрения, работая только с клавиатурой и озвучкой NVDA. Зато результат получил положительную оценку от целевой аудитории = )
Надеемся, что статья дала понимание по теме и желаем удачи в поиске подходящего исполнителя, который сможет реализовать веб-сайт, доступный для всех пользователей.
