Strukturierte Überschriften
Gliedere deine Inhalte wie ein gut strukturiertes Buch: Eine Hauptüberschrift (H1) für das Hauptthema, darunter Kapitelüberschriften (H2), und für Unterabschnitte dann H3, H4 etc.
Die Hauptüberschrift (H1) darfst du auch mehrfach verwenden, wenn es verschiedene Hauptthemen auf der Seite gibt
Jede Überschrift sollte klar beschreiben, was im folgenden Abschnitt zu finden ist Beispiel: Eine News-Seite könnte die H1 "Aktuelle Nachrichten" haben, darunter H2-Überschriften wie "Politik" und "Wirtschaft", und unter diesen dann H3-Überschriften für die einzelnen Artikel wie "Neue Klimaschutz-Verordnung beschlossen"
Kontraste und Lesbarkeit
Text muss sich deutlich vom Hintergrund abheben: Schwarzer Text auf weißem Grund ist ideal, hellgrauer Text auf weißem Grund meist problematisch
Alle Texte müssen sich auf 200% vergrößern lassen, ohne dass man seitlich scrollen muss oder Inhalte sich überlagern
Auch Buttons, Icons und andere Bedienelemente müssen sich klar vom Hintergrund abheben Beispiel: Ein blauer Button auf weißem Hintergrund braucht eine ausreichend dunkle Blau-Tönung. Ein hellblauer Button wäre schwer zu erkennen
Sinnvolle Bild-Alternativen
Wenn ein Bild wichtige Informationen vermittelt, beschreibe in einem Alt-Text kurz und präzise, was zu sehen ist oder welche Funktion das Bild hat
Rein dekorative Bilder (wie schöne Hintergründe oder Trennlinien) bekommen einen leeren Alt-Text, damit Screenreader sie überspringen
Ist das Bild gleichzeitig ein Link, muss der Alt-Text sagen, wohin der Link führt Beispiel: Ein Firmenlogo als Link könnte den Alt-Text "Zur [Firma] Startseite" haben. Ein Produktbild in einem Shop könnte den Alt-Text "Rote Ledertasche mit Goldverschluss, 30x20cm" haben. Ein dekoratives Blumenmuster am Seitenrand bekommt alt=""
Alles, was mit der Maus klickbar ist, muss auch mit der Tab-Taste erreichbar und mit der Enter-Taste auslösbar sein
Man muss immer sehen können, wo man gerade mit der Tastatur ist - meist durch einen deutlichen Rahmen um das aktuelle Element
Der Fokus darf nirgends "stecken bleiben" - man muss immer vor und zurück navigieren können
Die Reihenfolge beim Tabben muss logisch sein: Von oben nach unten, von links nach rechts Beispiel: Ein Dropdown-Menü muss sich mit der Tab-Taste erreichen, mit Enter öffnen und mit den Pfeiltasten durchsuchen lassen
Multimediale Inhalte
Videos brauchen Untertitel, die nicht nur das Gesprochene, sondern auch wichtige Geräusche wiedergeben
Wenn im Video wichtige Dinge zu sehen sind, die nicht besprochen werden, brauchst du eine zusätzliche Beschreibung dieser Inhalte
Bei Audioinhalten muss es immer eine Möglichkeit geben, die Lautstärke zu regeln oder den Ton ganz auszuschalten Beispiel: In einem Produktvideo muss nicht nur der Sprechertext untertitelt werden, sondern auch beschrieben werden, wie das Produkt aussieht und bedient wird
Responsive Design
Die Webseite muss sich automatisch an verschiedene Bildschirmgrößen anpassen
Auch bei 400% Zoom müssen alle Inhalte noch nutzbar sein
Es darf kein horizontales Scrollen nötig sein (Ausnahmen sind z.B. Tabellen oder Grafiken) Beispiel: Ein zweispaltiges Layout sollte auf dem Smartphone automatisch einspaltig werden. Texte sollten sich dem verfügbaren Platz anpassen
Formular-Zugänglichkeit
Jedes Eingabefeld braucht eine Beschriftung, die auch im Code mit dem Feld verbunden ist
Es muss klar sein, welche Felder ausgefüllt werden müssen - ein roter Stern allein reicht nicht
Wenn etwas falsch ausgefüllt wurde, muss die Fehlermeldung genau sagen was falsch ist und wie man es richtig macht Beispiel: Statt nur "Ungültige Eingabe" sollte die Meldung lauten: "Bitte geben Sie eine gültige E-Mail-Adresse ein (beispielsweise: name@domain.de)"
Zeitliche Aspekte
Wenn es Zeitbegrenzungen gibt (z.B. für Formulare), müssen Nutzer sie verlängern oder abschalten können
Bei automatischen Bildwechseln (Slider, Karussells) muss es eine Pause-Funktion geben
Blinkende oder animierte Inhalte dürfen nicht länger als 5 Sekunden laufen, wenn sie nicht gestoppt werden können Beispiel: Bei einem Online-Banking-Portal sollte vor dem automatischen Ausloggen eine Warnung erscheinen mit der Option, die Sitzung zu verlängern
Wichtiger Hinweis: Diese Checkliste deckt die grundlegendsten Aspekte ab. Barrierefreiheit ist ein komplexes Thema, das regelmäßige Überprüfung und Anpassung erfordert. Automatische Tests können unterstützen, ersetzen aber keine manuelle Prüfung durch Experten.
Möchtest du mehr über digitale Barrierefreiheit erfahren oder brauchst du Unterstützung bei der Umsetzung? Kontaktiere uns – wir helfen dir gerne dabei, deine digitalen Angebote für alle zugänglich zu machen.
Inhalte
Artikel geschrieben von
Alex Schiller