Menü
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/Arete-Consortium/ai-skills --skill a11yDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
SKILL.md wird angezeigt
| name | a11y |
| description | Accessibility Checklist |
| lifecycle | experimental |
Web accessibility audit and guidelines (WCAG compliance).
/a11y # General checklist
/a11y path/to/component.tsx # Audit specific component
/a11y --level AA # WCAG level (A, AA, AAA)
/a11y --fix # Suggest fixes
# Accessibility Audit: [Component/Page]
## Summary
| Category | Status | Issues |
|----------|--------|--------|
| Perceivable | ⚠️ | 3 |
| Operable | ✅ | 0 |
| Understandable | ⚠️ | 1 |
| Robust | ✅ | 0 |
**WCAG Level**: AA
**Overall**: Needs Improvement
---
## Issues Found
### Critical (Must Fix)
#### 1. Missing alt text on images
**WCAG**: 1.1.1 Non-text Content (Level A)
**Location**: `ProductCard.tsx:45`
```tsx
// Current (inaccessible)
<img src={product.image} />
// Fixed
<img src={product.image} alt={product.name} />
WCAG: 1.4.3 Contrast (Minimum) (Level AA)
Location: Button.tsx:12
Current contrast ratio: 3.5:1 (requires 4.5:1)
/* Current */
color: #888;
background: #fff;
/* Fixed */
color: #595959;
background: #fff;
WCAG: 2.4.1 Bypass Blocks (Level A)
Add skip navigation link for keyboard users.
<a href="#main-content" className="skip-link">
Skip to main content
</a>
## WCAG Quick Reference
### Level A (Minimum)
Must have for basic accessibility.
| Criterion | Requirement |
|-----------|-------------|
| 1.1.1 | Alt text for images |
| 1.3.1 | Info and relationships (semantic HTML) |
| 1.4.1 | Color not sole indicator |
| 2.1.1 | Keyboard accessible |
| 2.1.2 | No keyboard trap |
| 2.4.1 | Skip navigation |
| 3.1.1 | Language of page |
| 4.1.1 | Valid HTML |
| 4.1.2 | Name, role, value |
### Level AA (Standard)
Required for most compliance needs.
| Criterion | Requirement |
|-----------|-------------|
| 1.4.3 | Contrast ratio 4.5:1 (text) |
| 1.4.4 | Text resizable to 200% |
| 1.4.5 | Images of text avoided |
| 2.4.5 | Multiple ways to find pages |
| 2.4.6 | Descriptive headings/labels |
| 2.4.7 | Visible focus indicator |
| 3.2.3 | Consistent navigation |
| 3.2.4 | Consistent identification |
### Level AAA (Enhanced)
Highest level, not always achievable.
| Criterion | Requirement |
|-----------|-------------|
| 1.4.6 | Contrast ratio 7:1 |
| 1.4.8 | Visual presentation options |
| 2.1.3 | Keyboard (no exceptions) |
| 2.4.9 | Link purpose (link only) |
## Common Fixes
### Images
```tsx
// Informative image
<img src="chart.png" alt="Sales increased 25% in Q4" />
// Decorative image
<img src="decoration.png" alt="" role="presentation" />
// Complex image
<figure>
<img src="diagram.png" alt="System architecture" />
<figcaption>
Detailed description of the system architecture...
</figcaption>
</figure>
// Labeled input
<label htmlFor="email">Email address</label>
<input id="email" type="email" aria-describedby="email-hint" />
<span id="email-hint">We'll never share your email</span>
// Error state
<input
aria-invalid="true"
aria-describedby="email-error"
/>
<span id="email-error" role="alert">
Please enter a valid email
</span>
// Icon button needs label
<button aria-label="Close dialog">
<CloseIcon />
</button>
// Toggle button
<button
aria-pressed={isActive}
onClick={toggle}
>
Dark mode
</button>
// Landmark regions
<header role="banner">...</header>
<nav role="navigation" aria-label="Main">...</nav>
<main role="main" id="main-content">...</main>
<footer role="contentinfo">...</footer>
// Skip link
<a href="#main-content" className="sr-only focus:not-sr-only">
Skip to main content
</a>
// Tab panel
<div role="tablist">
<button role="tab" aria-selected="true" aria-controls="panel1">
Tab 1
</button>
</div>
<div role="tabpanel" id="panel1">Content</div>
// Modal dialog
<div
role="dialog"
aria-modal="true"
aria-labelledby="dialog-title"
>
<h2 id="dialog-title">Dialog Title</h2>
</div>
// Live region for updates
<div aria-live="polite" aria-atomic="true">
{statusMessage}
</div>
# axe-core CLI
npx axe https://example.com
# Pa11y
npx pa11y https://example.com
# Lighthouse
npx lighthouse https://example.com --only-categories=accessibility
When /a11y is invoked: