Lighthouse Score Improvement

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

Use the lighthouse-score-improvement prompt with:
- url: https://my-site.com
- targetScore: 95

Help me improve the accessibility score of https://example.com to 95

## 1. Current State

- **Current Score**: 68/100
- **Target Score**: 90/100
- **Gap**: 22 points
- **Rating**: Needs Improvement
- **Failing audits**: 9
- **Passing audits**: 26

---

## 2. Score Impact Analysis

| # | Audit | WCAG Criterion | Impact | Elements | Effort |
|---|-------|---------------|--------|----------|--------|
| 1 | color-contrast | 1.4.3 | High | 15 | 30 min |
| 2 | image-alt | 1.1.1 | High | 8 | 15 min |
| 3 | label | 3.3.2 | Medium | 4 | 10 min |
| 4 | heading-order | 2.4.6 | Medium | 3 | 20 min |
| 5 | link-name | 2.4.4 | Low | 2 | 5 min |

---

## 3. Improvement Plan

### Phase 1: Critical Fixes (estimated score after: 78/100)

#### color-contrast (WCAG 1.4.3)
- **Current**: 15 elements fail contrast check
- **Fix**: Increase text contrast ratios
- **Estimated gain**: +6 points

```html
<!-- Before -->
<p style="color: #aaa">Low contrast</p>

<!-- After -->
<p style="color: #595959">Sufficient contrast (4.54:1)</p>

<!-- Before -->
<img src="product.jpg">

<!-- After -->
<img src="product.jpg" alt="Wireless headphones in matte black">

<!-- Before -->
<input type="text" placeholder="Name">

<!-- After -->
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="John Doe">

<!-- Before -->
<a href="/docs">Click here</a> for documentation

<!-- After -->
<a href="/docs">Read the documentation</a>

## Score Improvement Checklist
Target: 90/100

### Phase 1 — Critical Fixes (Target: 78/100)
- [ ] Fix contrast on 15 elements (30 min)
- [ ] Add alt text to 8 images (15 min)

### Phase 2 — Important Fixes (Target: 88/100)
- [ ] Add labels to 4 form fields (10 min)
- [ ] Fix heading hierarchy (20 min)

### Phase 3 — Final Polish (Target: 93/100)
- [ ] Add accessible names to 2 links (5 min)
- [ ] Fix tabindex values (10 min)

## Phased Approach

<Steps>
  <Step title="Phase 1: Critical Fixes">
    Focus on highest-impact issues that provide the biggest score boost. These are typically fundamental accessibility problems.
  </Step>
  
  <Step title="Phase 2: Important Fixes">
    Address medium-impact issues. These often require more time but are essential for reaching your target.
  </Step>
  
  <Step title="Phase 3: Final Polish">
    Fix remaining issues to exceed your target score. These may be smaller improvements but contribute to overall quality.
  </Step>
  
  <Step title="Verify & Monitor">
    Re-run the audit to confirm score improvement. Set up monitoring to track regression.
  </Step>
</Steps>

## Lighthouse Score Improvement vs Other Prompts

| Aspect | `lighthouse-score-improvement` | `lighthouse-audit` | `full-accessibility-audit` |
|--------|-------------------------------|-------------------|---------------------------|
| **Goal** | Reach a target score | Understand current score | Comprehensive audit |
| **Output** | Phased action plan | Score report | Full remediation plan |
| **Unique value** | Gap analysis + phases | Score breakdown | Cross-tool coverage |
| **Tracking** | Built-in checklist | No checklist | No checklist |
| **Best for** | Score improvement | Score monitoring | Compliance reviews |

<Tip>
  Use this prompt when you have a **specific score target** (e.g., "We need to reach 90 before launch"). For general monitoring, use `lighthouse-audit` instead.
</Tip>

## When to Use

| Scenario | Recommended |
|----------|-------------|
| Accessibility score is below target | ✅ Yes |
| Sprint planning for accessibility | ✅ Yes |
| Methodical score improvement | ✅ Yes |
| Product launch requirements | ✅ Yes |
| Understanding current score | Use `lighthouse-audit` instead |
| Full compliance review | Use `full-accessibility-audit` instead |
| Pre-deployment verification | Use `pre-deploy-check` instead |

## Score Improvement Strategies

<AccordionGroup>
  <Accordion title="Quick Wins First">
    Start with Phase 1 fixes that provide maximum score improvement with minimal effort. These often include:
    - Missing alt text
    - Form labels
    - Color contrast
    - Document language
  </Accordion>
  
  <Accordion title="Sprint-Based Execution">
    Assign one phase per sprint:
    - Sprint 1: Critical fixes (Phase 1)
    - Sprint 2: Important fixes (Phase 2)
    - Sprint 3: Final polish (Phase 3)
  </Accordion>
  
  <Accordion title="Verify After Each Phase">
    Re-run `lighthouse-audit` after completing each phase to:
    - Confirm score improvement
    - Identify new issues
    - Adjust remaining phases
  </Accordion>
  
  <Accordion title="Set Realistic Targets">
    - **85+**: Achievable for most sites
    - **90+**: Industry standard, requires attention
    - **95+**: Requires dedicated effort
    - **100**: Very difficult, diminishing returns
  </Accordion>
</AccordionGroup>

## Technical Details

This prompt internally executes:

```typescript
analyze-with-lighthouse({
  url: "<your-url>",
  options: {
    wcagLevel: "AA"
  }
})

// Then calculates:
// - Gap between current and target score
// - Impact ranking of each failing audit
// - Phased improvement plan

## Accessibility Score Improvement Tracker

**Target**: 90/100
**Deadline**: 2024-04-30

| Phase | Status | Score | Date Completed |
|-------|--------|-------|----------------|
| Baseline | ✅ | 68 | 2024-03-01 |
| Phase 1 | ✅ | 78 | 2024-03-15 |
| Phase 2 | 🔄 | 88 | In progress |
| Phase 3 | ⏳ | 93 | Planned |