Gasoline’s run_accessibility_audit tool surfaces WCAG violations as actionable findings your AI can fix.
The Problem
Accessibility is important but easy to overlook during development. Running audits manually, interpreting violations, and knowing how to fix them adds friction. Most developers defer a11y until it becomes a compliance requirement.
With Gasoline, your AI runs the audit and fixes the issues in one step.
How It Works
- Your AI calls
run_accessibility_audit - Extension runs axe-core against the live page
- Violations returned with severity, elements, and remediation guidance
// AI runs audit on the login form
{
"scope": "#login-form",
"tags": ["wcag2a", "wcag2aa"]
}
// Response:
{
"violations": [{
"id": "label",
"impact": "critical",
"description": "Form elements must have labels",
"nodes": [{
"target": ["input#email"],
"html": "<input type=\"email\" id=\"email\" placeholder=\"Email\">"
}]
}]
}
MCP Tool Parameters
| Parameter | Description |
|---|---|
scope |
CSS selector to scope the audit (default: full page) |
tags |
WCAG tags to test: wcag2a, wcag2aa, wcag2aaa, best-practice |
What’s Reported
Each violation includes:
| Field | Description |
|---|---|
| Rule ID | axe-core rule identifier (e.g., color-contrast) |
| Impact | Critical, serious, moderate, or minor |
| Description | Human-readable explanation |
| Affected elements | CSS selectors and HTML snippets |
| Help URL | Link to detailed remediation guidance |
Supported WCAG Levels
| Tag | Coverage |
|---|---|
wcag2a |
Level A (minimum compliance) |
wcag2aa |
Level AA (standard compliance) |
wcag2aaa |
Level AAA (enhanced compliance) |
best-practice |
Industry best practices beyond WCAG |
Common Findings
| Category | Examples |
|---|---|
| Images | Missing alt text, decorative images not marked |
| Color | Insufficient contrast ratio |
| Forms | Missing labels, unlabeled inputs |
| ARIA | Invalid roles, missing required attributes |
| Structure | Missing landmarks, heading order |
| Keyboard | Not focusable, missing focus indicators |
The AI Advantage
Your AI doesn’t just report violations — it fixes them. Because it has access to both the violation details (element selectors, rule descriptions) and your source code, it can:
- Add missing ARIA labels to form inputs
- Fix color contrast ratios in CSS
- Add alt text to images
- Correct heading hierarchy
- Add keyboard navigation handlers
- Re-run the audit to verify the fix
Use Cases
Pre-Commit Checks
“Run an accessibility audit on this page before I commit.”
Catch issues before they reach production.
Component Development
“Check the accessibility of this new modal component.”
Scope the audit to just the component you’re building.
Compliance Remediation
“Fix all critical accessibility issues on this page.”
Your AI audits, identifies violations, and applies fixes in one flow.
Post-Refactor Verification
“Did my refactor break any accessibility?”
Quick audit after UI changes catches regressions before users hit them.