Skip to content
cccskills
FreePublished on GitHub

a11y-audit

This skill should be used when the user asks to "check accessibility", "audit WCAG compliance", "scan HTML for a11y issues", "check color contrast", or "find accessibility violations in web pages".

The English summary is being prepared. Showing the original description.

See how to install

Files included (5)

  • SKILL.md4.9 KB
  • examples/sample-page.html5.6 KB
  • references/wcag-guidelines.md4.6 KB
  • scripts/a11y_scanner.py14.8 KB
  • scripts/contrast_checker.py10.7 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Accessibility Audit

Category: Engineering Domain: Web Accessibility

Overview

The Accessibility Audit skill provides automated scanning of HTML files for WCAG 2.1 compliance violations and color contrast checking against AA/AAA standards. It catches missing alt text, broken heading hierarchies, unlabeled form inputs, and insufficient color contrast early in development.

Clarify First

Before running the audit, confirm these inputs. If any is unknown or vague, ASK — do not assume:

  • Target & scope — which HTML files, directory, or CSS to scan (determines what gets checked and the --file/--dir/--css arguments)
  • Conformance level — A, AA, or AAA target (sets contrast thresholds and which violations are CRITICAL vs WARNING vs INFO)
  • Use context — one-off remediation vs CI gate (drives --strict gating and JSON output)

Stop rule: ask only the 2-3 that most change the output. If the user says "just draft it," proceed and list your assumptions at the top of the artifact.

Quick Start

# Scan HTML for WCAG violations
python scripts/a11y_scanner.py --file index.html

# Scan a directory of HTML files
python scripts/a11y_scanner.py --dir ./src/templates

# Check color contrast
python scripts/contrast_checker.py --foreground "#333333" --background "#ffffff"

# Parse CSS file for contrast issues
python scripts/contrast_checker.py --css styles.css

# JSON output for CI
python scripts/a11y_scanner.py --file index.html --format json

Tools Overview

a11y_scanner.py

Scans HTML files for WCAG 2.1 violations including structural, semantic, and interactive element issues.

FeatureDescription
Image alt textDetects missing or empty alt on non-decorative images
Heading hierarchyValidates h1-h6 levels are sequential
Form labelsEnsures inputs have associated label elements
ARIA attributesChecks ARIA usage correctness
Link textFlags generic text like "click here" or "read more"
Language attributeChecks for lang on html element
Tab orderDetects positive tabindex values
LandmarksValidates semantic landmark usage

contrast_checker.py

Checks color contrast ratios against WCAG AA and AAA thresholds.

FeatureDescription
Ratio calculationComputes relative luminance contrast ratio
AA compliance4.5:1 normal text, 3:1 large text
AAA compliance7:1 normal text, 4.5:1 large text
CSS parsingExtracts color/background pairs from CSS
Color suggestionsRecommends nearest compliant color

Workflows

Full Accessibility Audit

  1. Scan HTML - Run a11y_scanner.py on all templates
  2. Check contrast - Run contrast_checker.py on stylesheets
  3. Triage - Prioritize Level A violations first
  4. Remediate - Fix critical issues (alt text, form labels, headings)
  5. Re-scan - Verify fixes pass all checks

CI Integration

# Gate on Level A violations
python scripts/a11y_scanner.py --dir ./templates --format json --level A --strict

# Check CSS contrast
python scripts/contrast_checker.py --css ./static/css/main.css --format json

Development Workflow

  1. Pre-commit - Quick scan of changed HTML files
  2. PR review - Full scan as part of review checklist
  3. Staging audit - Comprehensive scan before release
  4. Monitoring - Regular scheduled audits

Reference Documentation

Common Patterns Quick Reference

WCAG Levels

LevelDescriptionTypical Requirement
AMinimum baselineLegal compliance
AAIndustry standardMost regulations, ADA
AAAEnhancedBest practice goal

Contrast Ratios

ContextAAAAA
Normal text (<18pt)4.5:17:1
Large text (>=18pt bold or >=14pt)3:14.5:1
UI components3:13:1

Quick Fixes

IssueFix
Missing alt text<img alt="Description of image">
Skipped headingUse sequential h1 through h6
No form label<label for="inputId">Label</label>
Generic link textReplace "click here" with descriptive text
Missing lang<html lang="en">
Positive tabindexUse tabindex="0" or tabindex="-1" only

Severity Mapping

  • CRITICAL - WCAG Level A violations
  • WARNING - WCAG Level AA violations
  • INFO - WCAG Level AAA recommendations

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Design and run statistically rigorous A/B tests and experiments. Use when planning experiments, calculating sample sizes, designing test variants, selecting metrics, analyzing results, or when someone says "let's test that."

The English summary is being prepared. Showing the original description.

borghei/Claude-Skills942Updated Oct 7, 2026

Design and analyze A/B tests: sample size, test duration, and statistical significance for conversion experiments. Use when setting up an A/B test, calculating sample size, designing an experiment, or analyzing results.

The English summary is being prepared. Showing the original description.

borghei/Claude-Skills942Updated Oct 7, 2026

Sales execution across pipeline, discovery, demos, negotiation, and closing. Use when qualifying opportunities, running MEDDIC discovery, building account plans, handling objections, structuring proposals, or forecasting pipeline.

The English summary is being prepared. Showing the original description.

borghei/Claude-Skills942Updated Oct 7, 2026

Design ad creative across Google, Meta, LinkedIn, Twitter/X, and TikTok with platform format specs, headline formulas, and A/B testing. Use when writing ad copy, generating headline variations, creating ad sets, or validating creative.

The English summary is being prepared. Showing the original description.

borghei/Claude-Skills942Updated Oct 7, 2026

aeo

Free

Answer Engine Optimization (AEO): optimize content to be cited by LLMs (ChatGPT, Claude, Perplexity, Gemini) in their answers. Use when designing content for LLM citation, auditing citability, or structuring Q&A schema.

The English summary is being prepared. Showing the original description.

borghei/Claude-Skills942Updated Oct 7, 2026

Designs multi-agent system architectures with orchestration patterns, tool schemas, and performance evaluation. Use when building AI agent systems, designing agent workflows, creating tool schemas, or evaluating agent performance.

The English summary is being prepared. Showing the original description.

borghei/Claude-Skills942Updated Oct 7, 2026

See all skills by borghei

Report a problem with this skill