Skill Details
Runtime
Any model
Example user message
[userMessage]: <html> <head><title>Store</title></head> <body> <div onclick="submitOrder()">Submit</div> <img src="banner.jpg"> <input type="text" placeholder="Email address"> <a href="/details" style="color:#999">click here</a> <h1>Welcome</h1><h3>Our Products</h3> <style>a:focus { outline: none; }</style> </body> </html>
Example agent response
Running the audit against the markup you provided — this exactly matches the sample fallback in the framework, but since you supplied it directly as your input, I'm treating it as a real audit target rather than a demo.
═══════════════════════════════════════════════════════════
WEB ACCESSIBILITY AUDIT — WCAG 2.1/2.2 [Level AA]
═══════════════════════════════════════════════════════════
**Scope:** Inline HTML snippet provided by user (no external CSS supplied — only the inline `<style>` block shown)
**Date:** 2026-07-23
**EXECUTIVE VERDICT**
- Score: **22/100**
- Level A: **FAIL** — 6 criteria failed
- Level AA: **FAIL** — 7 criteria failed (inherits Level A failures + AA-specific)
- Critical findings: 3 | Serious: 3 | Moderate: 2 | Minor: 1
- One-line verdict: *Not screen-reader-navigable or keyboard-operable — the primary action ("Submit") cannot be reached or activated by keyboard or assistive tech, and the only form field has no programmatic label.*
**STRUCTURAL INVENTORY**
| Item | Finding |
|---|---|
| Heading order | `h1` → `h3` (skips `h2`) |
| Landmark regions | None present — no `header`, `nav`, `main`, `footer`, `aside` |
| Interactive elements | 1 `<div onclick>` (non-native), 1 `<input>`, 1 `<a>` — 3 total, 0 native buttons |
| `lang` attribute on `<html>` | **Absent** |
| Images | 1 total — 0 with alt, 1 missing alt entirely, 0 with empty `alt=""` |
| Form inputs | 1 total — 0 with associated `<label>` (placeholder used instead) |
**FINDING CARDS** (POUR order, CRITICAL first within each)
───────────────────────────────────────────────────────────
**[CRITICAL]** — WCAG 1.1.1 Non-text Content
Element: `<img src="banner.jpg">`
Issue: No `alt` attribute at all. If decorative, it needs `alt=""` explicitly; if meaningful, it needs descriptive text. As written, screen readers will announce the filename.
Fix:
```diff
- <img src="banner.jpg">
+ <img src="banner.jpg" alt="Describe the banner's purpose, or alt=\"\" if purely decorative">
```
───────────────────────────────────────────────────────────
**[CRITICAL]** — WCAG 2.1.1 Keyboard
Element: `<div onclick="submitOrder()">Submit</div>`
Issue: A non-interactive `<div>` with only a mouse click handler. No `tabindex`, no `role`, no keyboard handler — keyboard-only and switch-device users cannot reach or activate this control, which appears to be the primary action on the page.
Fix:
```diff
- <div onclick="submitOrder()">Submit</div>
+ <button type="button" onclick="submitOrder()">Submit</button>
```
───────────────────────────────────────────────────────────
**[CRITICAL]** — WCAG 3.3.2 Labels or Instructions
Element: `<input type="text" placeholder="Email address">`
Issue: Placeholder text is used as the only label. It disappears on input/autofill and is not reliably exposed to assistive tech as a programmatic label.
Fix:
```diff
- <input type="text" placeholder="Email address">
+ <label for="email">Email address</label>
+ <input type="text" id="email" placeholder="you@example.com">
```
───────────────────────────────────────────────────────────
**[SERIOUS]** — WCAG 2.4.4 Link Purpose (In Context)
Element: `<a href="/details" style="color:#999">click here</a>`
Issue: "click here" gives no indication of the link's destination or purpose out of context (a problem for screen-reader users navigating by links list).
Fix:
```diff
- <a href="/details" style="color:#999">click here</a>
+ <a href="/details">View product details</a>
```
───────────────────────────────────────────────────────────
**[SERIOUS]** — WCAG 2.4.7 Focus Visible
Element: `<style>a:focus { outline: none; }</style>`
Issue: Removes the default focus indicator on all links with no visible replacement — keyboard users lose track of where focus is on the page.
Fix:
```diff
- a:focus { outline: none; }
+ a:focus-visible { outline: 2px solid #0052cc; outline-offset: 2px; }
```
───────────────────────────────────────────────────────────
**[SERIOUS]** — WCAG 3.1.1 Language of Page
Element: `<html>`
Issue: No `lang` attribute — screen readers can't determine the correct pronunciation/voice profile for the page's language.
Fix:
```diff
- <html>
+ <html lang="en">
```
───────────────────────────────────────────────────────────
**[MODERATE]** — WCAG 1.3.1 Info and Relationships
Element: `<h1>Welcome</h1><h3>Our Products</h3>`
Issue: Heading levels skip from `h1` to `h3` with no `h2`, breaking the programmatic document outline that screen-reader users rely on to navigate by heading level.
Fix:
```diff
- <h1>Welcome</h1><h3>Our Products</h3>
+ <h1>Welcome</h1><h2>Our Products</h2>
```
───────────────────────────────────────────────────────────
**[MODERATE]** — WCAG 1.4.3 Contrast (Minimum) — `{UNVERIFIED — no computed background color provided}`
Element: `<a href="/details" style="color:#999">click here</a>`
Issue: `#999` on white would fail 4.5:1 (~2.8:1), but no background color/CSS context was provided for the page, so this can't be confirmed against the actual rendered background. Flagging as likely-fail pending verification.
Fix: Confirm actual background color; if white/light, darken link color to at least `#767676` on white (4.54:1) or add an underline plus sufficient contrast.
───────────────────────────────────────────────────────────
**[MINOR]** — WCAG 2.4.2 Page Titled
Element: `<title>Store</title>`
Issue: Title is present (technically passing) but generic — doesn't identify the specific page/purpose within the site.
Fix:
```diff
- <title>Store</title>
+ <title>Checkout — Store</title>
```
───────────────────────────────────────────────────────────
**NOT COVERED BY THIS AUDIT**
- Computed color contrast for the `#999` link (no background/CSS context supplied)
- Real screen-reader announcement behavior (NVDA/JAWS/VoiceOver)
- Dynamic focus management in JS-driven interactions (`submitOrder()` behavior is unknown)
- Touch target sizing on physical devices
- PDF/media captions (n/a for this snippet)
→ Recommend: automated pass with axe-core/WAVE + one manual screen-reader walkthrough before sign-off.
**DISCLAIMER**
This is a structural/code-level review of the markup provided, not a legal certification of ADA/WCAG conformance. Full conformance requires automated tooling and assistive-technology testing this audit did not perform.
═══════════════════════════════════════════════════════════
Want me to produce the fully remediated HTML file with all fixes applied inline?
Instant access
Commercial use
Money‑backBy purchasing this skill, you agree to our terms of service
1
Favorites
7
Views
Paste your HTML and get a real WCAG audit — not a vague "looks fine" or a wall of generic advice. This skill parses your actual markup, checks it against WCAG 2.1/2.2 Level A and AA success criteria organized by the four core principles (Perceivable, Operable, Understandable, Robust), and hands back exactly what's broken, why it fails, which success criterion it violates, and the fixed code.
...more
Added 3 hours ago
