Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

franklinnolasco7/wcag-accessibility-skill

Name: wcag-accessibility-skill
Author: franklinnolasco7

/SKILL.md

npx skillsauth add franklinnolasco7/wcag-accessibility-skill wcag-accessibility-skill

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Accessibility (a11y)

Comprehensive WCAG 2.2 guidelines. Make content usable by everyone.

References — load on demand

| Needed for | File | | ------------------ | ----------------------------------- | | Success criteria | references/WCAG.md | | Code patterns | references/A11Y-PATTERNS.md | | Full SC coverage | references/wcag-guides-full.md | | Term definitions | references/wcag-glossary.md | | Contrast ratios | references/quick-reference.md | | Testing procedures | references/testing-procedures.md | | VPAT structure | references/vpat-template-guide.md |

WCAG Principles: POUR

| Principle | Description | | ------------------ | ------------------------- | | Perceivable | Content can be perceived | | Ooperable | Interface can be operated | | Understandable | Content is understandable | | Robust | Works with AT |

Conformance Levels

| Level | Requirement | | ------- | -------------------------------------- | | A | Minimum (must pass) | | AA | Standard (legal in many jurisdictions) | | AAA | Enhanced (nice to have) |

Perceivable

Text Alternatives (1.1)

<img src="chart.png" alt="Q3 sales showing 40% increase" />
<!-- ✅ descriptive -->
<img src="decorative.png" alt="" role="presentation" />
<!-- ✅ decorative -->
<button aria-label="Open menu"><svg aria-hidden="true">...</svg></button>
<!-- ✅ icon button -->

Visually hidden class:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Color Contrast (1.4.3, 1.4.6)

| Text Size | AA | AAA | | -------------------- | ----- | ----- | | Normal text (< 18px) | 4.5:1 | 7:1 | | Large text (≥ 18px) | 3:1 | 4.5:1 | | UI components | 3:1 | 3:1 |

Media (1.2)

<video controls>
  <source src="video.mp4" />
  <track
    kind="captions"
    src="captions.vtt"
    srclang="en"
    label="English"
    default
  />
</video>
<details>
  <summary>Transcript</summary>
  <p>Full text...</p>
</details>

Operable

Keyboard (2.1)

element.addEventListener("keydown", (e) => {
  if (e.key === "Enter" || e.key === " ") {
    e.preventDefault();
    action();
  }
});

Focus Visible (2.4.7)

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Focus Not Obscured (2.4.11)

:focus {
  scroll-margin-top: 80px;
}

Skip Links (2.4.1)

Full pattern: see references/A11Y-PATTERNS.md#skip-link

Target Size (2.5.8)

Minimum 24 × 24 CSS pixels (AA).

button,
[role="button"] {
  min-width: 24px;
  min-height: 24px;
}

Motion (2.3)

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Understandable

Page Language (3.1.1)

<html lang="en">

Form Labels (3.3.2)

<label for="email">Email</label> <input id="email" autocomplete="email" />

Placeholder ≠ label.

Error Handling (3.3.1, 3.3.3)

<input aria-invalid="true" aria-describedby="error" />
<p id="error" role="alert">Please enter a valid email</p>

Accessible Authentication (3.3.8)

<input autocomplete="current-password" /> <button>Sign in with passkey</button>

Robust

ARIA (4.1.2)

Prefer native elements:

<button>Click</button>
<!-- ✅ -->
<div role="button">Click</div>
<!-- ❌ -->

Live Regions (4.1.3)

<div aria-live="polite">Saving...</div>

Testing

npx lighthouse https://example.com --only-categories=accessibility
axe https://example.com

Manual: keyboard nav, screen reader, 200% zoom, high contrast, reduced motion.

Screen reader commands: see references/A11Y-PATTERNS.md#screen-reader-commands

Common Issues

Critical

Missing form labels
Missing image alt text
Insufficient color contrast
Keyboard traps
No focus indicators

Serious

Missing page language
Missing headings
Non-descriptive link text
Auto-playing media
Missing skip links

