Skills Guide

WCAG 2.1 AA Validator

VerifiedSafe

Automatically validates Moodle templates, JavaScript, and CSS for WCAG 2.1 Level AA accessibility compliance. Checks semantic HTML, ARIA patterns, keyboard navigation, and screen reader compatibility.

Download and use
Sby Skills Guide Bot
TestingIntermediate
3/4/2026
Claude Code
#accessibility#wcag#moodle#mustache#a11y

Recommended for

Claude CodeTest generationQA / test engineer

Automated summary

This skill automatically validates Moodle Mustache templates, AMD JavaScript modules and CSS/SCSS files against WCAG 2.1 Level AA accessibility requirements.

Strengths

  • Covers a wide range of checks: HTML semantics, landmarks, alt text, forms, interactive components and color contrast.
  • Provides concrete, copy-pasteable code examples, including form error handling and loading states.
  • Activates automatically on typical Moodle files (.mustache, amd/src/*.js, SCSS), fitting smoothly into the existing development workflow.
  • Pays specific attention to ARIA patterns and screen reader compatibility.

Limitations

  • Scoped to Moodle and its technical stack; examples do not transfer directly to other frameworks.
  • The skill describes a validation checklist but does not specify an automated testing method or a contrast-checking tool.
  • Only covers the listed items; some WCAG 2.1 AA criteria (motion, timeouts, flashing content) are not addressed in the supplied document.
When to use it

Use it whenever you edit a Moodle Mustache template, AMD module or stylesheet and want to verify accessibility before shipping.

When not to use it

Avoid it if you are working on a non-Moodle web interface or need a full accessibility audit covering every WCAG 2.1 AA criterion.

Security analysis

Safe
Quality score80/100

The skill is a documentation/checklist style guidance file for WCAG 2.1 AA validation in Moodle. It declares Read, Grep, and Bash as allowed tools, but the entire body consists of illustrative HTML/JavaScript accessibility examples (ARIA roles, form labels, focus-trap helper code) — there are no instructions to execute shell commands, install packages, fetch remote content, exfiltrate data, modify files destructively, or bypass safety controls. Bash is only implied for linting/grep-style checks, a legitimate use. No obfuscation or hidden payloads are present.

No concerns found

How this analysis is made

Examples

Audit a Moodle template
Review this Mustache template for WCAG 2.1 AA compliance — check heading hierarchy, landmarks, alt text and ARIA attributes, and tell me exactly what to fix.
Fix an accessible form
This Moodle form uses aria-invalid and aria-describedby for errors. Validate that the markup meets WCAG 2.1 AA and correct any issues with label association or required fields.
Check AMD module keyboard support
Look at amd/src/dropdown.js and verify the keyboard navigation and ARIA roles for this interactive component against WCAG 2.1 AA.

name: wcag-validator description: Automatically validate Moodle templates, JavaScript, and CSS for WCAG 2.1 Level AA accessibility compliance. Checks semantic HTML, ARIA patterns, keyboard navigation, color contrast, and screen reader compatibility. Activates when working with Mustache templates, AMD modules, or discussing accessibility, a11y, WCAG, screen readers, or keyboard navigation. allowed-tools: Read, Grep, Bash

WCAG 2.1 AA Validator Skill

Automatic Activation

This skill activates when:

  • Working with Mustache templates (*.mustache files)
  • Editing AMD JavaScript modules (amd/src/*.js)
  • Modifying CSS/SCSS files
  • User mentions: "accessibility", "a11y", "WCAG", "screen reader", "keyboard", "contrast", "ARIA"
  • Implementing forms, modals, dynamic content
  • Creating interactive UI components

Validation Checklist

1. HTML Semantics & Structure

✓ Proper Document Structure

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Descriptive Page Title</title>
    </head>
    <body>
        <!-- Content -->
    </body>
</html>

✓ Heading Hierarchy

  • Single h1 per page
  • No skipped levels (h2 → h4 ❌)
  • Logical document outline

✓ Semantic Elements

  • <nav>, <main>, <aside>, <footer>, <article>, <section>
  • Not <div> for everything

✓ Landmarks

<header role="banner">
<nav role="navigation" aria-label="Main">
<main role="main">
<aside role="complementary">
<footer role="contentinfo">

2. Images & Media

✓ Alt Text

<!-- Informative image -->
<img src="chart.png" alt="Bar chart showing 60% increase in completion rates">

<!-- Decorative image -->
<img src="divider.png" alt="" role="presentation">

<!-- Linked image -->
<a href="/course/view.php?id=1">
    <img src="icon.png" alt="Go to Introduction to Programming course">
</a>

✓ Complex Images

<img src="diagram.png"
     alt="Process flowchart"
     aria-describedby="diagram-desc">
<div id="diagram-desc" class="sr-only">
    Detailed description: The process starts with...
</div>

3. Forms & Inputs

✓ Label Association

<!-- Explicit association -->
<label for="username">Username</label>
<input type="text" id="username" name="username">

<!-- Implicit association -->
<label>
    Email
    <input type="email" name="email">
</label>

✓ Required Fields

<label for="folder">
    Folder name
    <span class="text-danger" aria-label="required">*</span>
</label>
<input type="text"
       id="folder"
       required
       aria-required="true">

✓ Error Handling

<div class="form-group {{#error}}has-error{{/error}}">
    <label for="email">Email</label>
    <input type="email"
           id="email"
           aria-invalid="{{#error}}true{{/error}}"
           aria-describedby="{{#error}}email-error{{/error}}">
    {{#error}}
    <div id="email-error" class="text-danger" role="alert">
        {{error}}
    </div>
    {{/error}}
</div>

✓ Field Instructions

<label for="password">Password</label>
<input type="password"
       id="password"
       aria-describedby="password-requirements">
<small id="password-requirements">
    Must be at least 8 characters with one number
</small>

4. Interactive Elements

✓ Buttons

<!-- Text button -->
<button type="button">Save Changes</button>

<!-- Icon button -->
<button type="button" aria-label="Delete file">
    <i class="fa fa-trash" aria-hidden="true"></i>
</button>

<!-- Loading state -->
<button type="submit" aria-busy="true">
    <span class="spinner" aria-hidden="true"></span>
    Loading...
</button>

✓ Links

<!-- Descriptive text -->
<a href="file.pdf">Download assignment guidelines (PDF, 2MB)</a>

<!-- Icon link -->
<a href="/edit" aria-label="Edit folder settings">
    <i class="fa fa-edit" aria-hidden="true"></i>
</a>

<!-- External link -->
<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
    External resource
    <span class="sr-only">(opens in new window)</span>
</a>

✓ Skip Links

<a href="#main-content" class="sr-only sr-only-focusable">
    Skip to main content
</a>

5. ARIA Patterns

✓ Live Regions

<!-- Polite announcements (non-urgent) -->
<div aria-live="polite" aria-atomic="true" class="sr-only"></div>

<!-- Assertive announcements (urgent) -->
<div aria-live="assertive" aria-atomic="true" class="sr-only"></div>

<!-- Status updates -->
<div role="status" aria-live="polite">
    File uploaded successfully
</div>

<!-- Alerts -->
<div role="alert">
    Error: Connection failed
</div>

✓ Dialogs/Modals

<div role="dialog"
     aria-labelledby="dialog-title"
     aria-describedby="dialog-desc"
     aria-modal="true">
    <h2 id="dialog-title">Confirm Deletion</h2>
    <p id="dialog-desc">Are you sure you want to delete this file?</p>
    <button type="button" class="btn-danger">Delete</button>
    <button type="button" class="btn-secondary">Cancel</button>
</div>

✓ Tabs

<div role="tablist" aria-label="Content views">
    <button role="tab"
            aria-selected="true"
            aria-controls="tree-panel"
            id="tree-tab">
        Tree View
    </button>
    <button role="tab"
            aria-selected="false"
            aria-controls="table-panel"
            id="table-tab"
            tabindex="-1">
        Table View
    </button>
</div>
<div role="tabpanel"
     id="tree-panel"
     aria-labelledby="tree-tab">
    <!-- Tree view content -->
</div>
<div role="tabpanel"
     id="table-panel"
     aria-labelledby="table-tab"
     hidden>
    <!-- Table view content -->
</div>

6. Keyboard Navigation

✓ Focus Management

// ✅ Trap focus in modal
const trapFocus = (element) => {
    const focusableElements = element.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    const firstElement = focusableElements[0];
    const lastElement = focusableElements[focusableElements.length - 1];

    element.addEventListener('keydown', (e) => {
        if (e.key === 'Tab') {
            if (e.shiftKey && document.activeElement === firstElement) {
                e.preventDefault();
                lastElement.focus();
            } else if (!e.shiftKey && document.activeElement === lastElement) {
                e.preventDefault();
                firstElement.focus();
            }
        }
    });
};

// ✅ Return focus after modal closes
let previousFocus = null;

const openModal = (modal) => {
    previousFocus = document.activeElement;
    modal.showModal();
    modal.querySelector('button').focus();
};

const closeModal = (modal) => {
    modal.close();
    if (previousFocus) {
        previousFocus.focus();
    }
};

✓ Keyboard Event Handlers

// ✅ Handle both click and keyboard
element.addEventListener('click', handleAction);
element.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        handleAction();
    }
});

// ✅ Escape to close
dialog.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        closeDialog();
    }
});

7. Color & Contrast

✓ Contrast Ratios (WCAG AA)

  • Normal text (< 18pt): 4.5:1 minimum
  • Large text (≥ 18pt or 14pt bold): 3.0:1 minimum
  • UI components & graphics: 3.0:1 minimum
/* ❌ Poor contrast (2.8:1) */
.text {
    color: #999;
    background: #fff;
}

/* ✅ Good contrast (4.7:1) */
.text {
    color: #666;
    background: #fff;
}

/* ✅ Excellent contrast (7.0:1) */
.text {
    color: #333;
    background: #fff;
}

✓ Don't Rely on Color Alone

<!-- ❌ Color only -->
<span style="color: red;">Error</span>

<!-- ✅ Color + icon + text -->
<span class="text-danger">
    <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
    Error: Invalid input
</span>

8. Dynamic Content

✓ Screen Reader Announcements

// ✅ Announce loading state
const announceLoading = () => {
    const liveRegion = document.querySelector('[aria-live="polite"]');
    liveRegion.textContent = 'Loading files...';
};

// ✅ Announce completion
const announceComplete = (count) => {
    const liveRegion = document.querySelector('[aria-live="polite"]');
    liveRegion.textContent = `${count} files loaded successfully`;
    setTimeout(() => {
        liveRegion.textContent = '';
    }, 1000);
};

// ✅ Announce errors
const announceError = (message) => {
    const liveRegion = document.querySelector('[aria-live="assertive"]');
    liveRegion.textContent = `Error: ${message}`;
};

Validation Workflow

Step 1: Automated Scan

# Use grep to find potential issues
grep -r "onclick=" templates/  # Check for click handlers on non-buttons
grep -r "<img" templates/ | grep -v "alt="  # Find images without alt
grep -r "<input" templates/ | grep -v "label"  # Find unlabeled inputs

Step 2: Template Analysis

For each .mustache file:

  1. Check heading hierarchy
  2. Verify form label associations
  3. Ensure buttons have accessible text
  4. Validate ARIA usage
  5. Check color contrast in CSS

Step 3: JavaScript Analysis

For each AMD module:

  1. Check keyboard event handlers
  2. Verify focus management
  3. Validate live region updates
  4. Check for focus traps
  5. Ensure escape key handling

Step 4: Generate Report

♿ Accessibility Validation Report

File: templates/folder_view.mustache
Status: ❌ FAILED (3 issues)

Issues:
❌ Line 45: Image missing alt attribute
   <img src="{{icon}}">
   Fix: <img src="{{icon}}" alt="{{iconDescription}}">

❌ Line 78: Button not keyboard accessible
   <div onclick="deleteFile()">Delete</div>
   Fix: <button type="button" onclick="deleteFile()">Delete</button>

❌ Line 102: Form input missing label
   <input type="text" name="foldername">
   Fix: <label for="folder-{{id}}">Folder name</label>
        <input type="text" id="folder-{{id}}" name="foldername">

Recommendations:
- Add aria-live region for file loading status
- Implement keyboard navigation for file list
- Add skip link to file content

WCAG 2.1 AA Compliance: 68% → Target: 100%

Common Patterns

Accessible Card Component

<div class="card" role="region" aria-labelledby="card-title-{{id}}">
    <div class="card-header">
        <h3 id="card-title-{{id}}">{{title}}</h3>
    </div>
    <div class="card-body">
        <p>{{description}}</p>
    </div>
    <div class="card-footer">
        <a href="{{url}}"
           class="btn btn-primary"
           aria-label="View details for {{title}}">
            View Details
        </a>
    </div>
</div>

Accessible Data Table

<table class="table">
    <caption>List of course files</caption>
    <thead>
        <tr>
            <th scope="col">Filename</th>
            <th scope="col">Size</th>
            <th scope="col">Modified</th>
            <th scope="col">Actions</th>
        </tr>
    </thead>
    <tbody>
        {{#files}}
        <tr>
            <th scope="row">{{name}}</th>
            <td>{{size}}</td>
            <td>{{modified}}</td>
            <td>
                <button type="button"
                        class="btn btn-sm"
                        aria-label="Download {{name}}">
                    Download
                </button>
            </td>
        </tr>
        {{/files}}
    </tbody>
</table>

Integration

  • Auto-validates on template writes/edits
  • Triggered by /m:a11y command
  • Pre-commit hook validation
  • Part of CI/CD pipeline

References

  • WCAG 2.1 Quick Reference
  • ARIA Authoring Practices Guide
  • Moodle Accessibility Guidelines

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/wcag-2-1-aa-validator-mmbizk6j/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/wcag-2-1-aa-validator-mmbizk6j' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/wcag-2-1-aa-validator-mmbizk6j/download' --output '.skill-downloads/wcag-2-1-aa-validator-mmbizk6j/SKILL.md.part' && mv '.skill-downloads/wcag-2-1-aa-validator-mmbizk6j/SKILL.md.part' '.skill-downloads/wcag-2-1-aa-validator-mmbizk6j/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

Tools declared by the author (check availability in your agent): Read, Grep, Bash

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code
test -f '.skill-downloads/wcag-2-1-aa-validator-mmbizk6j/SKILL.md' && test -s '.skill-downloads/wcag-2-1-aa-validator-mmbizk6j/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/wcag-validator' && cp -R '.skill-downloads/wcag-2-1-aa-validator-mmbizk6j' '.claude/skills/wcag-validator'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation
openskills install './.skill-downloads/wcag-2-1-aa-validator-mmbizk6j'

openskills read 'wcag-2-1-aa-validator-mmbizk6j'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/wcag-2-1-aa-validator-mmbizk6j/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills

ClickHouse Performance Comparison

Testing

Evaluate ClickHouse performance test results, check PR performance changes, compare with history, and assess whether a result is actionable.

Claude CodeintermediateSafe 49,547
Skills Guide Bot

Analyze CI Performance Reports

Testing

Analyze CI performance comparison reports for a ClickHouse PR. Cross-references master history to distinguish real regressions from flaky tests.

Claude CodeintermediateSafe 49,516
Skills Guide Bot

Santa Method

Testing

Multi-agent adversarial verification with two independent reviewers. Output is checked twice and iteratively fixed until both pass before shipping.

Claude CodeCodexCursorintermediateSafe 244,766
Skills Guide Bot