Доступность сайта (WCAG): что реально нужно исправить на B2B-сайте

Сначала вывод: Для B2B-сайта не нужно переделывать всё сразу: по WCAG 2.2 AA сначала закройте пять задач P0 — label и сообщения об ошибках в формах, контраст цветов 4.5:1, управление с клавиатуры, alt у изображений, указание языка. Правки на уровне шаблона занимают примерно 8–20 часов. Учтите: автоматические сканеры находят лишь около 30–40% проблем, поэтому при приёмке обязательны проверка с клавиатуры и выборочное тестирование скринридером.

1. Кто вас действительно проверяет: законодательство и границы применимости

Сначала разграничим:Комплаенс данных— про то, как обрабатываются cookie и персональные данные,Аудит скорости— про производительность загрузки. В этой статье речь только об одном: могут ли все люди, включая тех, кто пользуется вспомогательными технологиями, нормально читать контент сайта и работать с ним.

B2B-компании обычно думают о доступности не потому, что «есть клиенты с нарушениями зрения», а по трём более практичным причинам: законодательство, закупки и удобство. Кто вас действительно проверяет — в одной таблице.

Источник требования	На кого распространяется	Конкретные требования	Сроки
Европейский акт о доступности (EAA, 2019/882)	Электронная коммерция и связанные услуги в ЕС	Ссылается на EN 301 549, техническая основа которого — WCAG 2.1 AA	С 28 июня 2025 года новые услуги должны соответствовать требованиям
Директива ЕС о государственных закупках (2014/24/EU)	Поставщики, участвующие в госпроектах ЕС	В техзадании указан EN 301 549, доступность учитывается при оценке заявок	Действует много лет
Федеральные закупки США (Section 508)	Производители, поставляющие федеральным ведомствам США	Требуется отчёт о соответствии VPAT/ACR	Постоянное требование
Анкета поставщика у крупных компаний	Реестр одобренных поставщиков у ведущих покупателей отрасли	В анкете обычно есть пункт «соответствие WCAG 2.1 AA»	Возникает с каждым закупочным циклом

Версии тоже зафиксированы: WCAG 2.2 вышла в октябре 2023 года и добавила к 2.1 девять критериев успеха, включая внешний вид фокуса и размер цели, а EN 301 549 по-прежнему ссылается на 2.1 AA. В закупках и договорах правомерны обе формулировки — «WCAG 2.1 AA» и «2.2 AA»: более 90% правок у них совпадают. Решить, нужно ли это вам, просто: смотрите на профиль клиентов. Если вы работаете на рынке ЕС, участвуете в госзакупках или поставляете крупной компании как поставщик первого уровня — доступность придётся сдавать. Если ничего из этого нет, приоритет можно понизить, но минимальный набор всё равно нужен — см. раздел 7.

2. Четыре принципа: как выглядят проблемы

WCAG объединяет все требования в четыре принципа. В применении к B2B-сайту типичные проблемы сильно концентрируются.

Принцип	Значение	Как это чаще всего проявляется на B2B-сайте
Воспринимаемость	Информацию можно увидеть или услышать	У изображений товаров нет alt, у светло-серого текста недостаточный контраст, у видео нет субтитров
Управляемость	Все функции доступны с клавиатуры	Выпадающее меню открывается только при наведении, всплывающее окно не закрыть, фокус не виден
Понятность	Содержание и действия предсказуемы	У форм нет label, ошибка сообщает только «отправка не удалась», язык страницы не указан
Надёжность	Корректно разбирается вспомогательными технологиями	div выдаёт себя за кнопку, уровни заголовков прыгают с h2 сразу на h5

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

Три. Пять обязательных пунктов P0: всё чинится на уровне шаблона

У адаптации B2B-сайта под доступность первый приоритет — всего пять пунктов, и все они P0.

Статья	Критерий оценки	Частая ошибка
Label форм и сообщения об ошибках	У каждого поля ввода есть видимый label; сообщение об ошибке — текст и связано с полем; ошибка обозначается не только цветом	placeholder выдаёт себя за label; ошибка показывается один раз во всплывающем окне
Контраст цветов	Контраст основного текста ≥4.5:1; крупного текста и элементов интерфейса ≥3:1	Светло-серый #999 на белом фоне — на практике около 2.8:1
Управление с клавиатуры	Все функции доступны по Tab, порядок разумный, фокус виден, клавиатурных ловушек нет	Меню по наведению не открывается с клавиатуры; после открытия всплывающего окна фокус остаётся на странице позади
Alt изображения	Информативным изображениям — текстовая замена; чисто декоративным — пустой alt	У изображений по всему сайту нет alt; или он записан как имя файла вроде img_0342.jpg
Объявление языка	Атрибут lang у html правильно задан для каждого языка	Сайт со смешанным китайско-английским текстом объявлен как en по всему сайту

Конкретные пороги контраста вынесены отдельно, чтобы сверяться с ними прямо при правке макета.