Moderate

Missing ARIA labels
Inconsistent nav
Missing error messages
Timing without controls
Missing landmarks

Push Back

| Claim | Response | | ------------------------- | ------------------ | | "Scan passed = compliant" | Scans catch ~30% | | Placeholder as label | Fails SC 1.3.1 | | alt="image.png" | Meaningless | | tabindex="1" | Breaks focus order | | outline:none | Fails SC 2.4.7 |

VPAT / ACR

VPAT produces ACR — procurement document. Use VPAT 2.5 INT (WCAG 2.1 + 508 + EN 301 549).

Terms: Supports · Partially Supports · Does Not Support · Not Applicable · Not Evaluated.

Full guide: references/vpat-template-guide.md

Scripts

scripts/contrast-check.js — Batch hex contrast checker. scripts/wcag-audit-report.js — axe-core JSON → grouped WCAG report. scripts/aria-lint-rules.json — axe-core + eslint configs.

franklinnolasco7/wcag-accessibility-skill

/SKILL.md

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", "make accessible", "add alt text", or "fix contrast". Trigger on: accessibility, WCAG, ADA, Section 508, VPAT, alt text, color contrast, ARIA, keyboard navigation, screen readers, a11y, blind, deaf, motor impairment, cognitive disability, tabindex, landmark regions, skip link, captions, transcripts, axe-core, focus management, NVDA, JAWS, VoiceOver. Do not use for general HTML/CSS styling unrelated to accessibility.

development

Updated Apr 25, 2026

$ install --global

skillsauth

npx skillsauth add franklinnolasco7/wcag-accessibility-skill wcag-accessibility-skill

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: May 1, 2026, 8:22 AM197.3s1 file scanned

SKILL.md

name:: wcag-accessibility-skill
description:: >
license:: MIT
author:: wcag-accessibility-skill
version:: 2.2

Accessibility (a11y)

Comprehensive WCAG 2.2 guidelines. Make content usable by everyone.

References — load on demand

WCAG Principles: POUR

Conformance Levels

| Level | Requirement | | ------- | -------------------------------------- | | A | Minimum (must pass) | | AA | Standard (legal in many jurisdictions) | | AAA | Enhanced (nice to have) |

Perceivable

Text Alternatives (1.1)

<img src="chart.png" alt="Q3 sales showing 40% increase" />
<!-- ✅ descriptive -->
<img src="decorative.png" alt="" role="presentation" />
<!-- ✅ decorative -->
<button aria-label="Open menu"><svg aria-hidden="true">...</svg></button>
<!-- ✅ icon button -->

Visually hidden class:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Color Contrast (1.4.3, 1.4.6)

| Text Size | AA | AAA | | -------------------- | ----- | ----- | | Normal text (< 18px) | 4.5:1 | 7:1 | | Large text (≥ 18px) | 3:1 | 4.5:1 | | UI components | 3:1 | 3:1 |

Media (1.2)

<video controls>
  <source src="video.mp4" />
  <track
    kind="captions"
    src="captions.vtt"
    srclang="en"
    label="English"
    default
  />
</video>
<details>
  <summary>Transcript</summary>
  <p>Full text...</p>
</details>

Operable

Keyboard (2.1)

element.addEventListener("keydown", (e) => {
  if (e.key === "Enter" || e.key === " ") {
    e.preventDefault();
    action();
  }
});

Focus Visible (2.4.7)

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Focus Not Obscured (2.4.11)

:focus {
  scroll-margin-top: 80px;
}

Skip Links (2.4.1)

Full pattern: see references/A11Y-PATTERNS.md#skip-link

Target Size (2.5.8)

Minimum 24 × 24 CSS pixels (AA).

button,
[role="button"] {
  min-width: 24px;
  min-height: 24px;
}

Motion (2.3)

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Understandable

Page Language (3.1.1)

<html lang="en">

Form Labels (3.3.2)

<label for="email">Email</label> <input id="email" autocomplete="email" />

