Ваша компания подает заявку на участие в крупном тендере от западной корпорации или российской госструктуры на поставку оборудования. Вы отправляете ссылку на свой новенький B2B-портал, который обошелся вам в 3 миллиона рублей. Портал сверкает анимациями, сложными 3D-моделями и модным темным дизайном с серым текстом.

Через неделю приходит отказ. Причина: ваш портал не прошел аудит комплаенс-отдела по стандарту WCAG 2.1 (Web Content Accessibility Guidelines). Оказывается, закупщик корпорации страдает дальтонизмом и физически не видит кнопку оформления заказа, потому что дизайнер решил сделать ее "стильной", пожертвовав контрастностью.

Что такое Accessibility (a11y) и почему это не только про инвалидов?

Доступность (Accessibility или a11y) в веб-разработке - это набор правил, которые гарантируют, что сайтом могут пользоваться люди с любыми ограничениями: нарушениями зрения, слуха, моторики или когнитивных функций.

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

Снабженец, оформляющий заказ с телефона на ярком солнце, находится в ситуации временного ограничения зрения. Бухгалтер со сломанной правой рукой, который вынужден неделю работать левой рукой или перемещаться по интерфейсу только с помощью клавиатуры (Tab), находится в ситуации временного нарушения моторики. Если ваш B2B-портал не готов к таким сценариям, вы теряете деньги.

Разбор полетов: Как плохой дизайн нарушает стандарты WCAG

Элемент интерфейса Нарушение WCAG (Плохо) Инклюзивный подход (Правильно)
Контрастность текста Серый текст #888888 на белом фоне #FFFFFF. Коэффициент контрастности 3.5:1. Нечитаемо на старых офисных мониторах или на солнце. Темно-серый текст #333333 на белом фоне. Коэффициент контрастности > 4.5:1 (Уровень AA стандарта WCAG).
Навигация с клавиатуры Дизайнер убрал синюю обводку вокруг ссылок и кнопок при получении фокуса (outline: none), потому что "это некрасиво". Каждый интерактивный элемент имеет четкий, видимый focus-ring. Пользователь, перемещающийся кнопкой Tab, всегда понимает, где он находится.
Ошибки в формах Красная рамка вокруг поля - единственный индикатор ошибки. Дальтоник этого не увидит. Помимо цвета, используется иконка (крестик) и текстовое сообщение: "Пожалуйста, введите корректный ИНН".
Кликабельная область кнопок Текстовая ссылка мелким шрифтом, высота строки 14px. Трудно попасть пальцем с мобильного. Минимальная кликабельная зона (Touch Target) - 44x44 пикселя, даже если визуальная кнопка меньше.

Как внедрить a11y в корпоративный портал?

Сделать сайт инклюзивным постфактум - это боль и переписывание 30% кода. Доступность нужно закладывать на этапе написания Технического Задания. Вот базовый чек-лист для проверки подрядчика:

  1. Семантическая верстка. Сайт должен быть написан не из одних тегов <div>. Использование правильных тегов (<header>, <nav>, <main>, <button>) позволяет программам экранного доступа (Screen Readers) правильно читать сайт для слепых пользователей.
  2. Alt-тексты для изображений. Все продуктовые фотографии, схемы и графики должны содержать атрибут alt с детальным описанием того, что изображено. Это, к слову, дает мощный бонус к SEO.
  3. Проверка через Lighthouse. В браузере Chrome есть встроенный инструмент Lighthouse. Ваш портал должен набирать минимум 90 баллов в категории Accessibility.
  4. Никаких мигалок без паузы. Анимации, слайдеры (карусели) и видео должны иметь очевидную кнопку паузы. Постоянное мельтешение может вызвать приступ у людей с вестибулярными нарушениями.

Коммерческая выгода доступности

Внедрение инклюзивного дизайна - это инвестиция. По статистике W3C (World Wide Web Consortium), сайты, соответствующие стандартам WCAG, получают в среднем на 15-20% больше органического трафика. Почему? Потому что Google и Яндекс "видят" сайты так же, как люди с нарушениями зрения - они читают код. Семантически чистый и доступный код ранжируется выше конкурентов с "грязной" и недоступной версткой.

Кроме того, в Европе и США соответствие WCAG 2.1 уровня AA является законодательным требованием (например, ADA compliance в США). Если вы планируете выводить свой B2B-продукт на международный рынок, без доступности вас просто не пустят ни в один корпоративный тендер.

Навигация с клавиатуры в сложных B2B-таблицах

Одно из самых строгих требований WCAG - обеспечение полной работоспособности интерфейса без использования мыши (Keyboard Navigation). Для простых лендингов это решается стандартными тегами, но в B2B-системах, где таблицы содержат по 50 колонок и сотни строк, это становится вызовом.

Если менеджер по закупкам не может с помощью клавиш Tab и стрелок перемещаться по ячейкам таблицы спецификации, редактировать количество товара и подтверждать заказ клавишей Enter - система не инклюзивна. Это снижает скорость работы операторов (многие профи работают только с клавиатуры) и делает продукт недоступным для людей с моторными нарушениями. Внедрение правильного фокуса (tabindex) и горячих клавиш в датагриды (DataGrids) - обязательный стандарт современной разработки.

Разработка по международным стандартам

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

Заказать аудит и разработку