Доступность сайта: что исправлять первым и почему виджет этого не решит

С чего начать, когда сканер показывает сотни ошибок доступности, а подрядчик предлагает закрыть их одной строкой кода? Рассказываем, в каком порядке работаем мы: что останавливает людей и что стоит недорого, какие правила действуют в ОАЭ, ЕС и США, чего не видят сканеры, почему виджеты-оверлеи не решают задачу и какой тест за 20 минут может провести любой руководитель.

КОРОТКО

Что исправлять первым

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

Причина такого порядка видна в одном исследовании. WebAIM просканировал главные страницы миллиона самых посещаемых сайтов: автоматически выявляемые нарушения WCAG нашлись на 95,9% из них, в среднем 56,1 ошибки на страницу, а шесть типов ошибок дали 96% всего найденного. Это низкий контраст, нет альтернативного текста, нет подписей к полям, пустые ссылки, пустые кнопки и не указан язык страницы (WebAIM, данные февраля 2026 года). Большинство таких ошибок живёт в общих шаблонах и стилях, поэтому одна правка убирает одну и ту же ошибку с тысяч страниц.

В статье Сколько тестирования нужно сайту или приложению перед запуском? доступности посвящена одна глава внутри плана запуска. Здесь разобрана сама работа, для владельцев, CTO и разработчиков, которым они её передадут. Это технический обзор, а не юридическая консультация: с претензией или вопросом по договору обращайтесь к юристу на вашем рынке.

Сканер подскажет, откуда начать, но никогда не скажет, что вы закончили.

ЗАКОН

Что требуют в ОАЭ, ЕС и США

Дубай. Закон № 9 от 2022 года о цифровых услугах действует на всей территории эмирата, включая свободные зоны, и прямо называет негосударственные организации среди тех, на кого распространяется. Его статья 6 требует делать цифровые услуги доступными для всех клиентов, включая людей с инвалидностью, без дополнительной платы. Технического стандарта закон не называет, а срок привязан к этапам: организация должна выполнить требования в течение года с начала своего этапа, который устанавливает отдельное решение. Поэтому вопрос к юристу конкретный: начался ли ваш этап.

Федеральный уровень ОАЭ. Министерство иностранных дел и Министерство финансов ссылаются в своих заявлениях о доступности на Национальную политику цифровой доступности и на указания регулятора TDRA, а МИД пишет о соответствии WCAG 2.2 AA. Текст самой политики открыть не удалось, поэтому о том, насколько она касается частных компаний, мы здесь не пишем. WCAG 2.2 уровня AA, актуальная рекомендация W3C от 12 декабря 2024 года, и для нас служит рабочей меркой.

Продажи в ЕС. Европейский акт о доступности распространяется на услуги электронной торговли для потребителей, оказываемые после 28 июня 2025 года. Исключение есть для микропредприятий в сфере услуг: меньше 10 человек и не больше 2 млн евро оборота или баланса. Суды уже применяют эти правила. 4 июня 2026 года суд в Кане вынес временное решение против Carrefour: собственного аудита с результатом 71,21% соответствия не хватило, а сайт, как указал суд, не может быть доступным лишь отчасти. Среди барьеров он назвал альтернативный текст, контраст, плохо подписанные ссылки, несовместимость со вспомогательными технологиями и неверную семантику HTML. На исправление дано шесть месяцев, затем штраф 500 евро в день (Taylor Wessing, июнь 2026 года). Этот список почти совпадает со списком в нашей статье.

Продажи в США. Раздел III закона ADA запрещает дискриминацию со стороны бизнесов, открытых для публики. Министерство юстиции указывает, что предлагаемое онлайн тоже должно быть доступно, и называет барьеры: плохой контраст, картинки без текста, поля без подписей, навигация только мышью (ADA.gov, март 2022 года). Юристы Seyfarth Shaw насчитали 3 117 исков о доступности сайтов в федеральных судах за 2025 год, на 27% больше, чем годом раньше, причём дела в судах штатов сюда не входят. UsableNet, поставщик таких услуг, считает федеральные суды и суды штатов вместе и прогнозирует около 6 176 исков за 2026 год, 79% из них против электронной торговли (UsableNet, июль 2026 года). Если у вас есть покупатели в США, этот риск касается и компании в Персидском заливе, а детали стоит уточнить у юриста.

ПОРЯДОК

В каком порядке мы исправляем

Мы начинаем с путей, которые приносят деньги: от посадочной страницы до оплаченного заказа или от страницы услуги до отправленной заявки. Каждую находку на этих путях проверяем тремя вопросами. Останавливает ли она человека полностью? Сколько страниц её разделяют? Сколько работы она требует?

