Контрольный список Google для агентов — это обновленный аудит доступности

Контрольный список Google для агентов — это обновленный аудит доступности

Запустите один аудит, восстановите два класса посетителей. Google только что предоставил контрольному списку доступности вторую аудиторию с учетом бюджета и веса поставщика.

<п>Семь правил Google по созданию удобных для агентов веб-сайтов — это книга по обеспечению доступности, переработанная для агентов ИИ. Тот же аудит, два класса посетителей. Практикующие, которые уже проделали работу для слепых и слабовидящих пользователей, прошли большую часть пути к успеху.

Я заметил эту страницу, потому что Мэтт Г. Саузерн написал о ней в Search Engine Journal 1 мая 2026 года. Сама статья на web.dev (web.dev/articles/ai-agent-site-ux, авторы Каспер Куликовски и Омкар Мор) последний раз обновлялась 1 апреля, почти месяц назад. Ваша версия TLDR такова: Google предоставил своего рода контрольный список, и его стоит запустить.

Я проверил nohacks.co на соответствие всем семи правилам. Шесть прошли. По одному сбою на каждой встроенной кнопке <button> на веб-сайте, и причиной является стандартная версия Tailwind v4, которая поставляется без предупреждения. Операторы, обновившиеся с версии 3 до версии 4, потеряли это правило для всего набора кнопок, если только они не добавили три строки обратно к своим базовым стилям.

Интересно, какое это правило и почему.

<п>И, конечно, я это исправил.

Семь правил взаимодействия с агентами, опубликованных Google на сайте Web.dev

Полный список находится по адресу web.dev/articles/ai-agent-site-ux, представленный Google строкой “Чтобы помочь агентам перемещаться по вашему веб-сайту, рассмотрите следующее: ”

