Zuletzt aktualisiert am 15.10.2026

Wissen

Coding-Bibliothek für Entwickler

Durchsuchbare Sammlung praktischer Code-Snippets für barrierefreie Webentwicklung. Filtern Sie nach Kategorie oder Tag und kopieren Sie Snippets direkt in Ihr Projekt.

Diese Bibliothek wächst

Wir ergänzen regelmässig neue Snippets, Patterns und Best Practices. Schauen Sie gerne wieder vorbei.

Fehler oder Ergänzung melden

Snippet #1

CSS

Animationen für motion-sensitive Nutzer deaktivieren

Ein einfaches CSS-Snippet, das Animationen und Übergänge für Nutzer deaktiviert, die in ihrem Betriebssystem angegeben haben, dass Bewegung sie krank, schwindelig oder unkonzentriert macht.

css

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

Es ist ein kleiner Akt des Respekts gegenüber Menschen mit vestibulären Störungen, Migräne, ADHS oder Bewegungsempfindlichkeit. Für manche ist ein Parallax-Effekt oder eine hüpfende Ladeanimation nicht erfreulich – sondern übelkeitserregend. Geben Sie Menschen einen Ausweg, wenn sie darum gebeten haben.

Snippet #2

HTML

Sichtbarer Skip-Link zum Hauptinhalt

Ein Skip-Link erlaubt es Tastatur- und Screenreader-Nutzenden, sich wiederholende Navigation zu überspringen und direkt zum Hauptinhalt zu springen.

html

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

<style>
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}
</style>

Ohne Skip-Link müssen Tastaturnutzende auf jeder Seite erneut durch das gesamte Menü tabben. Der Link wird visuell ausgeblendet und erscheint erst beim Fokussieren – ein winziges Detail mit grosser Wirkung.

Snippet #3

CSS

Sichtbarer Fokus-Indikator

Ein deutlich sichtbarer Fokusrahmen für alle interaktiven Elemente – ohne den Standard-Browser-Outline einfach mit `outline: none` zu entfernen.

css

:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Niemals tun: */
/* *:focus { outline: none; } */

Viele Designer entfernen den Fokusring, weil er nicht zum Design passt. Das macht Websites für Tastaturnutzende unbenutzbar. Definieren Sie stattdessen einen eigenen Stil, der zu Ihrer Marke passt – und zu WCAG 2.4.7 konform ist.

Snippet #4

CSS

Nur für Screenreader sichtbarer Text

Eine `sr-only`-Utility-Klasse, die Text visuell versteckt, ihn aber für Screenreader weiterhin zugänglich macht.

css

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Manche Inhalte – z.B. Kontext für Icon-Buttons oder Statusmeldungen – sind visuell überflüssig, aber für Screenreader essenziell. `display: none` würde sie auch dort verstecken; diese Technik nicht.

Snippet #5

ARIA

Aussagekräftiges aria-label für Icon-Buttons

Buttons, die nur ein Icon enthalten, brauchen ein `aria-label`, damit Screenreader-Nutzende verstehen, was passiert.

html

<button type="button" aria-label="Suche öffnen">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

Ein Icon ohne Text ist für blinde Menschen unsichtbar. Ohne Label hört ein Screenreader nur «Button» – ohne Funktion. Ein Label macht aus einem Rätsel eine klare Aktion.

Snippet #6

ARIA

Live-Region für dynamische Statusmeldungen

Mit `aria-live` werden Änderungen im DOM (z.B. Toast-Nachrichten) automatisch von Screenreadern angesagt.

jsx

<div role="status" aria-live="polite" aria-atomic="true">
  {message}
</div>

// Für dringende Meldungen (Fehler, Warnungen):
<div role="alert" aria-live="assertive">
  {errorMessage}
</div>

Wenn nach dem Absenden eines Formulars eine Erfolgsmeldung erscheint, sehen Sehende sie sofort. Screenreader-Nutzende erfahren davon nur, wenn die Region als `aria-live` markiert ist. Sonst tippen sie weiter ins Leere.

Snippet #7

ARIA

Zugänglicher Tooltip mit semantischem HTML

Tooltips sind häufig in Oberflächen anzutreffen, doch HTML kennt kein natives Tooltip-Element mit integrierter Tastatur- und Screenreader-Unterstützung. Wer hier auf eine Div-Suppe setzt, baut Barrieren ein. Mit einem nativen Trigger-Element, sauberer Verknüpfung über aria-describedby und Tastatursteuerung entsteht ein Tooltip, der für alle funktioniert.

jsx

{/* Trigger und Tooltip teilen denselben Hover-Bereich.
    Dadurch bleibt der Tooltip sichtbar, wenn Nutzer den
    Mauszeiger vom Trigger auf den Tooltip bewegen
    (WCAG 1.4.13 Content on Hover or Focus). */}
<div
  onMouseEnter={() => setOpen(true)}
  onMouseLeave={() => setOpen(false)}
>
  <button
    type="button"
    aria-describedby="tooltip-hilfe"
    onFocus={() => setOpen(true)}
    onBlur={() => setOpen(false)}
    onKeyDown={(e) => e.key === "Escape" && setOpen(false)}
  >
    Hilfe
  </button>

  {open && (
    <div role="tooltip" id="tooltip-hilfe">
      Kurzer Hinweistext zum Element.
    </div>
  )}
</div>

Ein zugänglicher Tooltip erscheint bei Tastaturfokus und Hover, ist per Escape schliessbar und bleibt sichtbar, solange sich Fokus oder Mauszeiger auf Trigger oder Tooltip befinden. Die Verknüpfung erfolgt über aria-describedby und role='tooltip'.

Tooltips dienen primär zur Bereitstellung zusätzlicher Informationen. Wichtige oder für die Bedienung notwendige Informationen sollten nicht ausschliesslich in Tooltips bereitgestellt werden. Dies entspricht den Anforderungen aus WCAG 1.4.13 Content on Hover or Focus.

Hinweis für die Praxis: Das gezeigte Beispiel veranschaulicht die grundlegenden Prinzipien eines zugänglichen Tooltips. In komplexeren Anwendungen kann eine zusätzliche Fokus- und Hover-Steuerung erforderlich sein, damit Tooltips auch bei verschachtelten Komponenten, dynamischen Layouts oder Framework-spezifischen Implementierungen stabil sichtbar und bedienbar bleiben.

Native <button>-Elemente als Trigger verwenden
Tooltip per Fokus öffnen und mit Escape schliessen
Tooltip-Inhalt über aria-describedby mit dem Trigger verknüpfen
Tooltip sichtbar lassen, solange Fokus oder Mauszeiger auf Trigger oder Tooltip liegen

Don't

Tooltips an <div> oder <span> hängen (kein nativer Fokus)
Ausschliesslich auf :hover setzen (Tastatur wird ausgeschlossen)
Wichtige Informationen nur im Tooltip verstecken
Tooltip verschwinden lassen, sobald der Mauszeiger den Trigger verlässt, obwohl sich der Nutzer noch auf dem Tooltip befindet
Tooltips als Ersatz für sichtbare Beschriftung verwenden

Fehler gefunden? Vorschlag zur Ergänzung?

Diese Bibliothek lebt von Praxiswissen. Wenn Ihnen ein Detail auffällt, ein Beispiel fehlt oder Sie eine bessere Lösung kennen – teilen Sie sie mit uns. Jedes Feedback macht die Coding-Bibliothek für alle ein Stück besser.

Kontakt aufnehmen