Полная блокировка на денежном пути идёт первой, сколько бы ни стоила: оформление заказа, куда не попасть с клавиатуры, важнее сотен ошибок контраста в блоге. За блокировками следуют недорогие повторяющиеся правки, потому что они убирают самую большую долю ошибок за наименьшие деньги. Это наша рабочая оценка, WCAG такого порядка не предписывает. Он меняется вместе с бизнесом: на сайте для заявок главная форма, в большом каталоге фильтры, в клиентском портале вход. Обычный стартовый порядок с частотой ошибок по данным WebAIM за 2026 год:

Остальное ждёт, если не лежит на денежном пути. Для записанного видео нужны субтитры (1.2.2, уровень A): если видео и есть ваш способ продавать, поднимите это выше. Текст должен работать при увеличении до 200% (1.4.4, уровень AA). Тяжёлой анимации нужен переключатель: наш собственный 3D-экран, о котором рассказывает статья 3D на живом сайте: наш эксперимент с three.js и что увидел Google, заменяется лёгкой версией, если посетитель просит уменьшить движение.

НЕДОРОГИЕ ПРАВКИ

Язык, названия, контраст, текст картинок

Язык. Один атрибут в элементе html сообщает вспомогательным технологиям, каким голосом читать. На многоязычном сайте у каждой версии свой атрибут, и в арабской версии он должен говорить об арабском, а общий шаблон с одним зашитым значением портит все остальные версии. Подробнее о таких сайтах в статье Дизайн мультиязычного сайта: что меняется, кроме перевода.

Названия. Иконка корзины, стрелка слайдера и ссылка на соцсеть часто вообще без текста, и читалка произносит «кнопка» или зачитывает адрес файла. Решает скрытый текст или aria-label. Заодно используйте настоящие элементы HTML: настоящая кнопка получает работу с клавиатуры от браузера, роли ARIA её не добавляют, а руководство W3C начинается с предупреждения, что плохой ARIA хуже, чем его отсутствие. WebAIM нашёл 59,1 ошибки на страницах с ARIA и 42 на страницах без него, хотя такие страницы ещё и сложнее, так что этот разрыв не доказывает вину ARIA.

Контраст. Обычному тексту нужно не меньше 4,5:1 к фону, крупному 3:1, кнопкам, границам полей и значимым иконкам тоже 3:1 (1.4.3 и 1.4.11). Светло-серый для мелкого шрифта обычно задан одной переменной, которая стоит в сотнях мест. Фирменный цвет, не проходящий на белом, можно оставить акцентом, а для текста взять более тёмный оттенок. Это меняет внешний вид, поэтому решение за дизайнером. Контраст люди чувствуют, даже не называя его, о чём мы писали в статье Дизайн, который не ощущаешь: почему лучший дизайн исчезает.

Текст картинок. Опишите, какую работу картинка делает на этой странице. На карточке товара напишите то, что нужно покупателю («чёрная кожаная сумка, вид спереди»), в кейсе то, что картинка доказывает. Чисто декоративным изображениям ставьте пустой alt, чтобы их пропускали. Сделайте поле обязательным в админке для каждого языка, иначе ошибка вернётся со следующей загрузкой.

Один цветовой токен может закрыть сотни ошибок контраста сразу.

ФОРМЫ И КЛАВИАТУРА

Формы, клавиатура, фокус и вход

Подписи и ошибки. Каждому полю нужна видимая подпись, связанная с ним в коде. Учебник W3C по формам прямо говорит, что плейсхолдер её не заменяет, и экранные читалки не считают его подписью. Ошибку нужно назвать текстом (3.3.1, уровень A), а не только красной рамкой, и подсказать решение, если оно известно (3.3.3, уровень AA): «Введите дату в формате 31.12.2026», а не «Неверный ввод». Поля с личными данными должны сообщать своё назначение (1.3.5, уровень AA), чтобы браузер мог их заполнить, а это помогает каждому покупателю с телефона.

Клавиатура. Всё, что можно сделать мышью, должно работать с клавиатуры, и фокус не должен застревать (2.1.1 и 2.1.2, уровень A). Здесь нужны настоящие часы фронтенда, потому что сбои сидят в собственных компонентах: меню, которое открывается только при наведении, фильтр из элементов div, выбор размера, календарь, выезжающая корзина. В опросе пользователей экранных читалок WebAIM меню, вкладки и диалоги, которые ведут себя неожиданно, заняли второе место среди проблем (1 539 ответов, декабрь 2023 и январь 2024 года). Для всплывающих окон шаблон диалога W3C умещается в одну задачу: при открытии фокус переходит внутрь, Tab остаётся внутри, Escape закрывает окно, фокус возвращается на элемент, который его открыл. По этим четырём строкам проверьте баннеры cookie, окна подписки и чаты.

