Доступность сайта для людей с ограниченными возможностями

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

Кому нужна доступность и почему это касается каждого

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

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

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

Принципы, на которых строятся стандарты

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

1. Воспринимаемость. Информация должна быть представлена так, чтобы ее можно было воспринять хотя бы одним способом: у картинки есть описание, у видео — субтитры, у текста — достаточный контраст.
2. Управляемость. Всем элементам можно управлять разными способами, в первую очередь с клавиатуры, и у пользователя достаточно времени на действия.
3. Понятность. Текст читается легко, интерфейс ведет себя предсказуемо, ошибки объясняются простым языком.
4. Надежность. Разметка корректна, чтобы разные браузеры и вспомогательные технологии одинаково ее интерпретировали.

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

Контраст, цвет и шрифты

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

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

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

Тексты для изображений, видео и звука

Программа чтения экрана озвучивает альтернативный текст изображения. Если его нет, пользователь услышит имя файла или просто слово «изображение». Описание должно передавать смысл, а не просто перечислять детали: вместо «фото 1» напишите «Менеджер обсуждает макет сайта с клиентом». Декоративные картинки, которые не несут информации, помечают пустым альтернативным текстом, чтобы программа их пропускала.

Сложные изображения

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

Видео и аудио

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

Клавиатура и структура страницы

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

• Все интерактивные элементы достижимы с клавиатуры и расположены в логичном порядке.
• Текущий элемент в фокусе хорошо виден. Распространенная ошибка — убрать контур фокуса ради красоты, оставив пользователя без ориентира.
• В начале страницы есть ссылка «Перейти к основному содержимому», чтобы не проходить десятки пунктов меню каждый раз.
• Модальные окна захватывают фокус, закрываются клавишей Escape и возвращают фокус на место вызова.
• Выпадающие меню раскрываются не только при наведении.

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

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

Формы, ошибки и понятный язык

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

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

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

Как проверить сайт и встроить доступность в процесс

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

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

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

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

Анимации, мигание и ограничения по времени

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

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

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

Вывод

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