Skip to main content
Comprehensive accessibility audit using axe-core, Pa11y, and Lighthouse with detailed remediation guidance.

Description

This prompt performs a thorough accessibility analysis of a web page using three industry-standard tools, providing an executive summary with the Lighthouse accessibility score, issues grouped by WCAG principle, and a prioritized remediation plan with code examples. Best for: Comprehensive audits before major releases or compliance reviews.

Arguments

ArgumentTypeRequiredDefaultDescription
urlstring-URL of the page to analyze
wcagLevelstringAAWCAG conformance level: A, AA, or AAA

Example Usage

Basic Usage

Use the full-accessibility-audit prompt with:
- url: https://my-site.com

With WCAG Level

Use the full-accessibility-audit prompt with:
- url: https://my-site.com
- wcagLevel: AAA

Natural Language

Run a full accessibility audit on https://example.com targeting WCAG AA compliance

Output Includes

The prompt generates a comprehensive report with:

1. Executive Summary

  • Lighthouse Accessibility Score (0-100) with qualitative assessment
  • Total unique issues across all tools
  • Severity breakdown (critical, serious, moderate, minor)
  • Overall WCAG conformance assessment

2. Issues by WCAG Principle

Problems grouped by the four principles:
  • Perceivable - Content must be presentable to users
  • Operable - UI components must be operable
  • Understandable - Information and operation must be understandable
  • Robust - Content must work with assistive technologies

3. Critical Issues Analysis

Detailed user impact for each critical issue:
  • What the issue is
  • Where it occurs
  • Which users are affected
  • Why it matters (real-world impact)
  • Which tool(s) detected it

4. Remediation Plan

Prioritized fixes ordered by:
  • Severity (critical first)
  • Score impact (highest improvement first)
  • User impact (most affected users first)
  • Effort required (quick wins vs. refactors)

5. Code Examples

Before/after code snippets for top issues

6. Score Improvement Projection

Estimated Lighthouse score gain after fixes

Example Output Structure

## Executive Summary
- **Lighthouse Accessibility Score**: 72/100 — Needs Improvement
- Total unique issues: 18 (across axe-core, Pa11y, Lighthouse)
- Critical: 3 | Serious: 5 | Moderate: 6 | Minor: 4
- WCAG AA conformance: Partial

## Issues by WCAG Principle

### Perceivable (9 issues)
- 1.1.1 Non-text Content: 3 issues (axe-core, Lighthouse)
- 1.4.3 Contrast Minimum: 6 issues (axe-core, Pa11y, Lighthouse)

### Operable (5 issues)
- 2.1.1 Keyboard: 2 issues (Pa11y)
- 2.4.4 Link Purpose: 3 issues (axe-core, Lighthouse)

## Critical Issues

### Missing alt text on hero image
- **Impact**: Screen reader users cannot understand the main visual content
- **Affected Users**: screen-reader, low-vision
- **Detected by**: axe-core, Lighthouse
- **Fix**: Add descriptive alt attribute

## Remediation Plan

### Priority 1: Fix Today (Critical + High Score Impact)

1. Add alt text to images (3 instances)
   ```html
   <!-- Before -->
   <img src="hero.jpg">
   
   <!-- After -->
   <img src="hero.jpg" alt="Team collaborating in modern office">

Score Improvement Projection

  • Fixing critical issues: 72 → ~82/100
  • Fixing critical + serious: 72 → ~91/100

## When to Use

| Scenario | Recommended |
|----------|-------------|
| Before major release | ✅ Yes |
| Compliance review | ✅ Yes |
| Initial accessibility assessment | ✅ Yes |
| Quick development check | Use `quick-accessibility-check` instead |
| CI/CD pipeline | Use tools directly |

<Note>
  This prompt runs **three separate tools** (axe-core, Pa11y, and Lighthouse), so analysis may take 30-60 seconds depending on page complexity.
</Note>

## What Gets Analyzed

<AccordionGroup>
  <Accordion title="axe-core Analysis">
    - WCAG 2.0/2.1 violations
    - Automated best practices
    - Color contrast issues
    - ARIA usage problems
  </Accordion>
  
  <Accordion title="Pa11y Analysis">
    - HTML_CodeSniffer rules
    - Additional WCAG coverage
    - Cross-tool verification
    - Complementary issue detection
  </Accordion>
  
  <Accordion title="Lighthouse Analysis">
    - Accessibility score (0-100)
    - Automated audits
    - Manual review flags
    - Performance context
  </Accordion>
</AccordionGroup>

## Technical Details

This prompt internally executes:

```typescript
// Step 1: Run axe-core + Pa11y
analyze-mixed({
  url: "<your-url>",
  tools: ["axe-core", "pa11y"],
  options: {
    wcagLevel: "AA",
    deduplicateResults: true
  }
})

// Step 2: Run Lighthouse
analyze-with-lighthouse({
  url: "<your-url>",
  options: {
    wcagLevel: "AA"
  }
})

Quick Accessibility Check

Faster, less detailed alternative for development

Lighthouse Audit

Score-focused audit using Lighthouse only

Pre-Deploy Check

Deployment-focused with GO/NO-GO decision

Quick Wins Report

Focus on easy, high-impact fixes

Build docs developers (and LLMs) love