Laravel Packages

Lens for Laravel Brings WCAG Auditing to Your Local Dev Workflow

Published
Lens for Laravel Brings WCAG Auditing to Your Local Dev Workflow image

Accessibility is easy to overlook during development, and regressions are hard to catch in code review. Lens for Laravel, created by Jakub Lipiński, is a dev package that scans your running application for WCAG violations using Axe-core, then maps each issue back to the specific Blade template file and line number where it originated.

It ships with a web dashboard, an Artisan command, and optional AI-assisted fix suggestions.

Installation

Lens depends on Puppeteer to drive a headless Chromium browser via Spatie Browsershot, so you'll need Node.js installed alongside PHP 8.2+ and Laravel 10, 11, or 12.

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

No additional setup is required. The package auto-discovers its service provider and pulls Alpine.js and Tailwind from a CDN.

The Dashboard

Navigate to /lens-for-laravel/dashboard in your local app. From there, you can audit a single page, a list of URLs, or crawl your entire site via sitemap discovery or link-following (up to 50 pages by default).

Results are grouped by WCAG level — A, AA, or AAA — with each violation showing the CSS selector, the source Blade file and line number, and a link to the relevant WCAG documentation. You can also take a screenshot that highlights the offending element in context, or export a formatted PDF audit report.

Clicking a source location opens the file directly in your configured editor: VSCode, Cursor, PhpStorm, or Sublime Text.

The dashboard is restricted to your local environment by default, and domain checks are enforced against your APP_URL, so it won't be accessible on staging or production unless you explicitly change the configuration.

CLI Auditing

For headless workflows and CI/CD integration, the package provides a lens:audit Artisan command:

# Audit the root URL
php artisan lens:audit

The other options for the artisan command include:

# 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

The --threshold option makes it straightforward to gate deployments on a maximum number of violations.

AI-Assisted Fixes

If you configure an AI provider, Lens can generate suggested patches directly in the dashboard. It examines roughly 20 lines of surrounding Blade code, proposes a corrected diff, and lets you apply the change without leaving the browser.

Configure your provider in .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, and Anthropic are all supported. File writes are limited to resources/views to prevent path traversal.

Configuration

Publish the config file to adjust defaults:

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

The config/lens-for-laravel.php file exposes:

  • route_prefix — the dashboard URL prefix (default: lens-for-laravel)
  • enabled_environments — which environments load the dashboard (default: local)
  • editor — your IDE for click-to-open source links
  • crawl_max_pages — maximum pages per crawl (default: 50)
  • ai_provider — the AI backend for fix suggestions

What Automated Scanning Can't Catch

Axe-core detects roughly 20–30% of WCAG violations. Issues that require human judgment — meaningful image alt text, logical heading hierarchy, keyboard navigation flows, screen reader announcements, and cognitive load — won't be flagged. The package's own documentation is clear on this point: automated scanning is a starting point, not a substitute for manual keyboard testing, screen reader validation, and user testing with people who have disabilities.

Lens is a useful addition to a development workflow for catching low-hanging fruit early. For teams working toward ADA, Section 508, or the EU Accessibility Act compliance, it should be one layer of a broader testing process.

You can find the source on GitHub and browse the documentation at lens.webcrafts.pl.

Yannick Lyn Fatt photo

Staff Writer at Laravel News and Full stack web developer.

Sponsored

acquaintsoft logo
Acquaint Softtech

Hire Laravel developers with AI expertise at $20/hr. Get started in 48 hours.

Visit Acquaint Softtech

The latest

View all →
Validate and Convert HEIC Images in Laravel image

Validate and Convert HEIC Images in Laravel

Read article
Saga Lara Flow: Durable Workflows and Compensating Transactions on Laravel Queues image

Saga Lara Flow: Durable Workflows and Compensating Transactions on Laravel Queues

Read article
Reject Unexpected Array Keys with Laravel Validation image

Reject Unexpected Array Keys with Laravel Validation

Read article
Major performance improvements & security patches for Filament v4.12 and v5.7! image

Major performance improvements & security patches for Filament v4.12 and v5.7!

Read article
Laravel Boost Project Rules: Teach Agents Your Conventions image

Laravel Boost Project Rules: Teach Agents Your Conventions

Read article
Extract an Image's Dominant Color in Laravel image

Extract an Image's Dominant Color in Laravel

Read article