Prüfbogen
Schau bei jeder Frage in die Ausgangsseite. Die Hinweise zeigen dir, wie du prüfst.
1. Sagt der Titel im Browser-Tab, worum es geht? Ist die Sprache der Seite angegeben?
So prüfst du das: Schau auf den Tab. Schau in den Quelltext. Steht im <html>-Tag lang="de"? Anleitung: Quelltext ansehen (öffnet in neuem Tab)
Welche Barriere ist das?
Barriere: Der Seitentitel sagt nichts aus. Die Sprache der Seite fehlt.
Wer hat damit Probleme? Menschen mit Vorlese-Programm hören zuerst den Titel. Ein Titel wie „Seite“ hilft nicht. Ohne Sprachangabe spricht das Programm Wörter falsch aus. Auch wenn viele Tabs offen sind, findet man die Seite schlecht wieder.
Was hilft? Ein Titel, der das Thema nennt. Dazu lang="de" im <html>-Tag.
Welche Barriere hast du gefunden? (freiwillig)
2. Hat die Seite eine große Überschrift (h1) und Zwischenüberschriften? Ist sie in Bereiche geteilt (header, nav, main, footer)?
So prüfst du das: Suche im Quelltext nach h1, h2, header, nav, main und footer. Großer Text allein ist keine Überschrift. Eine Überschrift braucht ein h-Tag. Anleitung: Im Quelltext suchen (öffnet in neuem Tab)
Welche Barriere ist das?
Barriere: Die Gliederung gibt es nur im Aussehen, nicht im Quelltext.
Wer hat damit Probleme? Menschen mit Vorlese-Programm springen von Überschrift zu Überschrift. Sie springen auch von Bereich zu Bereich. So verschaffen sie sich einen Überblick. Ohne h-Tags und Bereiche geht das nicht. Sie müssen dann alles von oben bis unten hören.
Was hilft? Eine h1 und passende h2. Dazu header, nav, main und footer.
Welche Barriere hast du gefunden? (freiwillig)
3. Sagt jeder Link, wohin er führt?
So prüfst du das: Lies nur die Linktexte, ohne den Text drumherum. Weißt du bei jedem Link, wohin er führt?
Welche Barriere ist das?
Barriere: Der Linktext sagt nichts über das Ziel, zum Beispiel „hier“.
Wer hat damit Probleme? Menschen mit Vorlese-Programm lassen sich alle Links der Seite vorlesen. Sie hören dann nur „hier, hier“. Das ist nicht zu verstehen. Auch beim schnellen Überfliegen hilft ein solcher Link niemandem.
Was hilft? Der Linktext nennt das Ziel, zum Beispiel „Zur Anmeldung“.
Welche Barriere hast du gefunden? (freiwillig)
4. Hat jedes Bild einen Alternativtext (alt)?
So prüfst du das: Suche im Quelltext nach img. Steht dort alt="…"? Wäre der Sinn des Bildes auch ohne das Bild klar? Anleitung: Im Quelltext suchen (öffnet in neuem Tab)
Welche Barriere ist das?
Barriere: Das Bild hat keinen Alternativtext.
Wer hat damit Probleme? Blinde Menschen sehen das Bild nicht. Ihr Vorlese-Programm liest dann nur „Bild“ oder den Dateinamen vor. Auch wenn ein Bild nicht lädt, fehlt die Information.
Was hilft? Ein kurzer Text im alt-Attribut. Er sagt, was auf dem Bild wichtig ist.
Welche Barriere hast du gefunden? (freiwillig)
5. Kann man Text und Hintergrund gut unterscheiden (Kontrast)?
So prüfst du das: Klicke mit der rechten Maustaste auf einen Text und wähle „Untersuchen“. Die Entwicklertools zeigen dir den Kontrastwert. Bei normalem Text sollte er mindestens 4,5 zu 1 sein. Erkennst du Links auch, wenn du die Farben nicht siehst? Anleitung: Entwicklertools und Kontrast (öffnet in neuem Tab)
Welche Barriere ist das?
Barriere: Der Kontrast zwischen Text und Hintergrund ist zu schwach. Oder eine Information steckt nur in der Farbe.
Wer hat damit Probleme? Menschen mit Sehschwäche oder Farbsehschwäche. Aber auch alle, die auf ein Handy in der Sonne schauen. Ein Link, der nur durch seine Farbe auffällt, wird oft nicht erkannt.
Was hilft? Dunkler Text auf hellem Grund, Kontrast mindestens 4,5 zu 1. Links unterstreichen.
Welche Barriere hast du gefunden? (freiwillig)
6. Bleibt die Seite gut lesbar, wenn du auf 200 % zoomst und das Fenster schmal machst?
So prüfst du das: Drücke Strg und + , bis 200 % da stehen. Ist die Schrift groß genug? Sind die Zeilen zu lang oder zu eng? Gibt es Lücken im Blocksatz?
Welche Barriere ist das?
Barriere: Die Schrift ist sehr klein und fest eingestellt. Die Zeilen sind sehr lang und eng. Der Text steht im Blocksatz. Die Seite passt sich nicht an kleine Fenster an.
Wer hat damit Probleme? Menschen mit Sehschwäche, die vergrößern müssen. Menschen mit Lese-Rechtschreib-Schwäche, für die Blocksatz mit Lücken schwer zu lesen ist. Und alle, die die Seite auf dem Handy öffnen.
Was hilft? Größen in rem statt px. Viel Zeilenabstand. Linksbündiger Text. Eine begrenzte Zeilenbreite. Das viewport-Meta-Tag.
Welche Barriere hast du gefunden? (freiwillig)
7. Hat jedes Formularfeld eine sichtbare Beschriftung? Ist klar, welche Felder Pflicht sind, auch ohne Farbe?
So prüfst du das: Klicke auf die Beschriftung. Springt der Cursor ins Feld? Bleibt die Beschriftung stehen, wenn du tippst?
Welche Barriere ist das?
Barriere: Die Felder haben nur einen Platzhalter statt einer Beschriftung. Pflichtfelder sind nur durch eine Farbe markiert.
Wer hat damit Probleme? Ein Platzhalter verschwindet beim Tippen. Man vergisst dann, was ins Feld gehört. Vorlese-Programme erkennen den Zweck des Feldes nicht. Wer Rot nicht sieht, erkennt Pflichtfelder nicht.
Was hilft? Ein label mit for zu jedem Feld. Pflichtfelder mit einem Text kennzeichnen, zum Beispiel „Alle Felder müssen ausgefüllt werden.“
Welche Barriere hast du gefunden? (freiwillig)
8. Ist der Text leicht zu lesen?
So prüfst du das: Zähle die Wörter im längsten Satz. Steht in einem Satz nur ein Gedanke? Wird für eine Sache immer dasselbe Wort benutzt? Werden Fachwörter erklärt?
Welche Barriere ist das?
Barriere: Der Text ist schwer zu verstehen. Die Sätze sind sehr lang. Für eine Sache stehen mehrere Wörter da. Fachwörter werden nicht erklärt.
Wer hat damit Probleme? Menschen, die lange und schwierige Texte schwer lesen. Menschen, die noch nicht gut Deutsch können. Und alle, die es eilig haben.
Was hilft? Kurze Sätze mit einem Gedanken. Für eine Sache immer dasselbe Wort. Fachwörter erklären oder weglassen. Listen benutzen.
Welche Barriere hast du gefunden? (freiwillig)
Tastatur-Test
Lege die Maus weg. Benutze nur die Tastatur. Mit der Tab-Taste kommst du zum nächsten Element. Mit Umschalt und Tab kommst du zurück.
9. Kommst du mit der Tab-Taste zu allen Links, zu den Feldern und zum Absende-Knopf?
So prüfst du das: Drücke immer wieder Tab. Zähle, was du erreichst. Fehlt etwas?
Welche Barriere ist das?
Barriere: Manche Elemente kann man mit der Tastatur nicht erreichen.
Wer hat damit Probleme? Menschen, die keine Maus bedienen können, zum Beispiel wegen einer Bewegungseinschränkung. Auch Menschen mit Vorlese-Programm arbeiten meist nur mit der Tastatur. Das passiert oft, wenn ein Menüpunkt aus einem span oder div mit onclick gebaut ist.
Was hilft? Die richtigen Elemente benutzen: a für Links und button für Knöpfe. Die erreicht man automatisch mit Tab.
Welche Barriere hast du gefunden? (freiwillig)
10. Siehst du immer, wo du gerade bist?
So prüfst du das: Achte auf einen Rahmen um das Element, das gerade aktiv ist. Man nennt das den Fokus.
Welche Barriere ist das?
Barriere: Der Fokus ist nicht zu sehen.
Wer hat damit Probleme? Alle, die mit der Tastatur arbeiten. Sie wissen nicht, wo sie gerade sind. Dann drücken sie Enter an der falschen Stelle. Der Rahmen verschwindet oft, wenn im CSS outline: none steht.
Was hilft? Den Rahmen nicht ausblenden. Besser: einen deutlichen Rahmen gestalten, zum Beispiel mit :focus-visible.
Welche Barriere hast du gefunden? (freiwillig)
11. Kannst du das Formular nur mit der Tastatur absenden?
So prüfst du das: Gehe mit Tab zum Absende-Knopf. Drücke Enter oder die Leertaste.
Welche Barriere ist das?
Barriere: Der Absende-Knopf lässt sich mit der Tastatur nicht bedienen.
Wer hat damit Probleme? Alle, die nur mit der Tastatur arbeiten. Ein div, das wie ein Knopf aussieht, reagiert nicht auf Enter oder Leertaste. Das Formular lässt sich dann gar nicht absenden.
Was hilft? Ein echtes <button>-Element benutzen.
Welche Barriere hast du gefunden? (freiwillig)