Theme

Pro Analyzer — Available with ShieldCI Pro

Accessibility Analyzer ​

Analyzer IDCategorySeverityTime To Fix
accessibility🏅 Best PracticesMedium10 minutes

What This Checks ​

Validates that Blade templates follow basic accessibility standards. Checks for:

  • Images without alt attributes
  • Form inputs without associated labels or aria attributes
  • Missing lang attribute on <html> tags
  • Empty links without accessible text
  • Empty buttons without accessible text

Why It Matters ​

  • Legal Compliance: Many jurisdictions require web accessibility (ADA, EAA, Section 508)
  • User Inclusivity: ~15% of the world's population has some form of disability
  • SEO Benefits: Search engines use alt text and semantic HTML for indexing
  • Usability: Accessibility improvements benefit all users (keyboard navigation, screen readers, etc.)

How to Fix ​

Quick Fix (5 minutes) ​

Add alt attributes to images:

Before (❌):

html
<img src="/logo.png">

After (✅):

html
<img src="/logo.png" alt="Company Logo">
<!-- For decorative images: -->
<img src="/divider.png" alt="">

Proper Fix (10 minutes) ​

1. Add labels to form inputs:

Before (❌):

html
<input type="email" name="email" placeholder="Email">

After (✅):

html
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Email">

<!-- Or wrap the input inside a label: -->
<label>Email Address <input type="email" name="email"></label>

<!-- Or use aria-label for icon-only inputs: -->
<input type="search" aria-label="Search products">

<!-- Or use aria-labelledby to reference another element's text: -->
<span id="email-hint">Email Address</span>
<input type="email" name="email" aria-labelledby="email-hint">

NOTE

The following input types are automatically exempt from the label requirement: hidden, submit, button, reset, image.

Dynamic label associations using Blade expressions are fully supported. The analyzer correctly resolves for/id pairs that include PHP arrow operators or expressions:

html
@foreach ($roles as $role)
<div>
    {{-- ✅ Recognized: for and id share the same dynamic expression --}}
    <input type="radio" name="role"
           @if(old('role') == $role->id) checked @endif
           value="{{ $role->id }}" id="role-{{ $role->id }}">
    <label for="role-{{ $role->id }}">{{ $role->name }}</label>
</div>
@endforeach

2. Add lang attribute:

html
<html lang="en">

3. Add accessible text to links and buttons:

Before (❌):

html
<a href="/settings"><i class="icon-gear"></i></a>
<button><i class="icon-delete"></i></button>

After (✅):

html
<a href="/settings" aria-label="Settings"><i class="icon-gear"></i></a>
<button aria-label="Delete item"><i class="icon-delete"></i></button>

References ​

Copyright © 2026 ShieldCI