Skip to main content
Accessibility audit focused on the Lighthouse accessibility score with score improvement roadmap.

​
Description

This prompt runs a Lighthouse accessibility audit and provides a report centered on the accessibility score (0-100) as the primary metric. It includes a breakdown of failing audits sorted by score impact, manual review guidance, and a score improvement roadmap with effort tiers. Best for: Score-focused audits, tracking accessibility metrics, understanding what Lighthouse specifically detects.

​
Arguments

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

​
Example Usage

​
Basic Usage

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

​
With WCAG Level

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

​
Natural Language

Run a Lighthouse accessibility audit on https://example.com

​
Output Includes

The prompt generates a score-focused report with:

​
1. Accessibility Score

Prominent 0-100 score with qualitative rating:
  • Poor - Score < 50
  • Needs Improvement - Score 50-89
  • Good - Score 90-100

​
2. Failed Audits

Each failing audit with:
  • WCAG criterion mapping
  • Number of affected elements
  • User impact explanation
  • Concrete fixes with before/after code

​
3. Manual Review Audits

Lighthouse audits flagged as manual or not applicable, with verification guidance

​
4. Score Improvement Roadmap

Fixes grouped by effort:
  • Quick Wins (less than 5 min each)
  • Medium Effort (5-30 min each)
  • Larger Refactors (more than 30 min each)
With estimated score improvement per tier

​
5. Summary

Top 3 highest-impact actions and recommendations for complementary tools

​
Example Output Structure

## Accessibility Score

**72/100** — Needs Improvement
- Passed audits: 28/35
- Failed audits: 7

---

## Failed Audits (by score impact)

### 1. color-contrast (WCAG 1.4.3 - Level AA)
- **Affected elements**: 12 elements
- **Impact**: Low-vision and color-blind users cannot read text
- **Fix**:
  ```html
  <!-- Before -->
  <p style="color: #999">Light gray text</p>

  <!-- After -->
  <p style="color: #595959">Darker gray text</p>

​
2. image-alt (WCAG 1.1.1 - Level A)

  • Affected elements: 5 images
  • Impact: Screen reader users miss visual content
  • Fix: 
    <!-- Before -->
<img src="photo.jpg">

<!-- After -->
<img src="photo.jpg" alt="Product demonstration">

​
Score Improvement Roadmap

​
Quick Wins (less than 5 min each) → estimated score: 82/100

  1. Add lang attribute to <html>
  2. Add document title

​
Medium Effort → estimated score: 92/100

  1. Fix color contrast on 12 elements
  2. Add alt text to 5 images

​
Larger Refactors → estimated score: 98/100

  1. Restructure heading hierarchy
  2. Add skip navigation link

​
Summary

  1. Fix color contrast issues (+8 points)
  2. Add missing alt text (+5 points)
  3. Add form labels (+3 points)
Consider complementing with axe-core or Pa11y for issues Lighthouse does not cover. 

## Lighthouse vs Full Audit

| Aspect | `lighthouse-audit` | `full-accessibility-audit` |
|--------|-------------------|---------------------------|
| **Tools used** | Lighthouse only | axe-core + Pa11y + Lighthouse |
| **Focus** | Score and Lighthouse-specific audits | Comprehensive WCAG coverage |
| **Primary metric** | Accessibility score (0-100) | Issue count and severity |
| **Best for** | Score tracking, Lighthouse insights | Compliance reviews, major releases |
| **Speed** | Faster (single tool) | Slower (three tools) |

<Tip>
  Use this prompt when you need to **track score trends** over time or understand **Lighthouse-specific recommendations**.
</Tip>

## When to Use

| Scenario | Recommended |
|----------|-------------|
| Track accessibility score over time | ✅ Yes |
| Understand Lighthouse-specific results | ✅ Yes |
| Quick score check during development | ✅ Yes |
| Comprehensive compliance audit | Use `full-accessibility-audit` instead |
| Improve score toward a specific target | Use `lighthouse-score-improvement` instead |
| Deployment gate decision | Use `pre-deploy-check` instead |

## Understanding the Score

<AccordionGroup>
  <Accordion title="How Lighthouse Calculates the Score">
    The accessibility score is a weighted average of audit results:
    - Each audit has a weight based on impact
    - Failed audits reduce the score
    - Some audits are informational only
    - Manual audits don't affect the score
  </Accordion>
  
  <Accordion title="What a Good Score Means">
    - **90-100**: Good - Automated checks pass, but manual testing still required
    - **50-89**: Needs improvement - Several automated issues detected
    - **0-49**: Poor - Critical accessibility problems found
  </Accordion>
  
  <Accordion title="Score Limitations">
    - Only covers ~30% of WCAG issues
    - Cannot detect semantic or context problems
    - Manual testing is essential
    - Score is not a compliance guarantee
  </Accordion>
</AccordionGroup>

## Technical Details

This prompt internally executes:

```typescript
analyze-with-lighthouse({
  url: "<your-url>",
  options: {
    wcagLevel: "AA"
  }
})
Lighthouse runs in a headless browser and may take 10-30 seconds depending on page complexity and network speed.

​
Score Tracking Example

## Accessibility Score Tracking

| Date | Score | Notes |
|------|-------|-------|
| 2024-03-01 | 72 | Initial audit |
| 2024-03-08 | 82 | Fixed contrast issues |
| 2024-03-15 | 91 | Added alt text, labels |
| 2024-03-22 | 95 | Target reached! |

Lighthouse Score Improvement

Improvement plan toward a target score

Full Accessibility Audit

Comprehensive audit with all three tools

Pre-Deploy Check

GO/NO-GO deployment decision

Quick Wins Report

Easy fixes across all tools

Build docs developers (and LLMs) love

Get started for freeTalk to us