Фокус и размеры. Фокус должен быть виден (2.4.7, уровень AA). Обычная причина сбоя в одной строке сброса стилей, outline: none, вместо которой ничего не поставили; стиль :focus-visible в вашем фирменном цвете решает задачу и ничего не меняет для тех, кто работает мышью. В WCAG 2.2 добавилось требование, чтобы ваш собственный контент не закрывал элемент в фокусе полностью (2.4.11, уровень AA), и W3C называет типичными виновниками закреплённые шапки и баннеры cookie; большую часть решает CSS scroll-padding. Цели для нажатия должны быть не меньше 24 на 24 CSS-пикселя или иметь достаточно места вокруг (2.5.8, уровень AA). Обычно страдают кнопки закрытия, пагинация и переключатели языка, а отступы исправляют это, не меняя дизайна.

Вход. Критерий доступной аутентификации (3.3.8, уровень AA) означает: никаких проверок памяти и головоломок без альтернативы. Объяснение W3C вполне практичное: запрет вставки в поле пароля или блокировка менеджера паролей нарушают критерий, а ссылка на почту входит в список способов его выполнить. CAPTCHA в том же опросе WebAIM стала самой большой проблемой с заметным отрывом. Данные, уже указанные в этом же процессе, не должны вводиться снова (3.3.7, уровень A), что к тому же просто хороший дизайн оформления заказа.

СКАНЕРЫ

Что сканер находит и что пропускает

W3C говорит об этом прямо: инструменты оценки помогают человеку, но не могут установить, что сайт доступен. Опубликованные цифры о том, сколько они находят, кажутся противоречивыми, пока не посмотреть, что именно считается.

Британская Government Digital Service в 2017 году сделала страницу со 143 барьерами и проверила её десятью инструментами. Все десять вместе пропустили 29%, а лучший из них нашёл 41%. Deque, которая делает axe и продаёт такие инструменты, разобрала почти 300 000 проблем из собственных аудитов и сообщает, что правила axe-core нашли 57,38% из них, причём автоматические находки дали лишь 16 из 50 критериев уровня AA в WCAG 2.1. Верно и то и другое: несколько частых видов ошибок повторяются тысячи раз, поэтому сканер ловит большую часть объёма и малую часть видов. С Lighthouse та же история. Его оценка доступности складывается как взвешенное среднее проверок «прошёл или нет», а ручные проверки в неё не входят (Chrome for Developers, ноябрь 2026 года), так что 100 баллов значат только одно: автоматические правила ничего не нашли.

Сканер всё равно нужен. Запускайте axe или Lighthouse в сборке как сигнализацию, чтобы релиз с новыми ошибками останавливался до выхода, рядом с ручными проверками в плане QA и тестирование.

ОВЕРЛЕИ

Почему виджет-оверлей не решает задачу

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

В апреле 2025 года Федеральная торговая комиссия США утвердила окончательное решение, по которому accessiBe должна заплатить 1 млн долларов. Компания заявляла, что её плагин accessWidget может сделать любой сайт соответствующим WCAG, а в жалобе эти заявления названы ложными, вводящими в заблуждение или необоснованными. Решение запрещает такие заявления без доказательств. Читать его надо точно: речь о рекламе одной компании, виджеты оно не запрещает и правовое положение сайта с виджетом не определяет.

Главная проблема в самом механизме: скрипт работает поверх страницы, а ваши шаблоны остаются прежними. Overlay Fact Sheet, который подписали специалисты по доступности, включая авторов спецификаций WCAG, ARIA и HTML, объясняет почему: соответствие означает выполнение всех требований стандарта, оверлеи не могут исправить всё и не затрагивают PDF, canvas, SVG и медиафайлы. Там же приведён опрос практиков WebAIM, где 72% респондентов с инвалидностью оценили такие инструменты как совсем или не очень эффективные.

Защитой от исков он тоже не служит. UsableNet, которая сама продаёт услуги по доступности, сообщает, что примерно у 20% компаний, получивших иск в 2026 году, стоял виджет или оверлей (июль 2026 года), а суд по делу Carrefour оценивал сайт по каждому критерию отдельно. Эти деньги лучше потратить на общие шаблоны, где они убирают ошибки насовсем.

