Доступность сайта (WCAG и a11y): зачем бизнесу в Беларуси контраст, клавиатура и alt — и как не потерять заявки

«Доступность» (accessibility, a11y) — не про узкую аудиторию и не про отдельную версию «для людей с ограничениями». Это про то, чтобы сайт нормально читался на солнце, с клавиатуры, в старом браузере, с увеличенным шрифтом и программой чтения с экрана. В Беларуси редко спрашивают WCAG на старте, но те же правила влияют на конверсию: нечитаемая кнопка, форма без подписи и галерея без alt — это потерянные заявки и минус к SEO. Разбираем базовый уровень WCAG 2.1 AA без юридического пафоса и без привязки к конкретной CMS.

Что такое WCAG и зачем это бизнесу, а не только разработчикам

Web Content Accessibility Guidelines — набор критериев: контраст, размер кликабельных зон, порядок заголовков, подписи полей, альтернативный текст у картинок. Уровни A, AA, AAA — на практике для коммерческого сайта заказчик и студия договариваются об AA для ключевых сценариев: главная, услуги, корзина, форма заявки, контакты. Это не «галочка для тендера»: Google учитывает удобство страницы, a11y пересекается со скоростью и мобильной вёрсткой, а в рекламе нечитаемый лендинг просто дороже по CPA.

Чек-лист доступности для типового сайта компании

1. Один h1 на странице, заголовки h2–h3 по порядку — не «для SEO», а для навигации screen reader.
2. Контраст текста и фона не ниже 4.5:1 для основного текста; кнопки и ссылки различимы не только цветом.
3. Все поля формы с видимым label, не placeholder вместо подписи.
4. Фокус с Tab виден: обводка или смена фона у ссылок и кнопок.
5. Картинки с осмысленным alt; декоративные — alt="".
6. Видео — субтитры или текстовое описание рядом.
7. Модалки и меню закрываются Esc, ловушка фокуса внутри окна.
8. Размер кликабельных зон на мобиле — минимум около 44×44 px для пальца.

Контраст и типографика — самое частое «узкое место»

Серый текст #999 на белом фоне, золотые кнопки с бледной надписью, полупрозрачный текст поверх фото — типичные «красивости», которые не проходят проверку контраста. Дизайнер может оставить акцент, но body-текст и CTA должны читаться в ярком свете и на дешёвом экране. Проверка — бесплатными инструментами (Contrast Checker, встроенный Lighthouse в Chrome). Исправление часто дешевле, чем перерисовка всего макета.

Клавиатура и формы: где теряются заявки

Часть пользователей не пользуется мышью — трекпад, травма, просто привычка. Если «Отправить» недостижима Tab-ом или ошибка формы не озвучивается программой чтения, человек уходит. Для лендинга с одной формой это критично: проверьте цепочку Tab от первого поля до кнопки, Enter в поле не должен случайно сабмитить полупустую форму без предупреждения. Сообщения об ошибках — текстом под полем, не только красной рамкой.

Доступность и SEO — где пересекаются

Поисковики не «ранжируют WCAG», но многие сигналы совпадают: alt у изображений, структура заголовков, скорость, mobile-friendly, понятные title. Страница, которую плохо парсит screen reader, часто хуже понимается и роботом. Семантические теги main, nav, article — не мода, а порядок. Для интернет-магазина доступные фильтры и корзина снижают отказы; для услуг — читаемая форма на первом экране.

Нужно ли «сертификат WCAG» для сайта в РБ?

Для большинства МСБ — нет. Достаточно заложить a11y в дизайн и вёрстку при разработке и прогнать аудит Lighthouse + ручной проход клавиатурой перед запуском рекламы. Для госсектора, банков, крупных тендеров требования могут быть жёстче — там нужен отдельный ТЗ и поэтапный отчёт. Универсальный совет: фиксируйте в договоре «базовый WCAG 2.1 AA на ключевых шаблонах», а не абстрактное «сделать доступным».

Как закладываем a11y при разработке под ключ

1. Макет: контраст и размеры кнопок согласуем до вёрстки.
2. Вёрстка: семантика, focus, aria только где нужно — без «aria на всё».
3. Контент: alt от заказчика или по шаблону «услуга + город».
4. Приёмка: Lighthouse Accessibility + ручной Tab-тест.
5. Регресс: новые блоки не ломают фокус и контраст.

Доступный сайт — это не отдельный проект «на потом», а нормальное качество вёрстки. Его читают все — просто часть людей использует для этого не только глаза.