10 ошибок ИИ в веб-разработке

Philip Walton

Дата публикации: 11 ноября 2026 г.

На этой неделе мы выпустили версию 1.0 Modern Web Guidance – набор навыков, которые позволяют агентам программирования использовать знания о веб-платформе, рекомендации и данные о совместимости с браузерами. Наша цель – помочь разработчикам, использующим ИИ-агентов для написания кода, в полной мере воспользоваться мощью и возможностями современной веб-платформы и в конечном итоге улучшить работу пользователей в интернете.

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

К сожалению, нет. Мы знаем это, потому что проводим тестирование.

В каждом руководстве Modern Web Guidance определен набор ожиданий, которые должны оправдаться, если рекомендации из руководства были выполнены правильно. Затем наш набор для оценки тестирует эти руководства, отправляя один и тот же запрос агенту, работающему с установленным Modern Web Guidance (управляемый агент), и другому агенту, работающему без установленного Modern Web Guidance (неуправляемый агент). Результаты обоих запусков проверяются на соответствие ожиданиям, определенным в руководстве.

Если сравнить долю успешных попыток с подсказками и без них, становится ясно, что ИИ-модели, даже самые передовые модели, не могут самостоятельно следовать рекомендациям по веб-разработке.

В среднем агенты программирования без подсказок проходят только около 50 % проверок в нашем наборе для оценки, а при использовании Modern Web Guidance – около 90 %.

Полный список проверок для каждого руководства и результаты моделей можно посмотреть на панели оценки.

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

1. Специальные возможности: фокус клавиатуры и управление inert

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

Управление фокусом и inert – одна из самых больших проблем с доступностью, которую мы обнаружили в ходе оценки, и одна из областей, которая больше всего улучшается благодаря Modern Web Guidance. Вот наиболее распространенные ошибки:

• Не перемещать фокус на новые открытые представления и не возвращать его на элемент, который активировал переход назад.
• Использование ловушек фокуса на JavaScript и aria-modal="true" в пользовательских модальных окнах вместо использования модального окна <dialog> или пометки фонового контента inert.
• Каждый элемент на панели инструментов или в сетке навигации является отдельной позицией табуляции, а не одной позицией с перемещаемым tabindex.
• Создание пользовательских контуров :focus-visible, у которых нет коэффициента контрастности 3:1 по отношению к соседним фонам.

2. Специальные возможности: поддержка уменьшения движения

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

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

• Глобальная и безусловная настройка scroll-behavior:smooth в корневом элементе.
• Использование CSS-анимации на основе прокрутки без проверки на уменьшение движения.
• Удаление длительности transition для элементов карусели, чтобы уменьшить движение при прокрутке, но забыв также удалить свойства преобразования, в результате чего элементы прыгают в размере при прокрутке.
• Применение общего сброса длительности 0.01ms для *, *::before и *::after, когда активна функция уменьшения движения, также стирает все важные переходы без движения (необходимые для передачи изменений состояния пользовательского интерфейса).
• Включение переходов между документами без условий и переопределение анимаций ::view-transition-*, когда включен режим минимизации анимации, вместо того чтобы просто ограничивать правило @view-transition проверкой минимизации анимации.

3. Специальные возможности: проверка формы, подсказки по формату и статусы автозаполнения

Формы – это основа большинства алгоритмов достижения цели в интернете. Небольшая заминка в форме оформления заказа может оказать серьезное влияние на прибыль бизнеса.

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

• Повторная реализация CSS :user-invalid с помощью специальной проверки JavaScript blur, которая часто помечает нетронутые поля required, как только пользователи переходят к ним.
• Рассинхронизация aria-invalid с видимыми ошибками, преждевременная установка aria-invalid="true" в blur или стилизация :user-invalid в CSS без синхронизации aria-invalid в JavaScript.
• Использование исчезающего текста placeholder для показа требуемых форматов (например, MM/YY в поле ввода срока действия карты) вместо постоянной подсказки, связанной с aria-describedby.
• Подсказки по формату и правила создания паролей размещены под полем <input>, а не над ним. В результате они могут быть скрыты экранной клавиатурой или всплывающим окном автозаполнения именно тогда, когда пользователь пытается их прочитать.
• Выделение :autofill полей ввода только за счет изменения цвета границы, а не за счет сочетания цвета с нецветным сигналом, который не сдвигает макет (например, вставка box-shadow).

4. Удобство использования: жесты пролистывания и касания

Агенты хорошо справляются с реализацией жестов касания с помощью императивного JavaScript и написанием собственной логики физики. Такие реализации работают, однако сенсорные взаимодействия на основе JavaScript редко бывают такими же плавными, как в нативных приложениях.

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

