Barrierefreiheits-Muster stable

Minimale HTML-Snippets für WCAG-orientierte Struktur. Kombinieren mit Formularvalidierung, velin-form-summary und Overlays wie velin-dialog. Diese Muster ersetzen keine Tests mit assistiven Technologien. Die Sprache ist AAA-orientiert — Nutzung des Frameworks zertifiziert Ihre Anwendung nicht. English: A11y patterns

Reifegrad

Muster spiegeln stabile Contracts. Optionales A11y-Scoring von velinstyle review ist beta — kein AT-Nachweis.

Wann nutzen

Tastatur-/ARIA-Skelette für Dialoge, Tabs, Formulare und Live Regions übernehmen.
Zum Lernen mit dem A11y Dashboard abgleichen.

Wann nicht

Keine Zertifizierungs-Checkliste und kein Ersatz für AT-Tests.
Kein Ersatz für Komponenten-Docs (Focus-Trap, velin-close, Form-Summary-API).

Wichtig

Die vollständige Muster-Referenz und Sample-Seite liegen im VelinStyle-Repository unter docs/a11y-patterns/ und samples/a11y-patterns.html. Diese Seite spiegelt die Essentials für die öffentliche Docs-Site.

Skip-Link und Fokus

VelinStyle liefert .velin-skip-link (und Skip-Link-Utilities in den Docs) sowie :focus-visible-Styles. Auf Ihr Hauptlandmark zeigen mit href="#main-content" (oder #main).

<a href="#main-content" class="velin-doc-skip">Zum Hauptinhalt springen</a>
…
<main id="main-content">…</main>

Live Regions

Nutzen Sie role="status" mit aria-live="polite" für unkritische Updates; role="alert" (assertive) nur, wenn Nutzer sofort unterbrochen werden müssen.

<div id="save-status" role="status" aria-live="polite" class="velin-text-muted"></div>

Dialog

Für Focus-Trap und Escape-Handling bevorzugen Sie <velin-dialog> oder folgen Sie dem WAI-ARIA-Dialog-Muster. Markup sollte aria-modal="true" setzen und Label sowie Beschreibung referenzieren. Siehe Dialog / Modal.

<div class="velin-modal-overlay" data-velin-open role="presentation">
  <div class="velin-modal" role="dialog" aria-modal="true"
       aria-labelledby="dlg-title" aria-describedby="dlg-desc">
    <h2 id="dlg-title" class="velin-modal__title">Titel</h2>
    <div id="dlg-desc" class="velin-modal__body">…</div>
  </div>
</div>

Tabs

Bevorzugen Sie <velin-tabs> für Tastatur-Support. Siehe Navs & Tabs. Statische Struktur:

<div role="tablist" aria-label="Einstellungen">
  <button type="button" role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Allgemein</button>
  <button type="button" role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Sicherheit</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">…</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>…</div>

Landmarks

<body>
  <header>…</header>
  <nav aria-label="Hauptnavigation">…</nav>
  <main id="main-content">…</main>
  <aside aria-label="Verwandt">…</aside>
  <footer>…</footer>
</body>

Formulare und Fehler

Fehler mit aria-describedby verknüpfen; bei ungültigen Feldern aria-invalid="true" setzen. Optionale Schicht: src/components/form-validation.css ergänzt :user-invalid-Styling, .velin-field-error und .velin-field-hint — siehe Validation und velin-form-summary.

<label class="velin-label" for="email">E-Mail</label>
<input id="email" class="velin-input" aria-invalid="true" aria-describedby="email-err">
<p class="velin-field-error" id="email-err">Ungültige Adresse.</p>

Nutzen Sie <velin-dropdown> mit role="menuitem" und Type-Ahead (0.7.0). Siehe Dropdown.

<velin-dropdown>
  <button slot="trigger">Aktionen</button>
  <button role="menuitem">Bearbeiten</button>
</velin-dropdown>

Disclosure (Collapse)

Siehe Collapse.

<velin-collapse>
  <button slot="trigger" type="button">Details</button>
  <p>Inhalt…</p>
</velin-collapse>

Data table

Siehe Data table und Tables.

<div class="velin-table-wrapper">
  <table class="velin-table">
    <caption>Umsatz</caption>
    <th scope="col">Region</th>
  </table>
</div>

Accessible authentication (3.3.8)

Nutzen Sie .velin-auth-form mit gelabelten Inputs, autocomplete für Passwortmanager und aria-describedby für Fehler. Siehe Framework-Sample samples/wcag22-auth.html und CSS src/a11y/authentication.css.

<form class="velin-auth-form velin-stack velin-gap-3" method="post" action="/login">
  <div class="velin-form-group">
    <label class="velin-label" for="login-email">E-Mail</label>
    <input class="velin-input" id="login-email" type="email" name="email" autocomplete="username" required>
  </div>
  <div class="velin-form-group">
    <label class="velin-label" for="login-password">Passwort</label>
    <input class="velin-input" id="login-password" type="password" name="password" autocomplete="current-password" required>
  </div>
  <div id="login-error" class="velin-form-error" role="alert">Ungültige Anmeldedaten.</div>
  <button type="submit" class="velin-btn velin-btn--primary">Anmelden</button>
</form>

Dragging alternatives (2.5.7)

Wenn Drag-and-Drop der einzige Pointer-Pfad ist, eine Tastatur-Alternative anbieten: Elemente per Buttons verschieben oder .velin-drag-list mit aria-grabbed und Auf/Ab-Controls nutzen. Siehe samples/wcag22-dragging.html und src/a11y/dragging-alternatives.css.

<ul class="velin-drag-list" aria-label="Sortierbare Liste">
  <li><button type="button" class="velin-btn velin-btn--ghost velin-btn--sm" aria-label="Nach oben">↑</button>
    <span>Eintrag zwei</span>
    <button type="button" class="velin-btn velin-btn--ghost velin-btn--sm" aria-label="Nach unten">↓</button>
  </li>
</ul>

Consistent help (3.2.6)

Hilfe-Links in derselben relativen Reihenfolge über Seiten wiederholen — nutzen Sie .velin-help-links oder das Modul velin-consistent-help. Siehe src/a11y/consistent-help.css.

Loading / busy

<section aria-busy="true" aria-live="polite">
  <div class="velin-skeleton velin-skeleton--heading"></div>
</section>