Кому это нужно
Доступность принято обсуждать как заботу о людях с нарушениями зрения, и такая рамка сужает задачу до узкой группы. Полезнее считать иначе: ограничения бывают постоянными, временными и ситуативными, и вторых с третьими гораздо больше.
Человек с рукой в гипсе на неделю управляет только клавиатурой. На ярком солнце экран теряет половину контраста. В транспорте без наушников видео работает только с субтитрами. Все трое пользуются ровно теми же решениями, что и человек с постоянным ограничением.
Четыре базовые проверки
| Проверка | Что смотреть | Кому помогает в первую очередь |
|---|---|---|
| Контраст | Соотношение цвета текста и фона в обеих темах | Слабое зрение, яркий свет, дешёвые экраны |
| Клавиатура | Пройти весь путь до целевого действия без мыши | Моторные ограничения, сломанная мышь, опытные пользователи |
| Подписи полей | У каждого поля есть связанная с ним подпись | Программы чтения с экрана, все при автозаполнении |
| Альтернативный текст | Содержательные изображения описаны, декоративные пропущены | Незрячие, медленное соединение, поисковые роботы |
Порядок в таблице не случаен: первые две проверки делаются за минуты и ловят самые заметные проблемы, вторые две требуют пройти по разметке.
Как проверять руками
Контраст. Инструменты разработчика показывают вычисленное соотношение для выбранного элемента. Проверять нужно не только основной текст, но и приглушённые подписи, плейсхолдеры и текст на цветных кнопках — обычно проседают именно они. Если на сайте две темы, каждая проверяется отдельно.
Клавиатура. Уберите руку с мыши и пройдите путь до заявки клавишей табуляции. Смотрите на три вещи: виден ли фокус, соответствует ли порядок обхода визуальному, можно ли закрыть модальное окно без мыши. Невидимый фокус — самая частая поломка, и появляется она обычно после того, как дизайнер попросил «убрать эту синюю рамку».
Подписи. Поле без связанной подписи для программы чтения безымянно — человек слышит «поле ввода» и не знает, что вводить. Подсказка внутри поля подписью не является: она исчезает при вводе. Разбор формулировок — в материале про микротексты.
Альтернативный текст. Содержательное изображение описывается предложением о том, что на нём. Декоративное получает пустой атрибут, чтобы его пропустили. Имя файла в качестве описания хуже пустого: оно озвучивается и ничего не сообщает.
Автоматическая проверка показывает ноль ошибок, а пользоваться неудобно. Инструменты видят только формальную часть: наличие атрибута, но не его осмысленность. Пройдите путь клавиатурой сами.
Фокус не виден при обходе. Стандартную рамку убрали ради внешнего вида и не заменили. Нужен любой заметный индикатор — своя рамка, подсветка, изменение фона.
Модальное окно нельзя закрыть без мыши. Фокус не переведён внутрь окна и не возвращается назад. Проверяется открытием окна и нажатием клавиши возврата.
Ссылки называются «здесь» и «подробнее». Программа чтения умеет зачитывать список ссылок страницы отдельно — такой список бесполезен. Заодно это вредит и перелинковке: анкор ничего не сообщает о цели.
Что дают автоматические проверки
Они ловят формальные признаки: отсутствующий атрибут, недостаточный контраст, поле без подписи, нарушенный порядок заголовков. Это полезный фильтр от грубых поломок и разумный первый шаг.
Чего они не ловят — осмысленность. Атрибут alt="image1" формально присутствует. Порядок обхода может быть технически корректным и при этом прыгать по странице. Подпись может существовать и не объяснять, что вводить. Поэтому автоматическая проверка снимает первый слой, а вывод даёт только проход по сценарию руками.
Пересечение с поиском
Доступность и техническая оптимизация опираются на одно и то же: и программа чтения с экрана, и поисковый робот работают с текстовой структурой, а не с внешним видом.
Отсюда совпадения. Заголовки в правильном порядке дают и оглавление для программы чтения, и понятную иерархию для робота. Альтернативный текст описывает картинку обоим. Осмысленные анкоры помогают и навигации, и распределению веса. Контент, доступный без выполнения скриптов, читается и тем и другим — это же условие важно для попадания в ответы нейросетей.
Обратное неверно: сайт может быть безупречен технически и непроходим с клавиатуры. Общая часть велика, но не покрывает всего.
Где заканчивается разумная доработка
Довести до полного соответствия стандартам старый сайт со сложными интерфейсами бывает дороже, чем переписать его. В такой ситуации разумнее закрыть базовый слой — контраст, клавиатура, подписи, alt — и обеспечить альтернативный путь к целевому действию: телефон, почта, простая форма без сложных виджетов.
Второе ограничение — интерфейсы, где визуальная работа составляет суть задачи: редакторы изображений, конструкторы, инструменты вёрстки. Здесь доступность обеспечивается для окружения — навигации, настроек, экспорта, — а не для самого холста.
Видео, аудио и движение
Три вещи, которые обычно забывают, потому что они не попадают в автоматические проверки.
Субтитры. Нужны не только при нарушениях слуха: значительная часть просмотров в транспорте и офисе идёт без звука. Автоматические субтитры лучше отсутствия, но требуют вычитки — на терминах и названиях они ошибаются чаще всего, а именно термины несут смысл.
Текстовая версия. Расшифровка подкаста или видео решает сразу три задачи: доступность, возможность быстро просмотреть глазами вместо прослушивания и наличие текста, который вообще может быть проиндексирован. Видео без расшифровки для поисковой системы и для ответов нейросетей почти пустое.
Автовоспроизведение и движение. Карусели, переключающиеся сами, и анимация без возможности остановки мешают всем, а части людей — до невозможности пользоваться страницей. Разумное правило: любое движение должно останавливаться, и ничто не должно запускаться со звуком без действия человека.
Отдельная деталь — контроль над временем. Формы и сессии, которые истекают без предупреждения, отсекают тех, кто заполняет медленно: с экранной клавиатурой, программой чтения или просто без спешки. Предупреждение с возможностью продлить стоит недорого и снимает целый класс потерь на последнем шаге.
С чего начать на существующем сайте
Порядок такой: пройти клавиатурой путь до заявки, проверить контраст на трёх типовых страницах, посмотреть подписи в главной форме, просмотреть альтернативные тексты на десяти самых посещаемых страницах.
Это занимает час и закрывает большую часть проблем, с которыми люди реально сталкиваются. Дальнейшее — вопрос приоритетов, а не полноты: доступность не бывает завершённой, но бывает достаточной для того, чтобы никто не упирался в стену на пути к целевому действию.
Спорное место
Доступность продаётся двумя способами, и оба слабые. Первый — через сочувствие, и тогда её ставят в один ряд с благотворительностью, то есть в конец очереди. Второй — через страх санкций, и тогда работа сводится к формальному соответствию проверке, после которого пользоваться сайтом удобнее не становится.
Более честная рамка — считать доступность частью обычного качества интерфейса. Невидимый фокус, нечитаемый контраст и поле без подписи мешают всем, просто одним они мешают всегда, а другим — иногда. Ровно поэтому базовые проверки окупаются без апелляции к морали: они улучшают юзабилити для всей аудитории, а не для отдельной группы.
Частые вопросы
Это нужно только сайтам государственных организаций?
Как быстро проверить контраст?
Нужен ли alt каждой картинке?
Помогает ли доступность в поиске?
Источники
- Web accessibility — Wikipedia