Виджет меняет страницу после загрузки. Шаблон остаётся сломанным.

20 МИНУТ

Тест на 20 минут для руководителя

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

1. От 0 до 7 минуты: только клавиатура. Отложите мышь и работайте клавишами Tab, Shift+Tab, Enter, пробел, стрелки и Escape. Всегда ли видно, где вы находитесь? Удаётся открыть меню и выбрать фильтр? Выпускает ли вас всплывающее окно?
2. От 7 до 9 минуты: увеличение. Поставьте в браузере 200%. Не обрезается ли текст, можно ли добраться до кнопки?
3. От 9 до 16 минуты: экранная читалка. На Mac нажмите Command-F5 для VoiceOver, затем VO-U для ротора со списками заголовков и ссылок. В Windows нажмите Ctrl + Windows + Enter для Экранного диктора, затем дважды клавишу диктора + S, чтобы увидеть заголовки, ссылки и ориентиры. На iPhone откройте Настройки, Универсальный доступ, VoiceOver. Читаются ли заголовки как план? Говорят ли ссылки, куда ведут? Сообщает ли форма, что это за поле и что пошло не так?
4. От 16 до 18 минуты: сканер. Запустите Lighthouse из Chrome DevTools на странице с формой и запишите, что не прошло.
5. От 18 до 20 минуты: дерево. В DevTools откройте Elements, затем Accessibility, затем Show accessibility tree. Откройте своё всплывающее окно. На месте ли цена и главная кнопка?

Не пропускайте телефон: 91,3% опрошенных пользователей экранных читалок работают с ними и на мобильном устройстве (WebAIM, декабрь 2023 и январь 2024 года; опрос неконтролируемый, так что это ориентир).

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

ТО ЖЕ ДЕРЕВО

То же дерево читают ИИ-агенты

Браузер строит из каждой страницы дерево доступности, подмножество DOM с тем, что важно для вспомогательных технологий, и экранные читалки опираются именно на него (Chrome for Developers, ноябрь 2026 года). Теперь его читают и программы: сервер Playwright MCP от Microsoft, через который ИИ-модели управляют браузером, прямо указывает, что работает с деревом доступности, а не с пикселями.

Результат мы видели сами. Об этом статья Мы отправили ИИ-агента за покупками в 15 американских интернет-магазинов. Вот где он сдался: в октябре 2026 года в двух магазинах окно подписки оставляло в дереве доступности только iframe, и агент, читающий страницу через это дерево, не видел ни цены, ни размеров, ни кнопки, пока окно не закроется.

Продавать доступность как приём для ИИ мы бы не стали. Не каждый агент читает страницы так, и у нас нет данных, связывающих эти правки с ростом продаж через агентов. Практический вывод скромнее: кнопки с названиями, настоящие подписи и чистые заголовки служат людям и программам сразу.

ЦЕНА И ПОДДЕРЖКА

Сколько это стоит и как удержать результат

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

Эту работу у нас можно заказать тремя способами, все цены опубликованы:

• Узнать, где вы находитесь: Юзабилити аудит, от $1 500, занимает от одной до двух недель и проверяет основы WCAG 2.2 на путях, которые приносят деньги, вместе с данными о поведении и скоростью. Это обзор основ, а не аудит соответствия и не юридическая консультация, а исправления оцениваются отдельно, когда станут известны.
• Проверять каждый релиз: QA и тестирование, от $30 в час, с этими проверками в тест-плане. Платные инструменты оплачиваются отдельно, а исправление найденного это работа разработчиков.
• Удерживать результат: Поддержка и обслуживание сайтов, от $1 000 в месяц, где небольшие правки входят в часы тарифа.

Цена зависит не столько от числа ошибок, сколько от числа шаблонов, которые их порождают. Сайт с одним чистым шаблоном убирает тысячи ошибок несколькими правками, а сайту из многолетних слоёв тем может понадобиться сначала разобраться с тем, о чём статья Скрытый технический долг, из-за которого редизайн сайта стоит дороже плана. Когда продукт строим мы, всё это не отдельная покупка: контраст заложен в дизайне, названия и подписи в компонентах, проверки с клавиатуры в QA, всё выстроено вокруг того, как до вас на самом деле доходят клиенты, а код и тестовые материалы передаются вам по договору.

FAQ

Источники

• Dubai Legal Portal: Law No. 9 of 2022
• WebAIM: The WebAIM Million 2026
• W3C: WCAG 2.2
• Taylor Wessing: The EAA and BFSG, recap and update
• FTC: Final order against accessiBe