• Реализация жестов смахивания для закрытия или показа с помощью прослушивателей pointermove или touchmove вместо использования CSS Scroll Snap.
• Не используйте overscroll-behavior-x:none в интерфейсах, где вкладки переключаются с помощью жестов, поскольку при слишком сильном свайпе может случайно сработать переход назад или вперед в браузере.
• Эффекты прогресса пролистывания в основном потоке в обратных вызовах JavaScript вместо анимации, управляемой прокруткой.
• Неправильная поддержка фокуса клавиатуры на панелях с действиями, выполняемыми с помощью прокрутки.

5. Удобство для пользователей: диалоговые окна, всплывающие подсказки и переходы на верхний уровень

В наших оценках модели часто возвращаются к императивным обходным путям JavaScript при анимации, закрытии или ограничении прокрутки вокруг модальных диалогов и всплывающих окон.

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

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

• Создание собственных оверлеев position:fixed с обработчиками кликов за пределами элемента для его закрытия вместо использования popover.
• Создание анимации входа и выхода путем переключения классов перехода CSS и координации с прослушивателями requestAnimationFrame() и transitionend (с резервными вариантами setTimeout()) вместо того, чтобы делать это на чистом CSS с помощью @starting-style и transition-behavior.
• Блокировка прокрутки страницы за открытым модальным окном путем установки overflow:hidden для <html> вместо использования элемента <dialog> для ограничения прокрутки.
• Добавление прослушивателей popstate для обнаружения жестов "Назад" в Android и закрытия открытых модальных окон вместо использования встроенной функции закрытия модального элемента <dialog> кнопкой "Назад".

6. Удобство использования: тёмная тема и элементы управления, адаптирующиеся к теме

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

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

• В <head> отсутствует <meta name="color-scheme" content="light dark">, из-за чего пользователи, у которых включена тёмная тема, видят белую вспышку во время загрузки внешних таблиц стилей.
• Стилизация тёмных тем или компонентов с тёмной поверхностью с помощью пользовательских цветов без настройки color-scheme, в результате чего нативные полосы прокрутки и элементы управления формой застревают в светлом режиме.
• Игнорирование функции CSS light-dark() при определении токенов цвета, адаптирующихся к теме, которые автоматически следуют за активным color-scheme.
• Предоставление только переключателя между светлой и темной темами, который явно переопределяет значение localStorage без возможности вернуться к настройкам ОС по умолчанию.
• Забыть добавить прослушиватель событий storage, из-за чего другие открытые вкладки не синхронизируются, когда пользователь меняет тему.

7. Производительность: скорость отклика и плавность работы

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

В наших оценках модели обычно следуют классическим рекомендациям по времени загрузки, которые годами продвигались в таких инструментах, как Lighthouse, и обычно знают, как перенести очевидные тяжелые циклы в Web Worker. Однако у них постоянно возникают проблемы с отзывчивостью основного потока, которая необходима для оптимизации INP. Чтобы решить эти проблемы, нужно изолировать работу с макетом, планировать задачи по приоритету и использовать новые функции HTML и CSS, которые выполняют рендеринг вне основного потока.

Например, агенты часто:

• Создание собственных очередей setTimeout() для фоновых или низкоприоритетных задач вместо того, чтобы отдавать приоритет видимым пользователю задачам с помощью scheduler.postTask() или использовать продолжение задач с помощью scheduler.yield(), если браузер это поддерживает.
• Создание сложных макетов (например, плотных сеток данных) без применения content-visibility:auto и contain-intrinsic-size, что означает, что обновления после взаимодействия с пользователем вызывают перекомпоновку всей страницы.
• Скрытие неактивных представлений одностраничного приложения с помощью display:none (или их удаление) вместо использования content-visibility:hidden (в паре с inert). В первом случае кэшированное состояние отрисовки уничтожается, поэтому при обратном переключении запускается полный макет и отрисовка.
• Приостановка анимаций <canvas> за пределами экрана и фоновых циклов с помощью обратных вызовов Intersection Observer вместо связывания content-visibility:auto с событием contentvisibilityautostatechange (если доступно). При этом не учитывается поле предварительной отрисовки браузера до того, как элементы появятся на экране.
• Создание подсказок в интерфейсе, указывающих на возможность прокрутки, с помощью прослушивателей событий scroll, которые заставляют постоянно пересчитывать макет, вместо использования запросов состояния прокрутки CSS, когда они доступны (с резервными вариантами Intersection Observer).

8. Производительность: смещение макета и визуальное мерцание

Неожиданные сдвиги макета мешают читателю сосредоточиться и могут привести к тому, что пользователи нажмут не на те кнопки, иногда с необратимыми последствиями!

Модели надежно добавляют атрибуты width и height в стандартные элементы <img>, чтобы предотвратить сдвиг макета, но они постоянно упускают из виду другие распространенные источники сдвигов макета и вспышек перед отрисовкой из элементов <video>, замену веб-шрифтов, панели инструментов мобильного браузера и клиентские эксперименты – все это может повлиять на CLS.