Тип контента	Нижняя граница AA	Частые случаи несоответствия
Основной текст (меньше 24px)	4.5:1	Белый текст на сером фоне, полупрозрачный текст-водяной знак
Крупный заголовок (≥24px или ≥18.5px полужирный)	3:1	Светлый фирменный текст на светлом фоне
Рамки кнопок и иконки	3:1	Кнопки со светлой обводкой
Элементы в неактивном состоянии	Жёстких требований нет	Можно оставить светлыми, но не использовать для ключевых действий

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

Четыре. P1 и P2: желательные правки и приятные мелочи

Помимо P0 есть ещё два уровня, чтобы избежать крайностей «либо делаем всё, либо не делаем ничего».

Уровень	Статья	Критерий оценки	Когда стоит делать
P1	Стиль фокуса	Рамка фокуса видна и её контраст ≥3:1, глобальный outline:none запрещён	Сделать заодно при правке темы
P1	Ссылка для перехода	Первый Tab на странице — «Перейти к основному содержанию»	Длинные страницы и сайты с многоуровневой навигацией
P1	Иерархия заголовков	h1 только один, без пропуска уровней	Это то же самое, что семантическая разметка для SEO
P1	Текст ссылок	Понятно, куда ведёт, даже вне контекста	Не допускайте, чтобы «нажмите здесь» встречалось повсюду
P2	Размер цели	Кликабельная область ≥24×24 пикселя (новое в WCAG 2.2)	При адаптации под мобильные
P2	Снижение анимации	Учитывайте системную настройку prefers-reduced-motion	Сайты с каруселями и анимацией
P2	Детали ARIA	Для аккордеонов, вкладок и других компонентов добавьте метки состояния	Решайте это вместе со сменой библиотеки компонентов

P1 по всему сайту занимает примерно 10–15 часов; в большинстве проектов это идёт вместе с редизайном темы, а не отдельным проектом. Критерий для P2 проще: не начинайте ради него отдельную работу, если только не подвернулось окно для доработки соответствующего компонента — главная ошибка в доступности — принять детали P2 за основной объём работ, отдача совершенно несоразмерна.

Пять. Три распространённых заблуждения

Заблуждение	Почему это неверно	Правильный подход
Добавили ARIA — значит, доступно	ARIA — это компенсация недостатков нативной семантики, а не замена; неправильная ARIA хуже, чем её отсутствие	Сначала используйте нативные элементы button, label, nav и другие
Делать кнопку из div с обработчиком клика	С клавиатуры не сработает, скринридер не распознает её как кнопку	Замените на элемент button, стили оставьте прежними
Автоматические инструменты дали максимум баллов — и достаточно	Инструменты покрывают лишь около 30–40% проблем	Добавьте проверку с клавиатуры и выборочную проверку скринридером, прежде чем делать выводы

Общее у всех трёх заблуждений — желание срезать путь. В самой спецификации ARIA написано: «Правило первое: не используйте ARIA» — если можно решить нативными элементами, не навешивайте атрибуты. Кнопки из div очень часто встречаются в B2B-шаблонах, особенно там, где кликабельна вся карточка; правильный подход — разместить внутри настоящую кнопку. Что до максимального балла инструментов, он говорит лишь об отсутствии грубых ошибок: уместен ли alt, соответствует ли порядок Tab логике чтения, понятен ли человеку текст ошибки — такие суждения машина сделать не может, нужно пройти всё вручную.

Шесть. Как проводить приёмку: автоматическое сканирование, проверка с клавиатуры, выборочная проверка скринридером

Приёмка состоит из трёх уровней; без любого из них выводы ненадёжны.

Уровень	Инструменты и методы	Доля выявляемых проблем	Ориентир по времени
Автоматическое сканирование	Прогоняйте axe, WAVE, Lighthouse по каждой странице	Около 30–40%	По всему сайту — до 1 часа
Проверка с клавиатуры	Уберите мышь и пройдите весь путь заявки с помощью Tab, Enter, Esc	Основной способ найти проблемы взаимодействия	5–8 страниц — около 1–2 часов
Выборочная проверка скринридером	Пройдите часть формы с NVDA (Windows) или VoiceOver (macOS)	Проблемы семантики и подсказок	Около 1 часа

Какие страницы проверять — есть свои правила: главная, одна карточка товара, страница заявки или контактной формы, одна контентная страница — эти четыре типа охватывают более 80% сценариев взаимодействия на B2B-сайте. За пределами этого набора достаточно сплошного сканирования, вычитывать каждую страницу вручную не нужно. Протоколы проверки нужно сохранять: когда в анкете поставщика запросят VPAT, достаточно переписать записи в заявление о соответствии и сразу отправить. Если у команды нет рук на доработку темы и шаблонов, можно связаться с нами оценивать по текущему состоянию сайта.

Семь: стоимость и трудозатраты, пересечение с SEO, когда не делать

Сначала дайте порядок трудозатрат, потом — оценку.

