Кнопка «Отправить заявку» работает при щелчке мышью, но до неё нельзя добраться клавишей Tab. Для посетителя, который пользуется клавиатурой, на этом обращение к компании заканчивается. Так может случиться и с человеком, у которого внезапно перестал работать тачпад: клавиатура остаётся, а завершить отправку не получается.
Доступность сайта — это возможность прочитать информацию и выполнить нужное действие при разных особенностях зрения, слуха, моторики и восприятия. На бизнес-сайте важно проверить весь путь посетителя: видит ли он описание услуги и цену, может ли заполнить форму, найти контакты и понять, что заявка отправлена.
Почему доступность влияет на работу бизнеса
Барьер часто возникает в последний момент. Человек нашёл услугу, но не может открыть меню с ценами. Или заполнил форму, а после ошибки не понимает, какое поле нужно исправить. Услуга ему подходит, но обращение компания не получает.
Дело не только в количестве потенциальных клиентов. Понятные подписи полей, читаемый текст и предсказуемое управление помогают и тем, кто увеличил масштаб страницы, открыл сайт на небольшом экране, временно не может пользоваться одной рукой или смотрит видео там, где плохо слышно звук. Это часть обычного качества обслуживания.
Есть польза и для команды сайта. Если кнопки названы понятно, ошибки объяснены текстом, а страница не ломается при увеличении масштаба, легче проверять работу сайта и разбирать жалобы. Вместо «ничего не работает» поддержка может услышать: «После выбора даты фокус не переходит на кнопку подтверждения». Сами по себе такие исправления не гарантируют роста продаж или уменьшения числа обращений, но устраняют препятствия, которые компания может исправить.
Требования к цифровой доступности зависят от страны, отрасли и типа организации. Одна автоматическая проверка не даёт оснований обещать соответствие закону. Но проверить, может ли посетитель самостоятельно получить информацию и отправить запрос, полезно любому сайту.
Где посетитель чаще всего сталкивается с барьером
Навигация и управление без мыши
Ссылки, кнопки, вкладки и поля формы должны выбираться с клавиатуры в понятном порядке. При этом нужно видеть, какой элемент выбран: без заметного индикатора фокуса человек не знает, что произойдёт после нажатия Enter. Меню, которое открывается только при наведении курсора, может быть недоступно и с клавиатуры, и на сенсорном экране.
Отдельно проверьте всплывающие окна: уведомление о файлах cookie, выбор даты, чат, форму заказа. Если окно появилось, а фокус остался на странице под ним, управлять сайтом становится трудно. Закрытие только щелчком по маленькому крестику тоже создаёт проблему для тех, кому сложно точно двигать мышью.
Текст, изображения и видео
Мелкий бледный текст на светлом фоне трудно читать даже при хорошем зрении, особенно при ярком освещении. При увеличении масштаба текст должен оставаться разборчивым, а посетителю не должно приходиться постоянно прокручивать страницу по горизонтали. Не передавайте смысл одним цветом: фраза «поля, отмеченные красным, обязательны» не поможет тому, кто не различает отметки или слушает страницу через программу экранного доступа.
Содержательным изображениям нужно текстовое описание. Если схема показывает порядок подключения устройства, текст должен передавать шаги, а не ограничиваться словами «схема подключения». Декоративную иллюстрацию, наоборот, не нужно озвучивать как содержательную. Для видео с речью нужны точные субтитры; если важные действия показаны только на экране, объясните их словами в видео или рядом с ним.
Формы и сообщения об ошибках
Подпись поля должна быть видна и после начала ввода. Подсказка внутри пустого поля исчезает, когда человек начинает печатать, поэтому она не заменяет постоянную метку. Если форма не отправилась, укажите причину: «Укажите адрес электронной почты в формате [email protected]» понятнее, чем красная рамка вокруг поля без пояснения.
Не сбрасывайте введённые данные после ошибки без необходимости. В длинной заявке повторный ввод адреса, серийного номера или описания неисправности может заставить человека отказаться от отправки. Если у формы есть ограничение по времени, дайте пользователю достаточно времени или возможность продлить его.
Почему эта тема близка сайту компьютерной помощи
Посетитель сайта компьютерной помощи может уже столкнуться с ограничением в управлении устройством. При неисправной мыши он ищет инструкцию с клавиатуры. После сбоя видеодрайвера может видеть страницу в низком разрешении или пользоваться увеличенным интерфейсом. Если не работает звук, видеоинструкция без субтитров не поможет проверить нужный параметр. Здесь доступность влияет на возможность устранить неполадку, а не только на удобство чтения.
Представим, что человек пытается восстановить работу тачпада. Инструкция должна читаться на телефоне, а элементы страницы не должны перекрывать шаги. Если нужен материал по самой неисправности, подойдёт инструкция о том, что проверить в Windows, когда не работает тачпад на ноутбуке. Но даже полезная ссылка не решит проблему, если до неё нельзя добраться на текущей странице.
Скриншот не должен быть единственным источником сведений в инструкции. Фраза «нажмите кнопку на изображении» бесполезна, если изображение не загрузилось или человек пользуется программой экранного доступа. Название окна, пункта меню и ожидаемый результат напишите текстом. Перед шагами, которые меняют настройки системы или драйверы, отдельно предупредите о необходимости сделать резервную копию важных данных.
Как проверить важные страницы без большого аудита
Не обязательно начинать со всего сайта. Возьмите основные маршруты: главная страница → описание услуги → контакты или заявка; статья с инструкцией → нужный шаг → форма вопроса. Важно проверить не отдельные экраны, а возможность завершить действие.
- Пройдите маршрут с клавиатуры. Перемещайтесь между элементами клавишами Tab и Shift+Tab, активируйте подходящие элементы с помощью Enter и пробела. Проверьте, виден ли фокус, логичен ли порядок переходов, можно ли открыть и закрыть меню и диалоги.
- Увеличьте масштаб страницы. Посмотрите, удаётся ли прочитать содержание и заполнить форму, не теряя текст или кнопки. Затем проверьте страницу в узком окне браузера.
- Вызовите ошибки формы. Оставьте обязательное поле пустым и введите адрес электронной почты в неверном формате. Сообщение должно указывать на конкретную проблему, а уже введённые данные — сохраняться.
- Посмотрите видео без звука. Проверьте, есть ли субтитры для речевых пояснений и понятны ли важные действия на экране без аудио.
- Проверьте изображения и ссылки. Значимые схемы должны иметь понятное текстовое описание, а название ссылки — объяснять, куда она ведёт, даже без соседнего предложения.
Автоматические средства находят часть ошибок, например отсутствие подписей или недостаточный контраст. Но они не скажут, понятна ли инструкция человеку и удаётся ли отправить заявку без мыши. Дополняйте их ручной проверкой основных маршрутов и, если есть возможность, тестированием с людьми, которые используют вспомогательные технологии.
Как выбирать исправления
Сначала устраняйте то, что полностью блокирует действие: недоступную с клавиатуры кнопку отправки, форму с непонятными ошибками, меню, которое нельзя открыть без мыши. Затем беритесь за проблемы, которые затрудняют задачу: слабый контраст, неясные подписи, схемы без текстового описания. Визуальные детали, не влияющие на понимание и управление, могут подождать.
Разработчику проще исправить проблему, если описать наблюдаемое поведение, а не просить «сделать страницу доступной». Например: «После открытия формы записи клавиша Tab не переводит фокус на поле имени; без мыши заявку не заполнить». Когда проблему исправят, пройдите весь путь ещё раз — до сообщения об успешной отправке. Доступная кнопка не поможет, если после нажатия непонятно, что произошло с заявкой.
