VelinStyle
Accessibility Dashboard demo
Interaktives Demo-Playground zum Prüfen von ARIA-Attributen, Visualisieren der Tastaturnavigation, Kontrastverhältnissen, Screenreader-Ankündigungen und Nutzer-Präferenz-Media-Queries. Kein Konformitätszertifikat und keine App-AAA-Zertifizierung. English: A11y Dashboard
Demo-Playground
Zum Lernen und Erkunden — nicht als CI-Nachweis oder WCAG-Zertifizierung.
Contracts und Matrix: Barrierefreiheit und npm run test:a11y:coverage.
Wann nutzen
- Lernen, wie ARIA / Fokus / Kontrast auf Live-Markup erscheinen.
- Präferenz-Media-Queries (Reduced Motion, Forced Colors) visuell vergleichen.
Wann nicht
- Playground-Ausgabe nicht als Konformitätsnachweis für Ihr Produkt behandeln.
- Für Shipping von Overlays und Formularen Komponenten-Docs + echte AT bevorzugen.
ARIA-Inspector
Hover oder Fokus auf ein Element im linken Panel. Rechts erscheinen Tag-Name,
ARIA-Rolle, alle aria-*-Attribute, tabindex und Accessible Name in Echtzeit.
Hover oder Fokus auf ein Element links zum Inspizieren.
Kontrast-Checker
Vorder- und Hintergrundfarbe wählen, um das WCAG-Kontrastverhältnis zu berechnen. Ergebnisse zeigen Pass/Fail für AA und AAA bei normalem und großem Text.
Screenreader-Vorschau
Referenz, wie VelinStyle-Komponenten von Screenreadern angekündigt werden — inklusive ARIA-Rollen und erwarteter Tastaturkürzel.
| Komponente | ARIA-Rolle | Angekündigt als | Tastaturkürzel |
|---|---|---|---|
velin-btn velin-btn--primary |
button |
"Speichern, button" | Enter / Space |
velin-btn velin-btn--ghost |
link (when <a>) |
"Mehr erfahren, link" | Enter |
velin-input |
textbox |
"E-Mail, edit text, required" | Eingeben |
velin-select |
combobox / listbox |
"Land, combo box, collapsed" | Alt+↓ zum Öffnen, ↑↓ zum Navigieren |
form-check-input |
checkbox |
"Bedingungen akzeptieren, checkbox, not checked" | Space zum Umschalten |
accordion-button |
button with aria-expanded |
"Abschnitt 1, collapsed, button" | Enter / Space |
nav-link (tab) |
tab |
"Einstellungen, tab, selected, 2 of 4" | ←→ zwischen Tabs, Enter zum Aktivieren |
dropdown-toggle |
button with aria-haspopup |
"Aktionen, menu button, collapsed" | Enter / Space / ↓ zum Öffnen |
dropdown-item |
menuitem |
"Bearbeiten, menu item" | ↑↓ zum Navigieren, Enter zum Auswählen |
modal |
dialog |
"Löschen bestätigen, dialog" | Esc zum Schließen, Tab im Dialog gefangen |
alert |
alert |
"Erfolg! Datei gespeichert, alert" | Automatisch angekündigt |
progress |
progressbar |
"Fortschritt, 65%" | n. a. (nur lesen) |
toast |
status / alert |
"Benachrichtigung: Eintrag hinzugefügt, status" | Über Live Region angekündigt |
breadcrumb |
navigation (aria-label="Breadcrumb") |
"Breadcrumb, navigation" | Standard-Linknavigation |
Nutzer-Präferenzen-Demo
Schalter unten umlegen, um CSS-Media-Query-basierte Nutzer-Präferenzen zu simulieren. Der Demo-Container aktualisiert sich in Echtzeit.
Animation
Transparenz
Dieses Panel nutzt einen halbtransparenten Hintergrund. Reduced transparency erhöht die Decazität für bessere Lesbarkeit.
Komponenten