<ол>

  • Отражать каждое действие в интерфейсе. Щелчок кнопки должен вызывать видимое изменение состояния. Действие, которое срабатывает молча, невидимо для агента.
  • Сохраняйте стабильность макета. “Добавить в корзину” должны располагаться на одном и том же месте во всех категориях продуктов. Агенты, делающие снимки экрана, запутываются в элементах, перемещающихся между страницами.
  • <ли>Нет призрачных или прозрачных наложений. Все, что закрывает интерактивный элемент, отбрасывается при визуальном анализе, даже если обложка полностью прозрачна.

  • Использовать семантический HTML. <button> и <a> переработанный стиль <div> и <span>. Если вам необходимо использовать несемантический элемент, присвойте ему роль и tabindex.
  • Установить курсор: указатель в CSS. Google называет это «сильным сигналом к действию».”
  • Link <label> для <input> с атрибутом for. Позволяет агенту сопоставить видимый текст метки с базовым полем.
  • Создавайте интерактивные элементы размером более 8 квадратных пикселей. Визуальный анализ отфильтровывает все меньшее.
  • Две вещи, о которых не сказал Google. Во-первых, дословная формулировка: “рассмотрите следующее.” Уровень предложения, а не мандата. Во-вторых, ничто в статье web.dev не связывает эти рекомендации с ранжированием, появлением на поверхности или какими-либо конкретными последствиями для ИИ-продукта. Стоит назвать пробел. Google сказал рассмотрю ; Я настаиваю на этом сильнее, потому что источником является доминирующий поставщик поисковых систем, а список совпадает с двадцатилетней практикой обеспечения доступности. Так что рецепт ниже — мой, а не их.

    <п>Ближе всего к изюмине статьи относится предпоследнее предложение: “Все, что мы предлагаем, чтобы сделать сайт ‘готовым для агента’ также делает сайты более удобными для людей». Это не пустая трата времени. Каждый пункт в списке уже был рекомендацией WCAG, когда его документировали защитники доступности веб-сайтов десять лет назад.

    Мне также очень нравится, как это сочетается с фразой “машина прежде всего, человек всегда” в машинно-ориентированной архитектуре.

    <х2>Шесть из семи правил Google, дружественных к агентам, перешли на Nohacks.co (1, 2, 3, 4, 6, 7)

    Я провел аудит, проверив живой HTML-код на главной странице и на типичной странице статьи, в руководстве по ландшафту агентного браузера. Метод был непривлекательным: свернуть страницу, grep для <button>, <a>, <label for=, pointer-events-none, затем извлечь скомпилированный CSS и grep для курсора.

    <ул>

  • Правило 1 (чистое состояние): Каждый интерактивный элемент использует класс перехода-все. Состояния при наведении масштабируют основной призыв к действию. Входы получают кольцо фокусировки. Изменения состояния видны. Пас.
  • Правило 2 (стабильный макет): Никаких источников смещения макета в HTML. Заголовок, навигация и нижний колонтитул одинаковы для главной страницы и статьи. Нет перекомпоновки контента при наведении. Пас.
  • <сильный>Правило 3 (без наложений-призраков):Единственный элемент pointer-events-none — это сама кнопка возврата к началу, когда она скрыта. Кнопка неинтерактивна И невидима в этот момент, поэтому она ничего не закрывает. Пас.
  • Правило 4 (семантический HTML): Восемь <button> элементы на главной странице с правильными атрибутами aria-label, а также 45 <a> элементы. Нулевой <div role=”button”>. Нулевой <диапазон по клику>. Пас.
  • Правило 6 (метка для): При подписке на рассылку используется <label for=”newsletter-email” class=”sr-only”>. Текст метки доступен для чтения с экрана и связан с входными данными атрибутом for. Пас.
  • <сильный>Правило 7 (порог размера):Кнопки отображаются с разрешением 40 на 40 пикселей (h-10 w-10 в Tailwind). Входные данные: px-5 py-3. Все значительно выше 8 квадратных пикселей. Пас.

    Остаётся правило 5.

    Правило 5 (Курсор: Указатель) не работает на каждой встроенной кнопке при попутном ветре V4

    Встроенная <button> элементы на nohacks.co визуализируются с помощью курсора: по умолчанию, а не курсора: указателя. Сбой касается кнопки открытия мобильного меню, отправки подписки на информационный бюллетень, шести кнопок воспроизведения эпизода подкаста на главной странице и плавающей кнопки возврата наверх. На странице статьи добавлены еще два материала для подписки на информационный бюллетень (один над статьей, другой ниже). Двенадцать уникальных встроенных кнопок <button> элементы на двух страницах. Ни один из них не получает сигнал курсора.

    <a> элементы в порядке. Якоря с href получают курсор: указатель из браузера по умолчанию, и это не изменилось. Ошибка зависит от кнопки.

    Причина — изменение Tailwind v4. Из официального руководства по обновлению Tailwind CSS v4:

    “Кнопки теперь используют курсор: default вместо курсора: указатель, соответствующий поведению браузера по умолчанию.”

    <п>В комплект Tailwind v3 включен курсор: указатель на <button> как часть базовых стилей Preflight. Tailwind v4 удалил его. Операторы, выполняющие обновление с версии 3 до версии 4, не замечают этого, поскольку навигация с помощью клавиатуры по-прежнему работает, программа чтения с экрана по-прежнему объявляет кнопку, щелчок по-прежнему срабатывает. Дерево доступности не затрагивается. Что нарушается, так это визуальный сигнал о том, что на что-то можно кликнуть, и этот сигнал является правилом 5 в списке Google, потому что именно его использует сторона модели видения агента, чтобы решить, с чем взаимодействовать.

    Исправление — это фрагмент Tailwind, включенный в то же руководство по обновлению:

    @layer base { button:not(:disabled), [role=”button”]:not(:disabled) { курсор: указатель; } } <п>Три линии. Восстанавливает правило 5 для каждой встроенной кнопки на веб-сайте. Предложение :not(:disabled) сохраняет существующий шаблон отключен:курсор-не разрешен, который пользователи Tailwind уже имеют на своих кнопках в отключенном состоянии. Поместите его в глобальную таблицу стилей, и правило 5 будет применено к каждой кнопке одновременно.

    Каждое правило в списке Google соответствует существующей рекомендации WCAG

    Сообщество доступности пишет один и тот же список уже два десятилетия. Пять из семи правил Google напрямую соответствуют критерию WCAG:

    <ул>

  • Правило 2 (стабильный макет) перекрывается с WCAG 2.4.3 (Порядок фокусировки) и WCAG 3.2 (Предсказуемый).
  • Правило 4 (семантический HTML поверх стиля <div>) является основой авторских практик WAI-ARIA и WCAG 4.1.2 (Имя, Роль, Значение).
  • <сильный>Правило 5 (видимый сигнал курсора)соответствует WCAG 1.3.3 (сенсорные характеристики).
  • Правило 6 (метка для ввода) — это WCAG 1.3.1 (Информация и связи).
  • Правило 7 (минимальный интерактивный размер) — это WCAG 2.5.5 (целевой размер). Удобочитаемая версия имеет размер 24 на 24 CSS-пикселя; Порог Google ниже, потому что модели машинного зрения могут обнаруживать более мелкие элементы, чем люди могут с легкостью коснуться их.
  • <п>Картина последовательная. Создавайте для вспомогательных технологий, создайте для агентов искусственного интеллекта. Аудит имеет ту же форму и проводится одновременно для двух классов посетителей. Словарный запас другой. Артефакт идентичен.

    Выполнить один аудит доступности, восстановить оба класса посетителей

    Прекратить проводить аудиты доступности и аудиты читаемости ИИ-агентов как отдельные дисциплины в отдельных ежеквартальных циклах. Это один и тот же аудит. Веб-профессионалы, которые уже вложили средства в соответствие WCAG, находятся на пути к тому, чтобы пройти семерку Google. Операторы, которые никогда не занимались обеспечением доступности, теперь имеют работу по обеспечению читаемости агентов в том же контрольном списке, за которым стоит вес поставщика.

    <стр>Конкретный ход на этой неделе: <ол>

  • Выберите пять страниц с самым высоким трафиком на вашем сайте.
  • <ли>Пропустите их через семь правил Google и сканирование WCAG-AA (Lighthouse, axe DevTools, расширение WAVE; в зависимости от того, что вы уже используете). Обратите внимание на совпадение.

    <ли>Исправить один раз. Восстановить оба класса посетителей.

    Если вы используете Tailwind v4, сначала добавьте трехстрочный базовый фрагмент @layer в свою глобальную таблицу стилей. Это единственное изменение восстанавливает правило 5 для всей вашей <button> население. Это самое большое исправление в списке, потому что Tailwind v4 теперь поставляется повсюду, инструменты специальных возможностей не помечают его (щелчок по-прежнему работает), и никто не говорит об этой регрессии.

    <х2>Поисковый интерес в разделе “Веб-доступность” Едва сдвинулся с места, когда вступило в силу EAA, а затем увеличился в четыре раза

    Google's Agent-Friendly Checklist Is The Accessibility Audit Restated

    Интересность поисковых запросов по всему миру “доступность в Интернете” последние пять лет. Источник: Google Trends, снято 2 мая 2026 г. (Изображение предоставлено: Слободан Маник) <п>Поисковый интерес оставался неизменным в течение четырех лет. До 2024 года. На протяжении большей части 2025 года. До вступления в силу Европейского закона о доступности 28 июня 2025 года, что является нормативным событием, которое должно было сдвинуть эту кривую больше, чем что-либо другое, но едва сдвинуло эту кривую. Более значительный подъем начнется в конце 2025 года, ускорится к началу 2026 года и достигнет своего пика, а затем стабилизируется. Интерес к этому термину во всем мире вырос более чем в четыре раза за 18 месяцев.

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

    Конвергенции уже десять лет; Вес поставщиков Google — вот что нового

    Последнее десятилетие работа по обеспечению доступности проводилась сообществом, которое по большей части не имело достаточно веса, чтобы сделать ее доминирующей дисциплиной аудита. Работа была правильной. Публика не пришла. Затем появились агенты ИИ с бюджетом, поддержкой и структурой стимулирования со стороны поставщиков, указывающими в том же направлении. Когда Google публикует тот же контрольный список, что и руководство по удобочитаемости для агентов, дисциплина перестает быть двумя аудитами, проводимыми двумя отдельными сообществами. Это становится одной из дисциплин входной стороны, которую используют веб-профессионалы, поскольку класс посетителей охватывает оба типа.

    Шесть из семи на аудите — проходной балл. Седьмое — это правило CSS, которое Tailwind установил, и теперь оно ваше.

    Trust … никто? По крайней мере, не вслепую.

    Этот пост был первоначально опубликован на No Hacks.

    Back To Top