Accessibility

Lens for Laravel Maps WCAG Violations to Blade File and Line

Lens for Laravel runs Axe-core against your running app and maps each WCAG violation to the exact Blade file and line, with CI thresholds and AI-generated patches.

  • AuthorTom Whitfield
  • ChannelAccessibility
  • Filed
  • Read3 min
Lens for Laravel Brings WCAG Auditing to Your Local Dev Workflow - Laravel News
Lens for Laravel Brings WCAG Auditing to Your Local Dev Workflow - Laravel NewsAI-generated
  • Lens for Laravel maps Axe-core WCAG violations to specific Blade template files and line numbers.
  • The lens:audit Artisan command supports a --threshold flag to gate deployments on violation counts.
  • Axe-core detects only 20–30% of WCAG violations; manual testing remains essential.

Lens for Laravel, a developer package by Jakub Lipiński, scans a running application for WCAG violations using the Axe-core engine and maps every issue back to the specific Blade template file and line number where it originated. That trace from a rendered page to a source location is what separates it from generic browser extensions: each violation reported in its dashboard carries a CSS selector, the offending Blade path, a line number, and a link to the corresponding WCAG documentation.

The package targets a real workflow gap. Accessibility regressions rarely surface in code review, and manual audits happen late — usually after a page ships. Lens moves detection into local development, where fixes cost the least.

How it runs

Lens drives a headless Chromium instance through Puppeteer via Spatie Browsershot, so it requires Node.js alongside PHP 8.2+ and Laravel 10, 11, or 12. Installation is two commands — npm install puppeteer --save-dev and composer require webcrafts-studio/lens-for-laravel --dev — with no further setup. The package auto-discovers its service provider and loads Alpine.js and Tailwind from a CDN.

The dashboard

The dashboard lives at /lens-for-laravel/dashboard inside your local app. From there you can audit a single page, a list of URLs, or crawl the entire site via sitemap discovery or link-following, capped at 50 pages by default.

Results group by conformance level — A, AA, or AAA. For each violation you can 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.

Security boundaries are explicit. The dashboard loads only in the local environment by default, and domain checks are enforced against APP_URL, so it stays inaccessible on staging and production unless you deliberately change the configuration.

CI and deployment gating

A lens:audit Artisan command covers headless workflows:

  • php artisan lens:audit — audit the root URL
  • php artisan lens:audit /about /contact — audit specific pages
  • php artisan lens:audit --crawl — crawl the entire site
  • php artisan lens:audit --a — filter by WCAG level (--aa, --all)
  • php artisan lens:audit --threshold=10 — fail the command if violations exceed a count

The --threshold flag is the notable one: it turns the audit into a deployment gate, letting a pipeline block releases when violation counts regress past a fixed ceiling.

AI-assisted patches

With an AI provider configured in .env, Lens generates suggested patches directly in the dashboard. It examines roughly 20 lines of surrounding Blade code, proposes a corrected diff, and applies the change without leaving the browser. Gemini, OpenAI, and Anthropic are all supported. File writes are constrained to resources/views to prevent path traversal.

Configuration

Publishing config/lens-for-laravel.php via vendor:publish exposes five settings: route_prefix (the dashboard URL prefix), enabled_environments (default: local), editor (for click-to-open source links), crawl_max_pages (default: 50), and ai_provider.

What it will not catch

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

For teams working toward ADA, Section 508, or EU Accessibility Act compliance, Lens works best as one layer in a broader testing process — the layer that catches low-hanging fruit before it reaches production.

The source is on GitHub, with documentation at lens.webcrafts.pl. As regulatory deadlines under the EU Accessibility Act approach, expect automated source-mapped auditing to become a standard fixture of Laravel CI pipelines rather than an optional extra.

Original: github.com

Share this article:

More from Tom Whitfield

Tom Whitfield

Show full bio

Correspondent covering companies, deals and strategy in Product and interaction design, design systems at Interface Wire.

65 articles

Related articles

  1. Tobii launches local webcam eye tracking for on-site research studies

  2. Google's Modern Web Guidance Fails Its Own Accessibility Promises

  3. 94.8% of Home Pages Fail WCAG, DesignRush Reports

  4. WebAIM Launches AIMee, a Qwen 3 Coder-Based Accessibility Chatbot

« Previous articleNext article »