Barrierefreiheit stable

VelinStyle zielt auf WCAG-2.2-Level-AAA-orientierte Token-Defaults und Component Contracts — Fokus, Target Size, Authentifizierungsmuster und Reduced Motion. Komponenten liefern ARIA, Tastatur-Support und Hilfen für Screenreader und Forced Colors. Die Nutzung des Frameworks zertifiziert Ihre Anwendung nicht. AAA-Kontrast ist der Default; mit data-velin-contrast="aa" auf <html> erhalten Sie eine leichtere 4.5:1-Palette. English: Accessibility

Reifegrad

Tokens, Contracts, initA11y() und Overlay-Focus-Lifecycle sind stable.

A11y-Scores von velinstyle review sind beta-Heuristiken — kein AT-Nachweis.

Wann nutzen

Framework-Helfer (Skip-Links, Focus-Rings, Form-Summary, Overlay-Focus-Trap) als Defaults übernehmen.
test:a11y:coverage / velinstyle scan --only a11y als CI-Smoke — danach echte AT-Tests.

Wann nicht

Keine App-AAA-Zertifizierung behaupten, nur weil VelinStyle AAA-orientierte Defaults liefert.
A11y Dashboard oder review-Scores nicht als Konformitätsnachweis behandeln.

WCAG-2.2-Ressourcen — AAA-Matrix · Muster · Dashboard · npm run test:a11y:coverage · npx velinstyle scan --only a11y · Samples: samples/wcag22-auth.html, samples/wcag22-dragging.html

Component Contracts (38)

Jede ausgelieferte Web Component hat einen Eintrag in core/a11y/component-contracts.json (Status, Tastatur, Live Regions, Pflichtattribute). <velin-persist> unterstützt WCAG 2.2 3.3.7 Redundant Entry durch Auto-Save von Formularfeldern; <velin-form-summary> deckt 3.3.1 Error Identification und 3.3.3 Error Suggestion mit fokussierbarer Fehlerliste ab. Siehe WCAG-2.2-AAA-Matrix.

Runtime-Bootstrap (`initA11y`)

Optionales JavaScript verdrahtet einen Live-Region-Announcer und Scroll-Padding für fixierte Header (Focus not obscured). Import aus @birdapi/velinstyle/a11y oder Aufruf nach dem Komponenten-Bundle.

import { initA11y } from '@birdapi/velinstyle/a11y';

initA11y({ announcer: true, scrollPadding: true });

Icon-only Controls: velin-icon-label oder aria-label am Host — siehe Icons.

Zentrale Hilfen

Visually hidden — .velin-sr-only / .velin-sr-only--focusable für Screenreader-Text und Skip-Links.
Skip-Links — z. B. .velin-doc-skip auf dieser Docs-Site; Fokus springt zum Hauptinhalt.
Focus — sichtbarer Ring über :focus-visible; Overlay-Focus-Trap in Dialog/Modal/Drawer.
Reduced motion — Respekt für prefers-reduced-motion; Utility .motion-safe für bedingte Animationen.
Forced colors — Support für Windows High Contrast / forced-colors: active.
Focus not obscured — scroll-padding-block-start über --velin-nav-height / .velin-scroll-pt-nav.
Target size — Primärcontrols 44×44px via target-size.css (.velin-target-touch).

Farbkontrast (AAA-Defaults)

VelinStyle liefert 7:1-OKLCH-Token-Defaults in :root, Dark Mode und allen 13 Themes — kein Attribut nötig. Für eine leichtere AA-Palette (4.5:1 Body-Text) data-velin-contrast="aa" auf <html> setzen. Details: Color, Token-Docs.

WCAG-2.2-Checkliste (Auszug)

Kriterium	VelinStyle
3.3.8 Accessible Authentication	`authentication.css`
3.2.6 Consistent Help	`consistent-help.css`
2.5.7 Dragging Movements	`dragging-alternatives.css`
2.4.12 Focus Appearance	`focus-appearance.css`
2.4.11 Focus Not Obscured	`focus-not-obscured.css`
2.5.8 Target Size	`target-size.css`
1.4.3 / 1.4.6 Contrast	AAA-Defaults > 7:1; `data-velin-contrast="aa"` für 4.5:1
2.1.1 Keyboard	Focus-visible, Focus-Trap, Roving Tabindex (WC Contracts)

Tests in CI

npm run test:a11y, npm run test:a11y:coverage, npm run test:contrast und npx velinstyle scan --only a11y. Siehe Scanner-Rules und CLI scan.

Weiterführend

A11y-Muster
A11y Dashboard (Demo-Playground)
Vollständige englische Accessibility-Seite mit Code-Beispielen