Lens for Laravel додає аудит WCAG до вашого локального dev workflow

Під час розробки доступність часто упускають, а регресії важко помітити в код-рев’ю. Lens for Laravel, створений Jakub Lipiński, — пакет для розробників, який перевіряє запущений додаток на порушення WCAG за допомогою Axe-core і повертає кожну проблему до відповідного файлу Blade та номера рядка, де вона виникла.

У комплекті — веб‑панель, Artisan‑команда та опційні підказки з виправленнями за допомогою AI.

# Встановлення

Lens покладається на Puppeteer, який через Spatie Browsershot керує headless Chromium, тож потрібен Node.js поряд із PHP 8.2+ та Laravel 10, 11 або 12.

npm install puppeteer --save-dev
composer require webcrafts-studio/lens-for-laravel --dev

Додаткових налаштувань не потрібно. Пакет автоматично реєструє свій service provider і підтягує Alpine.js та Tailwind з CDN.

# Панель

Відкрийте /lens-for-laravel/dashboard у локальному додатку. Звідти можна перевірити одну сторінку, список URL або просканувати весь сайт через sitemap або переходи за посиланнями (за замовчуванням — до 50 сторінок).

Результати групуються за рівнями WCAG — A, AA, AAA. Кожне порушення показує CSS‑селектор, файл Blade і номер рядка та містить посилання на відповідну документацію WCAG. Можна зробити скріншот із підсвітленням проблемного елемента або експортувати відформатований PDF‑звіт.

Клік по джерелу відкриває файл у вашому налаштованому редакторі: VSCode, Cursor, PhpStorm або Sublime Text.

Панель за замовчуванням доступна лише в середовищі local, а перевірка домену прив’язана до APP_URL, тож на staging або production вона недоступна, якщо ви явно не змінили конфігурацію.

# Аудит через CLI

Для headless‑запусків і інтеграції в CI/CD пакет надає Artisan‑команду lens:audit:

# Audit the root URL
php artisan lens:audit

Інші опції команди:

# Audit specific pages
php artisan lens:audit /about /contact
 
# Crawl the entire site
php artisan lens:audit --crawl
 
# Filter by WCAG level
php artisan lens:audit --a # --aa or --all
 
# Fail the command if violations exceed a threshold
php artisan lens:audit --threshold=10

Опція --threshold дозволяє блокувати деплой, якщо кількість порушень перевищує заданий поріг.

# AI‑підказки для виправлень

Якщо підключити AI‑провайдера, Lens може згенерувати пропозиції патчів прямо в панелі. Він аналізує приблизно 20 рядків Blade‑коду навколо проблеми, пропонує diff із виправленням і дозволяє застосувати зміну без виходу з браузера.

Налаштуйте провайдера в .env:

LENS_FOR_LARAVEL_AI_PROVIDER=gemini
GEMINI_API_KEY=your-key
 
# LENS_FOR_LARAVEL_AI_PROVIDER=openai
# OPENAI_API_KEY=your-key
 
# LENS_FOR_LARAVEL_AI_PROVIDER=anthropic
# ANTHROPIC_API_KEY=your-key

Підтримуються Gemini, OpenAI та Anthropic. Записи файлів обмежені директорією resources/views, щоб запобігти path traversal.

# Налаштування

Опублікуйте файл конфігурації, щоб змінити параметри за замовчуванням:

php artisan vendor:publish --tag="lens-for-laravel-config"

Файл config/lens-for-laravel.php містить налаштування:

• route_prefix — префікс URL панелі (за замовчуванням: lens-for-laravel)
• enabled_environments — середовища, в яких доступна панель (за замовчуванням: local)
• editor — ваш IDE для відкриття файлів по кліку
• crawl_max_pages — максимум сторінок на сканування (за замовчуванням: 50)
• ai_provider — AI‑провайдер для підказок виправлень

# Чого не бачить автоматичне сканування

Axe-core виявляє лише близько 20–30% порушень WCAG. Те, що потребує людської оцінки — осмислені alt для зображень, логічна ієрархія заголовків, навігація з клавіатури, оголошення для скрінрідерів і когнітивне навантаження — автоматично не позначать. У документації пакета чітко зазначено: автоматичне сканування — стартова точка, а не заміна ручних перевірок клавіатурою, тестів зі скрінрідером і користувацького тестування з людьми з інвалідністю.

Lens корисний для виявлення «низькосяжних» проблем на ранніх етапах розробки. Командам, що працюють над відповідністю ADA, Section 508 або EU Accessibility Act, варто розглядати його як один із шарів ширшого процесу тестування.

Вихідний код доступний на GitHub, документація — на lens.webcrafts.pl.