Zum Hauptinhalt springen
VelinStyle v1.3.0
  1. Docs
  2. Barrierefreiheit
  3. Barrierefreiheit

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

Wann nicht

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.

Visually Hidden (.velin-sr-only)

Die Klasse .velin-sr-only versteckt ein Element visuell, hält es aber für Screenreader zugänglich. Mit .velin-sr-only--focusable wird das Element sichtbar, sobald es Tastaturfokus erhält.

<!-- Verstecktes Label für Icon-only Buttons -->
<button class="velin-btn velin-btn--ghost" aria-label="Schließen">
  <velin-icon name="x" size="18"></velin-icon>
  <span class="velin-sr-only">Schließen</span>
</button>

<!-- Skip-Link wird bei Fokus sichtbar -->
<a href="#main-content" class="velin-sr-only velin-sr-only--focusable">
  Zum Hauptinhalt springen
</a>

Tabben Sie in diesen Bereich, um den Skip-Link sichtbar zu machen:

Zum Hauptinhalt springen

Skip-Links lassen Tastaturnutzer direkt zum Hauptinhalt springen und wiederholte Navigation überspringen. VelinStyle enthält die Klasse .velin-doc-skip, die auch auf dieser Doku-Seite verwendet wird und erst bei Fokus sichtbar ist.

<body>
  <a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

  <nav>...</nav>

  <main id="main-content">
    <!-- Seiteninhalt -->
  </main>
</body>

Fokus-Management

Alle interaktiven Komponenten zeigen einen sichtbaren Fokus-Ring. VelinStyle nutzt :focus-visible, damit Fokusindikatoren bei Tastaturnavigation erscheinen, aber nicht bei Mausklicks.

/* VelinStyle-Standard-Fokus-Ring */
:focus-visible {
  outline: 2px solid var(--velin-focus-ring-color, #6366f1);
  outline-offset: 2px;
}

/* Eigener Fokus-Ring per Utility */
.focus-ring-primary:focus-visible {
  --velin-focus-ring-color: var(--velin-primary);
}
.focus-ring-danger:focus-visible {
  --velin-focus-ring-color: var(--velin-danger);
}
Link-Button

Reduced Motion

VelinStyle respektiert die Media Query prefers-reduced-motion. Wenn sie aktiv ist, werden Animationen und Transitions auf nahezu sofortige Dauer reduziert, damit motion-sensitive Nutzer eine angenehme Erfahrung haben.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Animationen können außerdem nur dann angewendet werden, wenn Bewegung erlaubt ist, etwa mit der Utility-Klasse .motion-safe:

<div class="animate-fade-in motion-safe">
  Dieser Bereich blendet nur ein, wenn Bewegung erlaubt ist.
</div>

Forced Colors (High Contrast)

VelinStyle unterstützt Windows High Contrast Mode und forced-colors: active. Komponentenrahmen, Fokus-Ringe und interaktive Zustände verwenden Systemfarben, damit sie in High-Contrast-Themes sichtbar bleiben.

@media (forced-colors: active) {
  .btn {
    border: 1px solid ButtonText;
  }
  .btn:focus-visible {
    outline: 2px solid Highlight;
  }
  .form-control {
    border-color: ButtonText;
  }
}

Fokus nicht verdeckt (WCAG 2.4.11)

Fixierte Header können fokussierte Elemente beim Tabben verdecken. VelinStyle setzt scroll-padding-block-start über --velin-nav-height und bietet .velin-scroll-pt-nav für eigene Layouts.

<html class="velin-scroll-pt-nav">…</html>

Zielgröße (WCAG 2.5.8)

Primäre Controls erfüllen 44×44px über 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)

KriteriumVelinStyle
3.3.8 Accessible Authenticationauthentication.css
3.2.6 Consistent Helpconsistent-help.css
2.5.7 Dragging Movementsdragging-alternatives.css
2.4.12 Focus Appearancefocus-appearance.css
2.4.11 Focus Not Obscuredfocus-not-obscured.css
2.5.8 Target Sizetarget-size.css
1.4.3 / 1.4.6 ContrastAAA-Defaults > 7:1; data-velin-contrast="aa" für 4.5:1
2.1.1 KeyboardFocus-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.