accessibility-checker

Étoiles15

Forks114

Mis à jour17 décembre 2025 à 10:32

Check HTML pages for accessibility issues and WCAG 2.1 compliance. Automatically loads when working on HTML accessibility, ARIA labels, or screen reader compatibility.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

SKILL.md

readonly

name	accessibility-checker
description	Check HTML pages for accessibility issues and WCAG 2.1 compliance. Automatically loads when working on HTML accessibility, ARIA labels, or screen reader compatibility.
allowed-tools	["Read","Grep","Glob"]

Accessibility Checker Skill

This skill provides guidance for checking and improving web accessibility.

WCAG 2.1 AA Checklist

Perceivable

All images have meaningful alt text
Videos have captions/transcripts
Color is not the only way to convey information
Text has sufficient contrast ratio (4.5:1 normal, 3:1 large)
Content is readable at 200% zoom

Operable

Understandable

Language is declared (<html lang="en">)
Error messages are clear and helpful
Labels are associated with form inputs
Navigation is consistent across pages

Robust

Valid HTML structure
ARIA attributes used correctly
Works with assistive technologies

Common Issues to Check

Images

<!-- Bad -->
<img src="logo.png">

<!-- Good -->
<img src="logo.png" alt="NovaTech Solutions logo">

<!-- Decorative (empty alt is intentional) -->
<img src="decoration.png" alt="" role="presentation">

Forms

<!-- Bad -->
<input type="email" placeholder="Email">

<!-- Good -->
<label for="email">Email</label>
<input type="email" id="email" aria-describedby="email-hint">
<span id="email-hint">We'll never share your email</span>

Navigation

<!-- Include skip link -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Use landmarks -->
<nav aria-label="Main navigation">
<main id="main-content">
<footer>

Automated Checks

When reviewing a file, check for:

Missing alt attributes on images
Empty links or buttons
Missing form labels
Missing language declaration
Missing landmark regions
Improper heading hierarchy (h1 → h2 → h3)
Missing ARIA labels on icon-only buttons

Output Format

## Accessibility Review: [filename]

### Critical Issues
- [Issue description] (Line X)

### Warnings
- [Issue description] (Line X)

### Passed Checks
- ✓ [What's done correctly]

### Recommendations
- [Suggestion for improvement]