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

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

В статье разберём базовые принципы, конкретные требования к дизайну и разработке, способы проверки и вопросы, которые нужно задавать подрядчику.

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

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

  • Расширение аудитории. Сайт, которым невозможно пользоваться, автоматически отсекает часть клиентов.
  • Выше удобство для всех. Крупные кнопки, понятные подписи и хороший контраст улучшают конверсию у любой аудитории.
  • Лучше техническое качество. Чистая смысловая разметка помогает и поисковым роботам, и программам экранного доступа.
  • Репутация. Забота о разных пользователях формирует образ ответственной компании.
  • Снижение рисков. Для государственных и социальных сервисов требования к доступности закреплены в нормативных документах, а у коммерческих компаний растёт ожидание рынка.

Четыре принципа доступности

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

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

Основные категории пользователей и их потребности

Нарушения зрения

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

Нарушения слуха

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

Моторные ограничения

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

Когнитивные особенности

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

Ситуативные и возрастные ограничения

Яркий свет, шумное окружение, медленное соединение, одна свободная рука, усталость. Всё, что делает интерфейс устойчивым к плохим условиям, улучшает опыт этих людей.

Цвет и контраст

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

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

Ещё больше про цветовые решения и читаемость мы рассказывали в статьях о контрасте и читаемости и выборе цветовой палитры.

Типографика и масштабирование

  • Размер основного текста не менее 16 пикселей, и интерфейс не должен ломаться, если пользователь увеличит масштаб страницы вдвое.
  • Размеры задавайте в относительных единицах, чтобы текст реагировал на системные настройки.
  • Межстрочный интервал около полутора размеров шрифта, длина строки не более 80 символов.
  • Избегайте выравнивания по ширине, из-за которого в строках возникают неровные пробелы, затрудняющие чтение людям с дислексией.
  • Не прячьте важную информацию в изображения с текстом: такой текст нельзя увеличить без потери качества и не прочитает программа экранного доступа.

О влиянии шрифтов на восприятие читайте в материале о типографике на сайте.

Управление с клавиатуры

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

Что должно работать:

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

Изображения, видео и аудио

Альтернативный текст

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

Плохо: «Фото 1». Хорошо: «Менеджер студии обсуждает с клиентом макет главной страницы». А для иконки корзины подходит подпись «Перейти в корзину», а не «Иконка».

Видео и аудио

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

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

Формы и интерактивные элементы

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

  • Подписи к полям. У каждого поля должна быть видимая подпись, привязанная к нему в коде. Плейсхолдер вместо подписи исчезает при вводе и плохо читается.
  • Понятные ошибки. Сообщение должно объяснять, что не так и как это исправить: «Введите адрес почты в формате name@domain», а не «Ошибка».
  • Обязательные поля. Помечайте их не только звёздочкой, но и словами, и не требуйте лишнего.
  • Автозаполнение. Правильно заданные типы полей позволяют браузеру подставлять данные и облегчают ввод на смартфоне.
  • Размер целей касания. Кнопки и ссылки должны быть достаточно крупными и разнесены, чтобы по ним можно было попасть пальцем. Ориентир — не менее 44 на 44 пикселя.
  • Время. Если сессия ограничена, предупреждайте заранее и давайте возможность продлить.

Больше о том, как сделать формы удобными, в материале про формы обратной связи, а о кнопках — в статье про кнопки и призывы к действию.

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

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

  • Один главный заголовок на странице и последовательная иерархия подзаголовков без пропусков уровней.
  • Кнопки реализованы как кнопки, ссылки — как ссылки, а не как произвольные блоки с обработчиком клика.
  • Выделены основные области: шапка, навигация, основное содержимое, подвал.
  • Заданы язык страницы и осмысленный заголовок вкладки.
  • Таблицы используются для данных, а не для вёрстки, и имеют подписи столбцов.
  • Дополнительные атрибуты ролей применяются только там, где обычной разметки недостаточно.
Совет студии. Хорошее правило: сначала используйте стандартные элементы, и только если их не хватает — добавляйте специальные атрибуты. Неправильно применённые атрибуты хуже, чем их отсутствие: они вводят пользователя в заблуждение.

Язык и содержание

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

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

Подходы к написанию читаемых текстов описаны в статье о текстах для сайта.

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

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

  1. Автоматические сканеры. Находят отсутствующие подписи, низкий контраст, пропущенные уровни заголовков. Это быстрая первая проверка.
  2. Ручная проверка с клавиатуры. Пройдите ключевые сценарии без мыши: найти услугу, открыть меню, заполнить форму.
  3. Проверка со скринридером. Включите штатную программу озвучивания на компьютере или смартфоне и попробуйте выполнить задачу с закрытыми глазами.
  4. Масштаб и размеры. Увеличьте страницу в два раза и посмотрите, что произойдёт с вёрсткой.
  5. Режимы отображения. Посмотрите сайт в высоком контрасте, в оттенках серого и при отключённых изображениях.
  6. Живые пользователи. Если есть возможность, привлеките людей с реальными ограничениями. Их замечания невозможно заменить никакими инструментами. Основы организации тестов описаны в материале про юзабилити-тестирование.

Типичные ошибки

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

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

Дешевле всего учитывать требования с самого начала. Если вы только планируете сайт, добавьте их в техническое задание и в критерии приёмки. Чтобы не изобретать формулировки с нуля, используйте материал о том, как составить техническое задание.

Практический порядок действий:

  1. На этапе проектирования закладывайте крупные элементы, понятные сценарии и последовательную структуру заголовков.
  2. На этапе дизайна выбирайте палитру с проверкой контраста, определяйте стили для состояний фокуса и ошибки.
  3. На этапе вёрстки используйте смысловые теги, проверяйте работу с клавиатуры.
  4. На этапе наполнения добавляйте описания к изображениям и субтитры к видео.
  5. На этапе приёмки включите проверку доступности в чек-лист и повторяйте её после каждого крупного обновления.

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

Вопросы, которые стоит задать подрядчику

  • Учитываете ли вы доступность при проектировании и можно ли закрепить это в договоре?
  • Проверяете ли вы контраст и работу с клавиатурой на этапе дизайна и приёмки?
  • Какие стандарты используются и до какого уровня соответствия вы готовы довести сайт?
  • Как будут описаны изображения и кто отвечает за тексты для программ экранного доступа?
  • Что произойдёт при обновлении сайта: как вы гарантируете, что новые страницы не нарушат доступность?

Подробнее о том, как сформулировать эти вопросы и ожидания, мы писали в статье о выборе веб-студии.

Итог

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

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