Кнопка "версия для слабовидящих" на сайте обычно означает переключатель размера шрифта и чёрно-белую тему. Задачу это решает частично: человеку с нарушением зрения нужен не только крупный текст, но и возможность пройти по сайту с клавиатуры и услышать содержимое от программы чтения.
Мы в студии Сайты2.рф делали доступные версии для образовательных и медицинских организаций и разбирали сайты, где кнопка есть, а доступности нет. Ниже - что должно работать, как проверить и сколько это стоит.
Кому это обязательно
Требования к доступности сайтов установлены для государственных и муниципальных структур, для образовательных организаций, для учреждений здравоохранения и социальной сферы. Основа - законодательство о социальной защите инвалидов и отраслевые требования к информационной открытости, плюс национальный стандарт по доступности веб-контента.
Для коммерческих сайтов прямого предписания нет. Но есть практический довод: людей с нарушениями зрения в России миллионы, а доступность заодно улучшает сайт для всех остальных. Пожилой посетитель с телефоном в руках получает пользу от того же увеличенного шрифта и понятного фокуса.
Для образовательных организаций эта тема входит в общий перечень требований к сайту, который мы разбирали в статье про сайт школы и вуза.
Что должно работать: полный список
Переключение тем. Минимум три: чёрный текст на белом, белый на чёрном, синий на голубом. Тема должна применяться ко всем элементам, включая кнопки, таблицы и меню, а не только к основному тексту.
Размер шрифта. Несколько шагов увеличения без поломки вёрстки. Проверять надо на реальных страницах: при увеличении на 200% блоки не должны наезжать друг на друга и обрезать текст.
Межбуквенный и межстрочный интервал. Настройка помогает при дислексии и слабом зрении.
Отключение изображений. Картинки скрываются, вместо них показывается текстовое описание. Для этого нужны осмысленные подписи.
Навигация с клавиатуры. По всем ссылкам, кнопкам, полям и элементам меню можно пройти клавишей Tab, порядок логичный, текущее положение видно.
Ссылка "перейти к содержанию". Первая ссылка на странице, позволяющая перескочить меню. Обычно она невидима, пока не получит фокус.
Корректная структура заголовков. Один H1, дальше H2 и H3 по иерархии. Программа чтения строит по ним навигацию: пользователь переходит по заголовкам, как по оглавлению.
Подписи к картинкам. Атрибут alt с описанием смысла, а не "картинка1.jpg". Декоративные изображения помечаются пустым alt, чтобы программа их пропускала.
Подписи к полям форм. Каждое поле связано с подписью через label. Подсказка внутри поля программой чтения не озвучивается как название.
Контраст. Отношение не ниже 4,5 к 1 для обычного текста и 3 к 1 для крупного. Это проверяется инструментами, а не на глаз.
Работа без мыши на всех сценариях. Открыть меню, отправить заявку, закрыть модальное окно, воспользоваться поиском.
Сохранение настроек. Выбранная тема и размер шрифта остаются при переходе на другую страницу.
Почему сторонние виджеты не решают задачу
Виджет добавляет панель с настройками, и формальный признак появляется. Но он не может исправить то, что находится в разметке.
Что остаётся неисправленным: отсутствующие подписи к картинкам, поля формы без связанных подписей, кнопки, сделанные из ссылок и div-ов, невидимый фокус, неправильная иерархия заголовков, недоступное меню.
Плюс у виджетов есть свои недостатки: лишний вес на каждой странице, зависимость от чужого сервера, иногда конфликт со стилями сайта.
Наш подход: доступность реализуется на самом сайте, а панель переключения делается своя, небольшая. Тогда она работает всегда и не зависит от третьей стороны.
Как проверить свой сайт за час
Порядок проверки, который мы используем на аудите.
- Клавиатура. Откройте главную и пройдите по ней только Tab. Видно ли, где вы находитесь? Доступны ли все ссылки меню? Можно ли отправить форму? Можно ли закрыть всплывающее окно?
- Программа чтения. Включите встроенную в систему программу чтения с экрана и послушайте страницу. Сразу станет слышно, где вместо описания читается имя файла и где заголовки не образуют структуру.
- Увеличение. Увеличьте масштаб страницы до 200% и посмотрите, не рассыпалась ли вёрстка.
- Контраст. Прогоните страницы автоматической проверкой доступности в инструментах разработчика браузера.
- Изображения. Проверьте, у всех ли содержательных картинок есть осмысленный alt.
- Формы. Проверьте связь подписей и полей и понятность сообщений об ошибках.
- Все шаблоны. Проверять надо не только главную: карточку, каталог, статью, страницу контактов, форму.
Пункт 7 важен: типичная ситуация, когда главную довели до порядка, а на внутренних страницах доступности нет.
Техническая часть: что делает разработчик
Основные приёмы, без углубления в детали.
Семантическая разметка вместо набора div: header, nav, main, footer, button для кнопок, a для ссылок. Это половина доступности.
Видимый фокус: не убирать стандартную обводку, а стилизовать её. Правило outline: none без замены - одна из самых частых причин недоступности.
Атрибуты для интерактивных элементов там, где нет подходящего тега: роли и подписи. Но правильный тег всегда лучше атрибута.
Управление фокусом в модальных окнах: при открытии фокус переходит внутрь, при закрытии возвращается на кнопку, вне окна элементы недоступны.
Уважение системных настроек: если пользователь отключил анимации, движение на сайте не запускается.
Тексты ссылок, понятные вне контекста: "подробнее об услуге разработки" вместо "подробнее". Программа чтения умеет перечислять ссылки списком, и десять ссылок "подробнее" в таком списке бесполезны.
Побочная польза для всех
Работа над доступностью улучшает сайт целиком, и это не рассуждение, а наблюдение по проектам.
Правильная структура заголовков помогает поисковым системам понять страницу. Подписи к картинкам дают дополнительный источник трафика из поиска по картинкам. Понятный фокус и семантическая разметка обычно означают более аккуратный код, который проще поддерживать. Крупный шрифт и хороший контраст улучшают чтение на телефоне на улице.
Дополнительно доступность связана с мобильной версией: многие правки пересекаются. Разбор мобильных ошибок собран в статье про мобильную версию сайта, а работа со шрифтами и читаемостью - в статье про шрифты для сайта.
Сколько стоит
| Работа | Срок | Стоимость |
|---|---|---|
| Аудит доступности с перечнем проблем | 3-5 дней | 25 000 - 45 000 руб. |
| Панель настроек: темы, шрифт, интервалы, изображения | 1-2 недели | 40 000 - 80 000 руб. |
| Исправление разметки: заголовки, alt, подписи форм, фокус | 1-3 недели | от 60 000 руб. |
| Доступность в новом проекте | входит в разработку | надбавка минимальна |
Последняя строка объясняет главное: закладывать доступность при разработке почти бесплатно, а переделывать готовый сайт дорого. Если вы сейчас планируете новый сайт и относитесь к организациям, для которых требования обязательны, скажите об этом подрядчику до начала работ.
Нужен аудит доступности вашего сайта? Напишите нам через контакты: проверяем на клавиатурную навигацию, программу чтения и контраст, присылаем список правок с приоритетами.