• Отсутствие явных атрибутов width и height в элементах <video> (в результате незагруженные проигрыватели по умолчанию имеют размер 300×150 и сдвигают макет после загрузки метаданных) или стилизация элементов-оболочек медиаконтента вместо непосредственной настройки aspect-ratio и object-fit в элементах медиаконтента.
• Веб-шрифты используются вместе с резервными системными шрифтами без font-size-adjust, из-за чего при замене веб-шрифтов абзацы и заголовки заметно перекомпоновываются.
• Использование статических единиц vh вместо динамических или малых единиц области просмотра (dvh, svh) для определения размеров главных разделов и полноэкранных макетов. Из-за этого контент может смещаться при разворачивании и сворачивании панелей инструментов мобильного браузера.
• Скрытие контента с помощью устаревших фрагментов кода opacity:0 или visibility:hidden, предотвращающих мерцание, и многосекундных тайм-аутов для клиентского A/B-тестирования (задержка LCP и сохранение возможности нажимать на невидимые элементы) вместо использования скриптов с blocking="render", когда это возможно.
• Запуск переходов между страницами до того, как будет обработана критически важная разметка в верхней части страницы, вместо задержки первой отрисовки с помощью rel="expect" и blocking="render". Из-за этого элементы, обработанные наполовину, появляются в середине перехода.

9. Безопасность: защита от DOM XSS и очистка HTML

Даже одна уязвимость к межсайтовому скриптингу (XSS) позволяет злоумышленнику запустить произвольный код в браузере пользователя, украсть данные сеанса или выполнить действия от имени пользователя. Вот почему так важны средства защиты, применяемые браузером, такие как безопасная очистка HTML, доверенные типы и строгие CSP.

Модели редко решают эти проблемы безопасности упреждающе. Например, ни в одной из задач нашего полного набора тестов модели не добавили заголовок Content Security Policy (CSP) или заголовок с изоляцией от междоменных источников без явного запроса.

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

• Создание собственных средств очистки белого списка DOMParser (в качестве резервного варианта для setHTML() или в рамках правила Trusted Types) вместо использования проверенной библиотеки, например DOMPurify, когда встроенная очистка недоступна.
• Принудительное связывание DOMPurify при каждой загрузке страницы вместо использования нативного setHTML(), когда он поддерживается, и отложенной загрузки DOMPurify только в качестве резервного варианта.
• Регистрация разрешительных правил Trusted Types для сквозной передачи (input) => input, которые подрывают принудительное применение приемников.
• Использование доверенных типов на статических страницах с белым списком хостов script-src 'self' CSP вместо блокировки встроенных скриптов с помощью хешей SHA-256.
• Пропуск 'strict-dynamic' и 'report-sample' при настройке Content Security Policies script-src на основе одноразового кода.

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

Ключи доступа повышают безопасность пользователей и конверсию входов для компаний, но их внедрение (даже с помощью агентов) представляет собой сложную задачу.

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

• Вспомогательные средства преобразования Base64URL atob() и btoa(), созданные вручную (в качестве основного пути или избыточного резервного шаблона), вместо встроенных методов сериализации, таких как parseCreationOptionsFromJSON(), parseRequestOptionsFromJSON() и credential.toJSON().
• Пропуск PublicKeyCredential.signalUnknownCredential() при входе, когда сервер сообщает о неизвестном идентификаторе учетных данных, в результате чего удаленные или отозванные ключи доступа остаются в менеджерах паролей пользователей.
• Пропуск PublicKeyCredential.getClientCapabilities() перед отрисовкой интерфейса создания ключей доступа и управления ими.
• Пропуск AbortController и AbortSignal при запуске запросов на повторную аутентификацию с помощью ключа доступа.
• Передача параметра эксперимента с источником mediation:"immediate" вместо uiMode:"immediate" для упрощенных предложений войти в аккаунт.

Устраните эти пробелы

Эти 10 областей – далеко не исчерпывающий список, и мы ожидаем, что со временем пробелы в знаниях будут меняться. Модели будут догонять, а веб-платформа продолжит развиваться.

Хорошая новость заключается в том, что Modern Web Guidance устраняет все эти пробелы и будет развиваться вместе с платформой.

Чтобы начать работу с Modern Web Guidance, выполните следующую команду или найдите его в магазине плагинов агента:

npx modern-web-guidance@latest install

Вы видели, чтобы модели ошибались при выполнении других задач веб-разработки? Нам бы хотелось знать об этом. Создайте проблему в хранилище Modern Web Guidance на GitHub или помогите нам устранить пробелы для других разработчиков, внеся вклад в проект.