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.
Sucht in Titeln, Beschreibungen, WCAG-Kriterien und in typischen Beschreibungen des Problems. Mehrere Wörter grenzen weiter ein.
Tastatur und Fokus
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.
Kriterien: 4.1.2, 2.1.2, 2.4.3, 2.1.1
1 Min. Lesezeit
Tutorial lesenSo 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.
Kriterien: 2.4.7, 1.4.11, 2.4.11
1 Min. Lesezeit
Tutorial lesenTastaturfalle finden und beheben
Eine Tastaturfalle beendet den Besuch: Alles nach der Falle ist unerreichbar. So findest du sie in zwei Minuten und behebst sie sauber.
Kriterien: 2.1.2, 2.1.1, 2.4.3
1 Min. Lesezeit
Tutorial lesen
Formulare
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.
Kriterien: 1.3.1, 3.3.2, 4.1.2, 2.5.3
1 Min. Lesezeit
Tutorial lesenSo machst du Fehlermeldungen im Formular barrierefrei
Eine rote Umrandung ist keine Fehlermeldung. So wird ein Fehler benannt, mit dem Feld verbunden, angesagt und erklärt.
Kriterien: 3.3.1, 3.3.3, 4.1.3
1 Min. Lesezeit
Tutorial lesen
Darstellung und Kontrast
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.
Kriterien: 1.4.3, 1.4.11, 1.4.1
1 Min. Lesezeit
Tutorial lesenReflow: keine Seite darf in zwei Richtungen scrollen
Bei 320 CSS-Pixeln Breite muss der Inhalt umbrechen, statt seitwärts zu laufen. Die Ursachen sind fast immer dieselben drei.
Kriterien: 1.4.10, 1.4.4, 1.4.12
1 Min. Lesezeit
Tutorial lesen
Semantik und Screenreader
So schreibst du guten Alt-Text
Die Entscheidung ist wichtiger als die Syntax: trägt das Bild Information, ist es ein Bedienelement oder ist es Dekoration? Daraus folgt der Alt-Text.
Kriterien: 1.1.1
1 Min. Lesezeit
Tutorial lesenDer zugängliche Name: aria-label richtig einsetzen
Jedes Bedienelement braucht einen Namen, den assistive Technik ansagen kann. So entsteht er, und so zerstörst du ihn nicht versehentlich.
Kriterien: 4.1.2, 2.5.3, 1.3.1
1 Min. Lesezeit
Tutorial lesen