Tutorials
Tutorials: WCAG-Fehler beheben
Konkrete Schritt-für-Schritt-Anleitungen für Entwickler, mit echtem Vorher/Nachher-Code. Jedes Tutorial zeigt den typischen Fehler, den sauberen Fix und das dahinterstehende WCAG-Kriterium.
So machst du ein Modal barrierefrei
Fokus-Management, Escape-Taste, Rolle und Name: die vier Dinge, die ein barrierefreies Modal braucht, mit dem nativen <dialog>-Element in wenigen Zeilen.
Tutorial lesen→So beschriftest du Formularfelder richtig
Ein Placeholder ist kein Label. So verbindest du jedes Eingabefeld mit einem echten Label und kennzeichnest Pflichtfelder und Hinweise barrierefrei.
Tutorial lesen→So behebst du zu geringen Farbkontrast
4.5:1 für normalen Text, 3:1 für grossen Text und UI-Elemente: die WCAG-Schwellen, wie du sie misst und mit ein paar CSS-Änderungen erreichst.
Tutorial lesen→So baust du einen sichtbaren Fokus-Indikator
outline: none macht deine Seite für Tastaturnutzer unbrauchbar. So ersetzt du ihn durch einen sichtbaren, kontraststarken Fokus-Ring mit :focus-visible.
Tutorial lesen→So baust du einen Skip-Link
Ein Skip-Link lässt Tastaturnutzer die Navigation überspringen. So machst du ihn sichtbar bei Fokus und sorgst dafür, dass das Sprungziel wirklich den Fokus bekommt.
Tutorial lesen→