Barrierefreiheit im Code
Welches Problem möchten Sie lösen?
Finden Sie die passende Lösung nach Element, Attribut oder Aufgabe – mit richtigem und falschem Beispiel.
Thema finden
31 ThemenDirekt vergleichen
Fünf Probleme, die man sehen muss.
Falsch und richtig am selben Beispiel – direkt im Browser ausprobieren.
01tabindex ohne TastaturfalleFokusreihenfolge falsch und richtig vergleichen – und direkt selbst testen.02aria-hidden ohne unsichtbare FalleSehen, was sichtbar bleibt, aber für Screenreader verschwindet.03Label und Input richtig verbindenPlatzhalter-Falle und verständliches Formularfeld direkt vergleichen.04Alt-Text passend zum BildzweckAm selben Bild erkennen, welche Beschreibung wirklich hilft.05Semantisches HTML statt div-SuppeGleiche Optik, andere Bedeutung für Tastatur und Screenreader.
Alle Anleitungen
Nach Aufgabe sortiert.
Gruppe öffnen, konkrete Frage wählen, Lösung anwenden.
01Grundlagen & Prüfung3 Themen
02Formulare & Eingaben10 Themen
- Autocomplete HTMLEingabezwecke korrekt auszeichnen und unnötige Wiederholungen vermeiden.
- Checkbox HTMLMehrfachauswahlen mit nativer Semantik, Label und Gruppenkontext.
- Combobox HTMLZwischen select, datalist und vollständigem ARIA-Widget entscheiden.
- Date Picker HTMLNative Datumseingabe nutzen und Kalenderdialoge nur gezielt bauen.
- Dropdown HTMLFormularauswahl, Navigation und Menü technisch sauber unterscheiden.
- File Upload HTMLDateien nativ auswählen, Anforderungen nennen und Status verständlich melden.
- Form HTMLFormulare mit nativen Kontrollen, klaren Labels und nutzbaren Fehlern bauen.
- Multi Select HTMLMehrfachauswahl zuerst mit Checkboxen lösen; select multiple und ARIA-Listbox nur als getestete Sonderfälle.
- Radio Button HTMLEinzelauswahlen korrekt gruppieren und vollständig beschriften.
- Select HTMLFeste Formularauswahlen nativ beschriften und eindeutig übermitteln.
03Navigation & Overlays8 Themen
- Accordion HTMLNative Disclosure-Elemente und robuste Eigenbau-Regeln vergleichen.
- HTML ButtonButton oder Link wählen und die native Bedienung erhalten.
- Dialog & Modal HTMLModale Aufgaben mit dialog, Fokusführung und sicherem Schließen bauen.
- Hamburger-Menü HTMLMobilen Menüschalter und Navigation semantisch sauber trennen.
- HTML LinkEchte Ziele, klare Linktexte und die Grenze zum Button verstehen.
- Navigation HTMLLandmarks benennen, aktuelle Seiten markieren und Links ordnen.
- Popover HTMLNicht-modale Zusatzflächen mit der nativen Popover API bauen.
- Tooltip HTMLKurze Zusatztexte erreichbar machen und interaktive Overlays vermeiden.
04Inhalte & Interaktion5 Themen
- HTML-ZeilenumbruchEchte Zeilenumbrüche von Absatzstruktur und CSS-Abstand trennen.
- Bildunterschrift in HTMLfigcaption und alt-Text ohne Informationslücken einsetzen.
- Drag and Drop in HTMLZiehen als Option anbieten und denselben Weg per Button ermöglichen.
- Progress Bar in HTMLBestimmten und unbestimmten Fortschritt korrekt auszeichnen.
- Table HTMLDatentabellen mit caption, th und scope verständlich machen.