WCAG Accessibility — Testing, Fixing, and Building Accessible Pages
Build, audit, and repair web content against WCAG 2.2. Use when: (1) creating accessible HTML/CSS/JS, (2) remediating accessibility defects, (3) running reproducible automated audits, (4) preparing WCAG 2.2 AAA evidence and human-test records, or (5) running the optional AI-WCAG-Gauntlet benchmark.
Rank
62
Safety
84
Downloads
1.2k
Updated
Oct 10, 2026
Version
2.0.12
Source
CLAWHUB
About
What it does, and when to use it.
Capability contract not published. No trust telemetry is available yet. 1.2K downloads reported by the source. Last updated 10/10/2026.
Avoid when
- Contract metadata is missing or unavailable for deterministic execution.
Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing
Public facts
Every fact links back to the source it came from.
- Vendor
- Clawhubvendor · observed Oct 10, 2026
- Protocol compatibility
- OpenClawcompatibility · observed Oct 10, 2026
- Adoption signal
- 1.2K downloadsadoption · observed Oct 10, 2026
- Latest release
- 2.0.12release · observed Sep 24, 2026
- Handshake status
- UNKNOWNsecurity
Install and run
Setup complexity: low.
clawhub skill install s17bae7fbjn4v6jxszm9cbw1eh8bkdgw:wcag-skill- Install using `clawhub skill install s17bae7fbjn4v6jxszm9cbw1eh8bkdgw:wcag-skill` in an isolated environment before connecting it to live workloads.
- No published capability contract is available yet, so validate auth and request/response behavior manually.
- Review the upstream CLAWHUB listing at https://clawhub.ai/turbolego/wcag-skill before using production credentials.
Contract: missing
curl -s "https://www.xpersona.co/api/v1/agents/clawhub-turbolego-wcag-skill/snapshot"
Documentation
CLAWHUB
155,640 characters of source documentation, loaded on request.
Extracted files
5 files captured from the source.
SKILL.md
---
name: wcag-skill
description: "Build, audit, and repair web content against WCAG 2.2. Use when: (1) creating accessible HTML/CSS/JS, (2) remediating accessibility defects, (3) running reproducible automated audits, (4) preparing WCAG 2.2 AAA evidence and human-test records, or (5) running the optional AI-WCAG-Gauntlet benchmark."
metadata:
version: 2.0.12
openclaw:
requires:
bins:
- node
- npm
- python3
- curl
- java
envVars:
- name: AXE_CHROME_PATH
required: false
description: Explicit Chrome/Chromium binary path for scripts/a11y-audit.sh when auto-detection fails.
- name: AXE_CHROMEDRIVER_PATH
required: false
description: Explicit Chromedriver binary path for scripts/a11y-audit.sh when auto-detection fails.
install:
- kind: node
package: "@axe-core/cli"
bins: [axe]
- kind: node
package: pa11y
bins: [pa11y]
- kind: node
package: "@qualweb/cli"
bins: [qw]
- kind: node
package: vnu-jar
bins: [vnu]
- kind: node
package: chromedriver
bins: [chromedriver]
homepage: https://github.com/turbolego/wcag-skill
---
# WCAG 2.2 Accessibility
Use this skill to build or audit web content. Prefer native HTML, test through
HTTP, and treat automated output as evidence—not proof of conformance.
## Choose the scope first
1. Inventory every route, breakpoint, interactive state, overlay, error path,
media item, authentication step, and third-party component in scope.
2. Set the target: `baseline`, `AA`, or `AAA`.
3. For an AAA target, read **all three** references before implementation:
- [`references/validator-workflow.md`](references/validator-workflow.md)
- [`references/aaa-evidence-matrix.md`](references/aaa-evidence-matrix.md)
- [`references/manual-test-protocol.md`](references/manual-test-protocol.md)
> Do not say “WCAG AAA compliant” from automated results. Level AAA requires
> every applicable A, AA, and AAA success criterion for the full page and any
> complete process. Record an explicit evidence row or non-applicability
> rationale for each criterion.
## Build accessible by default
- Use one `<main>`, a meaningful `<title>`, one clear `<h1>`, and landmarks
only where their semantics help orientation. Use `<section>` for a meaningful
thematic grouping; give it an accessible heading when that improves its name.
Use `<div>` for visual grouping alone.
- Use real `<a>`, `<button>`, `<input>`, `<select>`, `<textarea>`, and native
disclosure/dialog patterns before inventing ARIA widgets. Never put a
focusable element inside `aria-hidden="true"` content.
- Give informative images equivalent text; use `alt=""` only for decorative
images. Provide the relevant captions, transcript, audio description, or
media alternative for media.
- Label every form control, group related controls with `<fieldset><legend>`,
use abenchmark/README.md
# Optional AI-WCAG-Gauntlet extension This directory supports the AI-WCAG-Gauntlet experiment. It is separate from the production WCAG workflow because tag-count coverage is a benchmark constraint, not evidence of WCAG conformance. ## Use only for an explicit benchmark request 1. Run the Gauntlet setup in its own repository to create a fresh submission directory. 2. Write original HTML, CSS, and scripts in that submission directory. 3. Run the local pre-check from this extension: ```bash python3 benchmark/scripts/check-tag-coverage.py <submission-directory>/index.html ``` 4. Run the Gauntlet test suite and retain its output separately from production accessibility reports. ## Integrity rule `benchmark/templates/` is reference material only. Do not copy a template or the bare starter into a benchmark submission. A valid benchmark run must contain an original implementation tailored to its prompt. The tag checker uses `benchmark/resources/html_tags.json` and no longer relies on an absent root-level `resources/` directory.
_meta.json
{
"ownerId": "kn7fmyse3t502fgrgyjqg7q2c98bk706",
"slug": "wcag-skill",
"version": "2.0.12",
"publishedAt": 1790237018815
}benchmark/references/ai-wcag-gauntlet-iteration-log.md
# AI-WCAG-Gauntlet Iteration Log — DeepSeek V4 Pro (passing run, 6 iterations)
Reference for error strings, score progression, and fix history. Repo:
`turbolego/AI-WCAG-Gauntlet` (private; clone with `gh repo clone turbolego/AI-WCAG-Gauntlet`
or another scoped auth method — do not reference local credential files).
Model under test: `deepseek-ai/deepseek-v4-pro` via nvidia provider, label "Hermes".
## Score progression
| Iter | Score | HTML_TAG | W3C | AXE | Note |
|------|--------|----------|-----|-----|------|
| 1 | 12.50 | 107 | 0 | 2 | bare page, no `<main>` (landmark-one-main, region) |
| 2 | 86.40 | 18 | 0 | 1 | added ~90 tags; target-size remains |
| 3 | 12.50 | 0 | 43 | 1 | bad bulk rewrite → structural errors |
| 4 | 96.80 | 0 | 4 | 1 | clean rewrite |
| 5 | 98.80 | 0 | 2 | 1 | CSS not loading (base href) |
| 6 | 168.18 | 0 | 0 | 0 | ✅ PASS |
## Exact error strings seen
- W3C: `Element "selectedcontent" not allowed as child of element "select" in this context.`
- W3C: `End tag "main" seen, but there were open elements.` + `Unclosed element "section".`
(line points at the FIRST section, not the offending one)
- W3C: `The element "audio" with the attribute "controls" must not appear as a descendant
of the "a" element.` (same for video/details/dialog/button/embed/iframe/label/input/
select/textarea)
- W3C: `Stray end tag "fieldset".`
- AXE: `target-size — All touch targets must be 24px large, or leave sufficient space`
→ `Target has insufficient size (39.1px by 18px...)` and/or
`Safe clickable space has a diameter of 12px instead of at least 24px.`
- AXE (iter 1): `landmark-one-main` + `region` — page had no `<main>`, h1 outside landmark.
## Key fixes
1. `<base href="/AI-WCAG-Gauntlet/">` is injected into generated pages (matches GitHub
Pages deployment). Any RELATIVE `href`/`src` (style.css, scripts/dummy.js) resolves
against it → 404 at repo root → CSS never applied → axe target-size kept failing.
Fix: absolute URLs with %20 encoding:
`/AI-WCAG-Gauntlet/benchmarks/DeepSeek%20V4%20Pro/<folder>/style.css`.
2. `<selectedcontent>` (new-ish HTML element, required by html_tags.json) fails W3C
inside `<select>` but passes inside a plain `<div>`. The tag checker only greps for
the literal string.
3. target-size fix: `nav a { min-height: 24px; display: inline-block; padding: 4px 6px; margin: 2px; }`
(min-height is the critical part; inline style in `<head>` also works).
4. Tag coverage: HTML comments are stripped by a custom scanner (see strip_comments()) before `TAG_RE = r"<\s*([a-zA-Z][a-zA-Z0-9\-]*)\b"` via `re.findall`,
set-diff'd against `benchmark/resources/html_tags.json` (113 tags including
`selectedcontent`). The scanner tracks quote state only within tag context to
avoid false positives on attribute values containing `<!--`. Because comments
are stripped, commented tag literals do NOT count toward coverage benchmark/references/checker-pitfalls.md
# Checker Pitfalls Edge cases that trip up `check-tag-coverage.py` and tag-balance logic. All cases are verified against `benchmark/resources/html_tags.json` (113 tags). ## HTML comments do not count toward coverage `check_coverage` strips HTML comments (`<!-- ... -->`) before running `TAG_RE` against the document. A commented-out `<base>` literal does NOT count as base coverage. **Always use a real element** for tags required by `benchmark/resources/html_tags.json` — a `<base target="_self">` satisfies the tag requirement without rewriting relative URLs. ## Optional-end-tag tracking is context-sensitive, not global A stray end tag for an optional-end-tag element (e.g. `</li>`, `</p>`, `</rp>`) is **always a parse error** unless that exact element was implicitly closed earlier by an `AUTO_CLOSE_ON_OPEN` rule. Tracking by tag name alone causes false negatives: `<p>one<div>two</div><p>three</p></p>` passes because the second `</p>` sees `p` was "previously" implied-closed, even though no `<p>` is open at that point. Correct approach: handle all implied closes in `handle_starttag` (pop from stack via AUTO_CLOSE_ON_OPEN). A tag not present in the stack at the time of `handle_endtag` has no valid open context and is always an error. ## Void elements close open optional-end-tag elements Per HTML5 parsing, a void element (e.g. `<hr>`) implicitly closes a preceding open `<p>` (or other optional-end-tag element). The checker must apply `AUTO_CLOSE_ON_OPEN` rules *before* the void-element early return in `handle_starttag`, or `<p>text<hr>` leaves an unclosed `<p>`. ## Ruby optional end tags `<rt>` and `</rp>` have optional end tags in HTML5: - `</rt>` before another `<rt>` is legally omitted (self-closes the previous) - `</rp>` at end of ruby or before `<rt>` is legally omitted Add `rt`/`rp` to `OPTIONAL_END_TAGS` and their close rules to `AUTO_CLOSE_ON_OPEN`. ## Table header scope in tfoot `<tfoot>` row labels use `scope="row"` (the label describes the row). `scope="col"` associates the cell with a column instead. For a footer summary row like "Average", `scope="row"` is semantically correct. ## Template <base> vs harness <base> The AI-WCAG-Gauntlet harness injects `<base href="/AI-WCAG-Gauntlet/">` into benchmark pages. A benchmark template should NOT include its own `<base href=...>` (duplicate base elements cause the first to control relative URLs). Use a bare `<base>` (no href) solely for tag-coverage compliance, or rely on the harness-injected base for URL resolution.
AionUi
Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!
activepieces
AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents
cherry-studio
AI productivity studio with smart chat, autonomous agents, and 300+ assistants.
CopilotKit
The Frontend for Agents & Generative UI. React + Angular
Machine-readable data
The same record, as JSON, for agents and crawlers.
{
"facts": [
{
"factKey": "vendor",
"category": "vendor",
"label": "Vendor",
"value": "Clawhub",
"href": "https://clawhub.ai/turbolego/skills/wcag-skill",
"sourceUrl": "https://clawhub.ai/turbolego/skills/wcag-skill",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-10-10T22:26:14.168Z",
"isPublic": true
},
{
"factKey": "protocols",
"category": "compatibility",
"label": "Protocol compatibility",
"value": "OpenClaw",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-turbolego-wcag-skill/contract",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-turbolego-wcag-skill/contract",
"sourceType": "contract",
"confidence": "medium",
"observedAt": "2026-10-10T22:26:14.168Z",
"isPublic": true
},
{
"factKey": "traction",
"category": "adoption",
"label": "Adoption signal",
"value": "1.2K downloads",
"href": "https://clawhub.ai/turbolego/wcag-skill",
"sourceUrl": "https://clawhub.ai/turbolego/wcag-skill",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-10-10T22:26:14.168Z",
"isPublic": true
},
{
"factKey": "latest_release",
"category": "release",
"label": "Latest release",
"value": "2.0.12",
"href": "https://clawhub.ai/turbolego/wcag-skill",
"sourceUrl": "https://clawhub.ai/turbolego/wcag-skill",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-09-24T08:03:38.815Z",
"isPublic": true
},
{
"factKey": "handshake_status",
"category": "security",
"label": "Handshake status",
"value": "UNKNOWN",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-turbolego-wcag-skill/trust",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-turbolego-wcag-skill/trust",
"sourceType": "trust",
"confidence": "medium",
"observedAt": null,
"isPublic": true
}
],
"events": [
{
"eventType": "release",
"title": "Release 2.0.12",
"description": "Version 2.0.12 - Updated SKILL.md to clarify and refine guidance; expanded documentation. - Incremented version in metadata to 2.0.12. - Removed obsolete skill-card.md file.",
"href": "https://clawhub.ai/turbolego/wcag-skill",
"sourceUrl": "https://clawhub.ai/turbolego/wcag-skill",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-09-24T08:03:38.815Z",
"isPublic": true
}
]
}Record generated Oct 10, 2026.
