Checkliste

Hast du die Farben barrierefrei angewendet?

Kann man die Farben gut erkennen?

• Informationen werden nicht ausschließlich durch Farben dargestellt
• Informationen werden nicht nur durch Farben gezeigt

Hast du Schriftkontraste gut lesbar gewählt?

Kann man den Text gut erkennen?

• Das Kontrastverhältnis der Schriftfarbe zur Hintergrundfarbe sollte für Level AA > 4,5:1, für Level AAA > 7:1 sein
• Das Kontrastverhältnis der Schriftfarbe von großer Schrift (ab 18 Punkt oder 14 Punkt in fett) und der Hintergrundfarbe ist für Level AA > 3:1, für Level > AAA 4,5:1
• Dieses Tool berechnet deinen Farbkontrast und zeigt automatisch die Konformität an

• Der Unterschied zwischen der Schriftfarbe und dem Hintergrund sollte groß genug sein
• Hier kannst du dir den Unterschied ausrechnen lassen

Ist deine Schrift lesbar? (Level: AAA)

Kann man deinen Text lesen? (Level: AAA)

• Dein Text sollte im Flattersatz links- oder rechtsbündig ausgerichtet sein
• Dein Text sollte pro Zeile nicht mehr als 80 Zeichen lang sein
• Die Vorder- und Hintergrundfarbe sollten veränderbar sein, z.B. als Dunkelmodus
• Dein Zeilenabstand ist > 1,5 (für Absätze) und dein Abstand (nach Absätzen) ist > 1,5 so groß wie der Zeilenabstand.

• Der sollte links oder rechts ausgerichtet sein
• Der Text sollte kurze Zeilen haben
• Es sollte so etwas wie einen Dunkelmodus geben
• Der Zeilenabstand sollte mindestens 1.5 sein

Hast du die Sprache gekennzeichnet?

• Sprache sollte immer im HTML gekennzeichnet sein. Das geht bspw. einfach mit lang="de"
• Die Sprache sollte auch immer als Attribut bei Zitaten im Blockquote-Element angegeben werden. Auch das geht einfach mit bspw. lang="en"

• Sprache muss immer im HTML gekennzeichnet sein. Z.B. mit lang="de"

Hast du Schriftkontraste gut lesbar gewählt? (Level: AAA)

Hat deine Schrift einen hohen Kontrast (Level: AAA)

• Das Kontrastverhältnis der Schriftfarbe zur Hintergrundfarbe sollte für Level AA > 4,5:1, für Level AAA > 7:1 sein.
• Das Kontrastverhältnis der Schriftfarbe von großer Schrift (ab 18 Punkt oder 14 Punkt in fett) und der Hintergrundfarbe ist für Level AA > 3:1, für Level > AAA 4,5:1.
• Dieses Tool berechnet deinen Farbkontrast und zeigt automatisch die Konformität an.

• Schau mal → hier, wenn du mehr wissen willst

Ist dein Aufbau logisch?

• Dein HTML-Quelltext sollte in logischer Reihenfolge aufgebaut sein, sodass der Inhalt z.B. für Screenreader nachvollziehbar wiedergegeben werden kann
• Das Styling deiner Elemente (z.B. durch Positionierung) sollte keine inhaltliche Verwirrung erzeugen

• Dein HTML-Quelltext sollte in logischer Reihenfolge aufgebaut sein. Damit kann der Inhalt z.B. für Screenreader gelesen werden
• Aussehen darf nicht stören

Sind deine Überschriften logisch aufgebaut?

• Deine Überschriften sollten eine klare Struktur vermitteln
• In deinem HTML-Quelltext sollten Überschriften hierarchisch gegliedert sein (h1, h2, ...)
• Die Überschriften sollten alle Inhaltsabschnitte einleiten (Level: AAA)

Verwendest du für die Inhaltstypen die vorgesehene HTML-Elemente?

• Deine Überschriften sollten eine klare Struktur vermitteln
• In deinem HTML-Quelltext sollten Überschriften hierarchisch gegliedert sein (h1, h2, ...)
• Die Überschriften sollten alle Inhaltsabschnitte einleiten (Level: AAA)

Ist deine Webseite optisch vergrößerbar?

• Mit einer Option, wie bspw. "Text vergrößern" (auf 200%) oder einer maximalen Breite von 320px bleiben Lesbarkeit und Funktionalität erhalten. In der Regel braucht es dafür ein responsives Design.

Ist die Syntax deiner Seite korrekt?

• Dein HTML ist fehlerefrei und standardkonform
• Für alle notwendigen Inhalte werden Metainformationen mitgegeben, sodass die Barrierefreiheit unterstützt wird

Sind deine Elemente geeignet für Screenreader?

• Alle Bildelemente sollten mit einem alt-Attribut passend beschrieben werden
• Ist das Bildelement zu komplex und der alternative Text reicht nicht aus, sollte eine ausführliche Beschreibung bereitgestellt und im alt-Text darauf verwiesen werden
• Grafische Dekoelemente sollten ein leeres ALT-Attribut enthalten und sind mit aria-hidden-Attribut ausgeblendet. Alternativ werden sie per Style-Script als Hintergrund eingebunden
• Verwendete Frames oder Iframes sollten entsprechend betitelt sein
• Für Inhalte sollten Texte anstelle von Schriftgrafiken eingesetzt werden (Ausnahme: Logos)

