accessibility

分类: 测试与安全 | 上传者: holger1411 | 下载: 0 | 版本: v1.0（最新）

WCAG 2.1 AA compliance, ARIA patterns, keyboard navigation, contrast, and screen reader support. Use when creating interactive components, reviewing accessibility, or fixing a11y issues.

更新日志: Source: GitHub https://github.com/holger1411/astrodeck

目录结构

当前层级: .claude/skills/accessibility/

📄 LEARNINGS.md 349 B
📄 SKILL.md 3.5 KB

SKILL.md

---
name: accessibility
description: WCAG 2.1 AA compliance, ARIA patterns, keyboard navigation, contrast, and screen reader support. Use when creating interactive components, reviewing accessibility, or fixing a11y issues.
---

# Accessibility Skill

## Domain

WCAG 2.1 AA, ARIA, Keyboard Navigation, Kontrast, Screen Readers

## KPIs

| Metrik | Ziel | Messung |
|--------|------|---------|
| Lighthouse Accessibility | >90 | Lighthouse JSON → `categories.accessibility.score * 100` |
| Pa11y Errors | 0 | `npx pa11y <URL> --reporter=json` |
| Images ohne Alt | 0 | Grep: `<img` ohne `alt=` in src/ |

## Regeln

### WCAG 4 Prinzipien

1. **Wahrnehmbar** — Inhalte für alle Sinne zugänglich
2. **Bedienbar** — Keyboard-navigierbar, genug Zeit
3. **Verständlich** — Lesbar, vorhersehbar, fehlertolerant
4. **Robust** — Kompatibel mit Assistive Technologies

### Semantic HTML

```html
<!-- ✅ Semantisch -->
<nav>...</nav>
<main>...</main>
<article>...</article>
<aside>...</aside>
<header>...</header>
<footer>...</footer>
<section aria-labelledby="section-title">
  <h2 id="section-title">...</h2>
</section>

<!-- ❌ Div-Suppe -->
<div class="nav">...</div>
<div class="main">...</div>
```

### ARIA-Patterns

```html
<!-- Buttons mit Icons (ohne sichtbaren Text) -->
<button aria-label="Menü öffnen">
  <MenuIcon aria-hidden="true" />
</button>

<!-- Expandable Content -->
<button aria-expanded="false" aria-controls="panel-1">Toggle</button>
<div id="panel-1" role="region">...</div>

<!-- Live Regions (dynamische Updates) -->
<div aria-live="polite" aria-atomic="true">
  {statusMessage}
</div>

<!-- Dekorative Elemente -->
<img src="decoration.svg" alt="" aria-hidden="true" />
```

### Keyboard-Navigation

- Alle interaktiven Elemente per Tab erreichbar
- Sichtbarer Focus-Indikator: `focus:ring-2 focus:ring-ring focus:ring-offset-2`
- Escape schließt Modals/Dropdowns
- Enter/Space aktiviert Buttons
- Pfeiltasten für Listen/Tabs/Menüs

### Farbkontrast

| Element | Minimum Ratio |
|---------|--------------|
| Normaler Text | 4.5:1 |
| Großer Text (>18pt / >14pt bold) | 3:1 |
| UI-Elemente & Grafiken | 3:1 |

### Focus-Management

```css
/* Basis Focus-Style (bereits in AstroDeck) */
focus:outline-none focus-visible:ring-2 focus-visible:ring-ring

/* Focus bei Modals */
/* Trap focus innerhalb des Modals */
/* Restore focus beim Schließen */
```

### Formulare

```html
<!-- Immer Label mit Input verknüpfen -->
<label for="email">E-Mail</label>
<input id="email" type="email" aria-required="true" aria-describedby="email-help" />
<p id="email-help" class="text-sm text-muted-foreground">Wir senden keine Spam-Mails.</p>

<!-- Fehlermeldungen -->
<input aria-invalid="true" aria-describedby="email-error" />
<p id="email-error" role="alert" class="text-sm text-destructive">Bitte gültige E-Mail eingeben.</p>
```

### Skip-Links

```astro
<!-- Bereits in AstroDeck BaseLayout -->
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-background focus:text-foreground focus:rounded-md">
  Zum Inhalt springen
</a>
```

### AstroDeck-spezifische Checks

- [ ] Dark Mode Toggle hat `aria-label` und zeigt aktuellen Zustand
- [ ] Mobile Menu: `aria-expanded`, Focus-Trap, Escape zum Schließen
- [ ] Logo-Link hat beschreibenden `aria-label` (z.B. "AstroDeck — Zur Startseite")
- [ ] Social-Links haben `aria-label` mit Plattform-Name
- [ ] Cookie-Banner: Keyboard-navigierbar, Focus-Trap

## Vor dem Anwenden

Lies `LEARNINGS.md` in diesem Verzeichnis, um bekannte Anti-Patterns zu vermeiden.

登录后下载/点赞/收藏 ❤ 36 | ★ 0

accessibility

目录结构

SKILL.md

举报内容

提示