Работа	Порядок трудозатрат	Пояснение
Правка P0 на уровне шаблона	8–20 часов	Зависит от числа шаблонов и степени кастомизации
Правка P0 постранично	Примерно вдвое больше, чем на уровне шаблона	Возникает, когда много кастомных лендингов
P1 по всему сайту	10–15 часов	Чаще всего объединяют с редизайном темы
Три уровня приёмки	3–5 часов	Включая оформление записей и написание заявления о соответствии

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

Пункт доработки по доступности	Прямое влияние на SEO
Семантическая иерархия заголовков	Это то же самое, что оптимизация структуры сайта
Alt изображения	Поиск по картинкам и доступность используют одно и то же
Читаемый текст ссылок	Качество анкорного текста само по себе сигнал ранжирования
Объявление языка страницы	Помогает определять языковые регионы
Целевые размеры для мобильных	Совпадает с мобильной удобностью

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

FAQ: частые вопросы

Нужна ли B2B-сайту доступность на самом деле?

Смотрите на три условия: если выполняется любое из них, делать рекомендуется. Есть клиенты на рынке ЕС (EAA применяется с июня 2025 года), участвовали или планируете участвовать в зарубежных госзакупках, вас спрашивали про WCAG в анкете поставщика крупной компании. Если ни одно не выполняется и сайт чисто внутренний, приоритет ниже, но минимальный набор из трёх пунктов — формы, контраст, alt — всё равно рекомендуется сделать: это меньше половины дня, и эти пункты пересекаются с SEO-доработками, то есть делаются попутно.

Нужно ли соответствовать всем требованиям WCAG 2.2 AA, чтобы этим пользоваться?

Не нужно прорабатывать все 50 с лишним критериев успеха по одному. Для B2B-сайтов практический подход — по уровням: пять пунктов P0 обязательны, P1 — по возможности, P2 — в зависимости от окна доработок. Для закупочных сценариев достаточно написать «соответствует WCAG 2.1 AA», чтобы выполнить требования ссылки EN 301 549; для 2.2 AA нужно дополнительно покрыть новые критерии, например целевые размеры. Сначала сдайте P0, потом по конкретной формулировке в анкете клиента решайте, повышать ли планку.

Если автоматический сканер показывает максимум, это уже соответствие?

Нет. Инструменты вроде axe, WAVE и Lighthouse по открытым методикам выявляют лишь около 30–40% проблем: такие суждения, как «уместен ли alt» или «логичен ли порядок Tab», «читаемы ли сообщения об ошибках», они сделать не могут. Максимальный балл говорит лишь об отсутствии грубых ошибок. Вывод о соответствии делается по трёхуровневой приёмке: автосканирование плюс обход с клавиатуры плюс выборочная проверка скринридером. Без любого из этих уровней результат ненадёжен, и до публичного заявления нужно пройти все три.

Сколько времени занимает адаптация доступности?

Пять пунктов P0 на уровне шаблона закрываются примерно за 8–20 часов; главные переменные — число шаблонов и степень кастомизации страниц. На сайтах с множеством кастомных лендингов правят постранично, и трудозатраты примерно вдвое выше; P1 по всему сайту — 10–15 часов, обычно их включают в переработку темы. Это без приёмки: на неё отдельно уходит 3–5 часов. Советую сначала прогнать автосканирование и получить список проблем, а потом оценивать часы — это куда точнее, чем называть цифры по опыту.

Замедлит ли доступность сайт или повлияет на позиции?

Не замедлит. Большинство правок работают в одну сторону с производительностью и SEO: семантические теги, alt, иерархия заголовков и так относятся к ранжированию, а указание языка помогает определять многоязычные регионы. Отдельные конфликтные точки стоит учесть: стиль фокуса не делайте через большую тень, чтобы не вызвать сдвиг вёрстки, а ссылку-пропуск скрывайте визуально, а не через display:none, иначе её не увидит и скринридер. После правок достаточно прогнать тест скорости и мобильной версии, чтобы убедиться в отсутствии регрессий.

На что особенно обратить внимание в доступности многоязычного сайта?

На три вещи. Первое: lang в html нужно объявлять отдельно для каждой языковой версии — самая частая ошибка сайтов со смешанным китайским и английским — прописать en для всего сайта. Второе: текст ошибок формы обязательно переводить вместе с языком; перевести только подписи полей, но не ошибки — значит ничего не изменить. Третье: в RTL-языках, например арабском, нужно проверить, остаётся ли порядок фокуса логичным после зеркального отражения вёрстки. У самого запуска многоязычной версии есть отдельный контроль качества, и проверку доступности лучше включить в ту же приёмку, а не гонять отдельным кругом.

В заключение

Доступность — не благотворительное украшение, а документ о соответствии в цепочке закупки плюс страховка удобства. Для B2B-сайта правильный подход — действовать по уровням: пять пунктов P0 закрыть на уровне шаблона, трёхуровневую приёмку сохранить в документах, P1 включить в переработку, P2 не выделять в отдельный проект. Большинство сайтов за две недели получают заявление о соответствии, которое можно вписать в опросник поставщика, — эти вложения стоят той минуты, когда оно всплывает на этапе закупки.

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