Hast du Alternativen für audiovisuelle Medien?

• Du solltest ein Transkript für Audio-Inhalte (bspw. mp3-Dateien) bereitstellen
• Alle audiovisuellen Inhalte sollten synchron untertitelt sein
• Wenn du in Videos relevante Inhalte ausschließlich visuell darstellst, sollten Audiobeschreibungen bereitgestellt werden
• Verwendete Frames oder Iframes sollten entsprechend betitelt sein
• Sprachwidergaben sollten keine HIntergrundgeräusche haben

Kann man Inhalte, die automatisch abspielen steuern?

• Inhalte mit Bewegung (z.B. Slideshows oder Videos auf autoplay) sollten pausiert oder gestoppt werden können, wenn sie mehr als fünf Sekunden dauern
• Inhalt der sich laufend aktualisiert (z.B. Newsticker) kann pausiert, gestoppt oder manuell kontrolliert werden
• Es gibt keine zeitliche Begrenzung für Elemente, es sei denn, Benutzer:innen können dies abschalten oder anpassen
• Verwendete Frames oder Iframes sollten entsprechend betitelt sein
• Sprachwidergaben sollten keine HIntergrundgeräusche haben

Ist deine Gestaltung intuitiv und die Funktionen vorhersehbar?

• Der Inhalt sollte sich nicht verändern, wenn er fokussiert wird
• Der Inhalt verändert sich nicht automatisch, wenn Benutzer:innen eine Eingabe tätigen, außer das wurde vorher angekündigt
• Kontextes verändert sich nur durch Bestätigung (Level: AAA).

Werden deine Inhalte ohne Reizüberlutungausgegeben?

• Visuelles Blitzen sollten nicht zu Stark sein und innerhalb eines Grenzwerts liegen
• Deine Inhalte sollten nicht öfter als dreimal in einer Sekunde blitzen (Level: AAA)

Sind deine Formulare übersichtlich aufgebaut?

• Formularfelder sollten sinnvoll im label-Element beschriftet sein (Placeholder- oder Platzhalter-Texte innerhalb der Felder sind keine Beschriftungen!)
• Sind deine Formulare mehrteilig, sollten sie aus inhaltlich zusammengehörigen Gruppen (fieldset) in deinem HTML bestehen

Funktioniert deine Formulareingabe hindernisfrei?

• Zu grafischen Captchas sollte entweder ganz verzichtet oder eine Alternative bereitgestellt werden
• Benutzer:innen sollten auch nach Ablauf einer Sitzung, nach erneuter Anmeldung die Aktivität ohne Datenverlust fortführen können (Level: AAA)
• Benutzer:innen sollten gewarnt werden, wenn eine Unterbrechung zum Datenverlust ihrer Eingaben führt – sofern die Eingaben nicht für > 20 Stunden Inaktivität erhalten bleiben.

Werden Benutzer:innen unterstützt, falsche Eingaben zu vermeiden oder zu korrigieren??

• Eingabefehler sollten automatisch erkannt werden und in einer Fehlermeldung einen klaren Hinweis geben
• Wenn eine bestimmte Eingabe erwartet wird, sollten Beschriftungen oder Hinweise angegeben werden
• Wenn falsche Eingabe erfolgen, sollten Korrekturempfehlungen werden angegeben
• Wenn Eingaben rechtliche oder finanzielle Folgen haben, müssen diese vor dem Absenden überprüft, geändert, gelöscht oder bestätigt werden können
• Wenn bestimmte Eingaben oder Eingaben in einem bestimmten Format erfolgen, sollte Hilfe dafür vorliegen (Level: AAA).

Ist es einfach oder intuitiv für Benutzerinnen sich durch deine Webseite zu navigieren?

• Die Navigation sollte innerhalb deiner Webseite gleichbleibend angeordnet und aufgebaut sein
• Elemente mit gleicher Funktion, sollten innerhalb deiner Webseite gleich bleiben
• Wiederholen sich Elemente sind diese gruppiert oder durch Überschriften ausgezeichnet und können mit Sprungmarken übergangen werden
• Die Fokus-Reihenfolge der Links in der Navigation und im Inhalt sollte logisch sein
• Alle Linktexte sollten aus sich selbst oder aus dem Kontext heraus verständlich sein

Gibt es zusätzliche Navigationsmöglichkeit?

• Es sollte mindestens eine weitere Möglichkeit zusätzlich zur Navigation, um auf Inhalte zuzugreifen (z.B. Suchfunktion, Inhaltsverzeichnis, etc.)

Hast du alle Anweisungen eindeutig formuliert??

• Es gsollteibt keine optischen oder akustischen Anweisungen geben, wie bspw. „Klicke die grüne Box“

Kann man deine Website mit der Tastatur bedienen?

• Alle Funktionen, Bedienelemente oder Sprungmarken sollten über die Tabulatortaste erreichbar und sichtbar sein
• Elemente im :focus sollten bei Ansteuerung mit der Tastatur gekennzeichnet sein
• Für die Bedienung sollten keine zusätzlichen Tastanschläge erforderlich sein
• Der Fokus sollte bei keinem Element blockiert sein