Часто при создании сайтов мы руководствуемся понятиями эстетики и визуальной красоты. Но при этом забываем об одной очень важной группе пользователей — с особенностями зрения и восприятия визуальной информации. Тем временем, по данным Международного агентства по профилактике слепоты, различные нарушения зрения имеют около 285 млн человек, а у примерно 108 млн диагностирован дальтонизм. Это означает, что как бы тщательно вы ни подбирали цвета сайта и их сочетания, значительная группа пользователей увидит их совершенно по-другому или вовсе не сможет пользоваться вашим ресурсом.

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

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

В 2020 году был принят ГОСТ Р 52 872−2019, посвященный доступности интернет-ресурсов для всех групп пользователей, в том числе и с особенностями зрения. Для государственных организаций нормы ГОСТа обязательны, но, конечно, желательно, чтобы каждый сайт мог адаптироваться под особенности людей с нарушениями зрения. По исследованиям фонда «Искусство, наука и спорт» было выделено несколько категорий сайтов, особо важных для слабовидящих пользователей:

Поэтому, если ваш бизнес связан с одной из этих сфер, вам просто необходимо адаптировать сайт для пользователей с нарушениями зрения.

Всего в ГОСТе содержится около полутора сотен требований к адаптированным версиям сайтов. Вот их краткое содержание:

Помимо ГОСТа, существует международный стандарт WCAG 2.1 (Web Content Accessibility Guidelines, который тоже регламентирует требования к доступным сайтам.

Определить, насколько ваш сайт отвечает требованиям доступности, можно через определенные сервисы — например, Stark. Контрастность и четкость интерфейса можно проверить через программу Colour Contrast Analyser. А Chrome анонсировал новую функцию, которая показывает, как онлайн-ресурсы воспринимают пользователи с особенностями цветового восприятия. Включить функцию можно будет в меню разработчиков по пути: Developer tools → More tools → Rendering → Emulate visual deficiencies.

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

И все же, как сделать свой сайт доступнее для людей с нарушениями зрения? Здесь есть несколько способов — создать отдельную версию, использовать специальный модуль для CMS или адаптировать уже существующий сайт. Рассмотрим все эти способы.

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

Гораздо проще использовать уже готовые модули, которые автоматически «переключают» ваш сайт на адаптированную версию — несколько таких есть для CMS Битрикс.

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

Все такие модули можно найти по этой ссылке. Мы выделили 3 из них — все они разработаны с учетом требований ГОСТ Р 52 872−2019 и WCAG 2.1:

Мибок: Версия для слабовидящих

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

Стоимость: 15 900 руб.

Слабовид LITE

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

Стоимость: 4900 руб.

SIMAI: Версия для слабовидящих

Еще один вариант модуля для Битрикса — здесь можно настроить один из 3 размеров шрифта и одну из 4 цветовых схем, а также включить или выключить изображения и изменить размер кернинга. Разработчик обещает простую установку и удобство настройки отображения для пользователей.

Стоимость: 9900 руб.

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

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

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

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

Поэтому перед тем, как устанавливать модуль или разрабатывать отдельную версию сайта с нуля, подумайте — может, действительно, легче адаптировать ваш сайт под возможности людей с особенностями зрительного восприятия. В том числе, обеспечить возможность использования программы-скринридера. Для этого достаточно, чтобы чтобы все элементы поддерживали индексы по tab, а изображения имели заполненный атрибут alt. Для управления сайтом с клавиатуры необходимо, чтобы все навигационные элементы, в том числе и написанные на Java-скриптах, были прописаны в коде как кнопки или ссылки.

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

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