Команда Angular представила Angular Aria a set of customizable, fully accessible UI patterns. Это громкое заявление, но насколько на практике возможно глубоко настраивать компоненты, сохраняя при этом функции доступности, такие как навигация с клавиатуры и управление фокусом?
В этой статье мы воспользуемся Google Antigravity, чтобы проверить это утверждение на практике, обновив интерфейс вкладок с базовых стилей до дизайна в стиле неоморфизма.
Мотивация
В документации angular.dev команда приводит примеры с набором базовых стилей, стилей Material Design и ретро-стилей, призванных показать разработчикам возможности этих новых паттернов доступности.
Задача: расширить пример с базовыми стилями вкладок, реализовав следующий дизайн, вдохновленный неоморфизмом.
Вот как выглядит интерфейс до внесения каких-либо изменений:
Нажмите Enter или кликните, чтобы просмотреть изображение в полном размере
Отчет о доступности Lighthouse показывает 100 баллов до внесения каких-либо изменений:
Нажмите Enter или кликните, чтобы просмотреть изображение в полном размере
Неоморфный дизайн часто критикуют за низкую доступность. Этот эксперимент призван проверить возможности агента кодирования при работе со сложными CSS-стилями, а также провести стресс-тестирование гибкости настройки вкладок Angular Aria. Кроме того, я попрошу агента исправить любые возникающие проблемы с доступностью.
Внесение изменений
Стили для этого интерфейса хорошо организованы, но требуют множества изменений для достижения неоморфного дизайна. Вместо того чтобы писать их вручную, агент кодирования Google Antigravity может внести эти изменения сам.
Запомнить меня для более быстрого входа
Вот промпт:
Несколько моментов, на которые стоит обратить внимание:
- В этом примере использовалось эталонное изображение для вдохновения (@example-ui.jpeg), чтобы задать направление дизайна.
- Этот пример также использует /goal command in Google Antigravity инструкцию для агента выполнить задачу до конца, не запрашивая у пользователя немедленного ввода.
Результат
Вот получившийся интерфейс на основе промпта:
Нажмите Enter или кликните, чтобы просмотреть изображение в полном размере
В этом примере агент внес небольшую модификацию в структуру HTML, добавив обертку, но при этом использовал паттерн вкладок Angular Aria. Я снова прогнал это приложение через Lighthouse и получил 95 баллов за доступность: контрастность фона и переднего плана оказалась недостаточной.
Нажмите Enter или кликните, чтобы просмотреть изображение в полном размере
Я могу снова попросить агента исправить эту проблему:
Полученный интерфейс имеет улучшенную контрастность, что лучше для пользователей.
Нажмите Enter или кликните, чтобы просмотреть изображение в полном размере
Агент кодирования исправил проблемы с контрастностью. Он также создал полезный отчет, в котором выделил улучшенные коэффициенты в приложении:
Нажмите Enter или кликните, чтобы просмотреть изображение в полном размере
Теперь приложение имеет 100 баллов за доступность.
Создайте свое следующее отличное приложение
Использование Google Antigravity и фантастических новых API Angular Aria позволяет разработчикам создавать доступные приложения для всех типов пользователей. Это лишь один пример — существует почти дюжина реализованных паттернов доступности с Angular Aria.