Placeholder ≠ label.

Error Handling (3.3.1, 3.3.3)

<input aria-invalid="true" aria-describedby="error" />
<p id="error" role="alert">Please enter a valid email</p>

Accessible Authentication (3.3.8)

<input autocomplete="current-password" /> <button>Sign in with passkey</button>

Robust

ARIA (4.1.2)

Prefer native elements:

<button>Click</button>
<!-- ✅ -->
<div role="button">Click</div>
<!-- ❌ -->

Live Regions (4.1.3)

<div aria-live="polite">Saving...</div>

Testing

npx lighthouse https://example.com --only-categories=accessibility
axe https://example.com

Manual: keyboard nav, screen reader, 200% zoom, high contrast, reduced motion.

Screen reader commands: see references/A11Y-PATTERNS.md#screen-reader-commands

Common Issues

Critical

Missing form labels
Missing image alt text
Insufficient color contrast
Keyboard traps
No focus indicators

Serious

Missing page language
Missing headings
Non-descriptive link text
Auto-playing media
Missing skip links

Moderate

Missing ARIA labels
Inconsistent nav
Missing error messages
Timing without controls
Missing landmarks

Push Back

VPAT / ACR

VPAT produces ACR — procurement document. Use VPAT 2.5 INT (WCAG 2.1 + 508 + EN 301 549).

Terms: Supports · Partially Supports · Does Not Support · Not Applicable · Not Evaluated.

Full guide: references/vpat-template-guide.md

Scripts

scripts/contrast-check.js — Batch hex contrast checker. scripts/wcag-audit-report.js — axe-core JSON → grouped WCAG report. scripts/aria-lint-rules.json — axe-core + eslint configs.

Related Skills

openclaw/openclaw-secret-scanning-maintainer

development

VerifiedTrustedCommunity

Maintainer-only workflow for handling GitHub Secret Scanning alerts on OpenClaw. Use when Codex needs to triage, redact, clean up, and resolve secret leakage found in issue comments, issue bodies, PR comments, or other GitHub content.

357,764SKILL.mdUpdated Apr 15, 2026

openclaw/openclaw-secret-scanning-maintainer

openclaw/openclaw-release-maintainer

development

VerifiedTrustedCommunity

Maintainer workflow for OpenClaw releases, prereleases, changelog release notes, and publish validation. Use when Codex needs to prepare or verify stable or beta release steps, align version naming, assemble release notes, check release auth requirements, or validate publish-time commands and artifacts.

357,764SKILL.mdUpdated Apr 10, 2026

openclaw/openclaw-release-maintainer

openclaw/openclaw-qa-testing

development

VerifiedTrustedCommunity

Run, watch, debug, and extend OpenClaw QA testing with qa-lab and qa-channel. Use when Codex needs to execute the repo-backed QA suite, inspect live QA artifacts, debug failing scenarios, add new QA scenarios, or explain the OpenClaw QA workflow. Prefer the live OpenAI lane with regular openai/gpt-5.4 in fast mode; do not use gpt-5.4-pro or gpt-5.4-mini unless the user explicitly overrides that policy.

357,764SKILL.mdUpdated Apr 10, 2026

openclaw/openclaw-qa-testing

openclaw/openclaw-parallels-smoke

development

VerifiedTrustedCommunity

End-to-end Parallels smoke, upgrade, and rerun workflow for OpenClaw across macOS, Windows, and Linux guests. Use when Codex needs to run, rerun, debug, or interpret VM-based install, onboarding, gateway smoke tests, latest-release-to-main upgrade checks, fresh snapshot retests, or optional Discord roundtrip verification under Parallels.

357,764SKILL.mdUpdated Apr 10, 2026

openclaw/openclaw-parallels-smoke

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/franklinnolasco7/wcag-accessibility-skill.git

# Copy into Claude Code skills folder (global)
cp -r wcag-accessibility-skill/ ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

franklinnolasco7/wcag-accessibility-skill

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT