Доступность сайта: как сделать его удобным для всех

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

Кому нужна доступность

Первая ассоциация со словом «доступность» — слепые пользователи со скринридерами. Это важная группа, но далеко не единственная. Ограничения бывают разными, и они не всегда постоянные.

Постоянные, временные и ситуационные ограничения

• Постоянные: нарушение зрения, слуха, моторики, особенности восприятия и внимания.
• Временные: сломанная рука, воспаление глаз, усталость после рабочего дня.
• Ситуационные: яркое солнце на экране, один свободный палец с ребёнком на руках, шумное помещение без наушников, медленное соединение.

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

Выгоды для бизнеса

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

Четыре принципа, на которых всё держится

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

Что проверить в первую очередь

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

Контраст и читаемость текста

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

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

Не полагайтесь только на цвет

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

Клавиатурная навигация

Попробуйте на своём сайте простой тест: уберите мышь и пройдите страницу клавишей Tab. Можно ли добраться до меню, формы, кнопок? Виден ли текущий элемент? Логичен ли порядок переходов? Нередко выясняется, что рамка фокуса отключена ради «чистого» дизайна, выпадающее меню открывается только по наведению, а модальное окно не закрывается без мыши.

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

Текстовые описания изображений

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

Структура и семантика

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

Заголовки как оглавление

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

Правильные элементы вместо «самодельных»

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

Основные области страницы

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

Дополнительные атрибуты — только когда нужно

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

Формы: место, где доступность приносит заявки

Форма — главная точка конверсии, и именно здесь недоступность обходится дороже всего. Человек может хотеть оставить заявку, но не справиться с интерфейсом.

Подписи и подсказки

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

Сообщения об ошибках

Фраза «Ошибка» ничего не объясняет. Хорошее сообщение сообщает, что именно не так и как исправить: «Укажите адрес электронной почты в формате [email protected]». Ошибку нужно показывать рядом с полем и сообщать о ней помогающим технологиям, а фокус желательно переводить на первое проблемное поле.

Защита от роботов

Сложные картинки-проверки блокируют значительную часть людей. Если без защиты не обойтись, используйте невидимые проверки или альтернативные способы, например простой вопрос. Подробнее о защите форм мы пишем при работе над сайтами и лендингами.

Мультимедиа и движение

Видео и звук

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

Анимации и мерцание

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

Как проверять доступность

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

С чего начать, если ресурсов немного

Не нужно пытаться исправить всё сразу. Приоритизируйте по влиянию на пользователей и по трудоёмкости.

1. Исправьте контраст текста и кнопок, увеличьте размер основного шрифта.
2. Верните видимый фокус и проверьте навигацию с клавиатуры в ключевых сценариях.
3. Добавьте подписи к полям форм и понятные сообщения об ошибках.
4. Заполните описания у значимых изображений.
5. Наведите порядок в иерархии заголовков.
6. Отключите автоматическое воспроизведение и добавьте субтитры к видео.

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

Итог

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