Skills Guide

Validateur WCAG 2.1 AA

VérifiéSûr

Valide automatiquement les modèles Moodle, JavaScript et CSS pour la conformité d'accessibilité WCAG 2.1 niveau AA. Vérifie le HTML sémantique, les motifs ARIA, la navigation au clavier et la compatibilité avec les lecteurs d'écran.

Télécharger et utiliser
Spar Skills Guide Bot
TestingIntermédiaire
04/03/2026
Claude Code
#accessibility#wcag#moodle#mustache#a11y

Recommandé pour

Claude CodeGénération de testsIngénieur QA / test

Synthèse automatique

Cette skill vérifie automatiquement les templates Mustache, les modules JavaScript AMD et les fichiers CSS/SCSS de Moodle afin de contrôler leur conformité aux critères WCAG 2.1 niveau AA.

Points forts

  • Couvre un large éventail de contrôles : sémantique HTML, landmarks, alternatives textuelles, formulaires, composants interactifs et contrastes de couleurs.
  • Fournit des exemples de code concrets et directement réutilisables, notamment pour la gestion des erreurs de formulaire et des états de chargement.
  • S'active automatiquement sur les fichiers Moodle typiques (.mustache, amd/src/*.js, SCSS), ce qui l'intègre bien au flux de développement existant.
  • Accorde une attention particulière aux patterns ARIA et à la compatibilité avec les lecteurs d'écran.

Limites

  • Se limite à Moodle et à sa pile technique ; les exemples ne sont pas directement transposables à d'autres frameworks.
  • Le skill décrit une checklist de validation mais ne précise pas de méthode automatisée de test ni d'outil de calcul de contraste.
  • Ne couvre que ce qui est listé ; certains critères WCAG 2.1 AA (mouvement, timeout, contenu clignotant) ne sont pas abordés dans le document fourni.
Quand l'utiliser

À utiliser dès que vous modifiez un template Mustache, un module AMD ou une feuille de style Moodle et souhaitez vérifier l'accessibilité avant de livrer.

Quand l'éviter

À éviter si vous travaillez sur une interface web qui n'est pas basée sur Moodle ou si vous cherchez un audit d'accessibilité complet couvrant tous les critères WCAG 2.1 AA.

Analyse de sécurité

Sûr
Score qualité80/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.

Aucun point d'attention détecté

Comment cette analyse est faite

Exemples

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

Du fichier au premier essai

Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.

Consulter la source et ses fichiers annexes

Ce téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.

1. Télécharger le fichier

Télécharger SKILL.md

Depuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/wcag-2-1-aa-validator-mmbizk6j/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.

Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.

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. Vérifier les prérequis

Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.

Outils déclarés par l’auteur (à vérifier dans votre agent) : Read, Grep, Bash

Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.

Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.

3. Charger la skill

Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.

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 doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.

Installation officielle d’OpenSkills
openskills install './.skill-downloads/wcag-2-1-aa-validator-mmbizk6j'

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

La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.

Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.

openskills sync

Mode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.

4. Faire un premier essai

Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :

Lis .skill-downloads/wcag-2-1-aa-validator-mmbizk6j/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.

Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.

Skills similaires

Comparaison de performances ClickHouse

Testing

Évaluez les résultats de tests de performance ClickHouse, analysez les régressions de PR, comparez avec l'historique et vérifiez la fiabilité des mesures.

Claude CodeintermediateSûr 49,547
Skills Guide Bot

Analyse des rapports de performance CI

Testing

Analyse les rapports de comparaison de performance CI pour une PR ClickHouse. Recoupe l'historique master pour distinguer les vraies régressions des tests instables.

Claude CodeintermediateSûr 49,516
Skills Guide Bot

Méthode Santa

Testing

Vérification adversarial multi-agents avec deux réviseurs indépendants. La sortie est vérifiée deux fois et corrigée itérativement jusqu'à ce que les deux acceptent avant publication.

Claude CodeCodexCursorintermediateSûr 244,766
Skills Guide Bot