Die WCAG-Kriterien

Ein Überblick und Nachschlagewerk der WCAG 2.2-Kriterien (A & AA) in Kombination mit den Prüfschritten der BITV, für eine barrierearme Webseite, App oder Onlineshop. Anders gesagt: Das Verstehen der WCAG, tut gar nicht so weh!

Die WCAG-Kriterien

Drei Illustrationen von dekorative Grafiken. Daneben eine Illustration von einem Roboter-Kopf, der einen Screenreader darstellt. Er liest nichts vor, weil die Bilder keinen Alt-Text haben.

Merksatz:

"Ist das Bild nur dekorativ, spar dir den Alt-Text definitiv!"

Kurzbeschreibung:

Ein Bild sollte ein leeres Alt-Attribut haben, wenn es nur einen dekorativen Effekt hat oder keine nützlichen Informationen vermittelt. Im Zweifel ist es besser, einen Alt-Text zu schreiben, als ihn wegzulassen.

Illustration von einem Bild, dass an den Stil von Picasso erinnert. Daneben eine Illustration von einem Roboter-Kopf, der einen Screenreader darstellt. Der Screenreader beschreibt das Bild und sagt: "Ein echter Picasso!"

Merksatz:

"Ich kann das Bild nicht sehen, drum schreib mir Text, ums zu verstehen!"

Kurzbeschreibung:

Jedes Bild, das Infos vermittelt oder dazu beiträgt, die Inhalte deiner Seite besser zu verstehen, benötigt einen Alternativtext bzw. eine Textalternative (zum Beispiel neben dem Bild) für Screenreader.

Illustration von einem Formularfeld. Darauf steht Personen-Daten-Formular. Es sind zwei Eingabefelder zu sehen, Name und Kreditkartennummer. Darunter ist jeweils ein autocomplete-tag mit der richtigen Bezeichnung für das Feld.

Merksatz:

"Um Formulare automatisch zu befüllen, zeige mir den Zweck, um die Aufgabe zu erfüllen"

Kurzbeschreibung:

Wenn User persönliche Daten eingeben müssen, sollten die Eingabefelder mit dem richtigen Autocomplete-Attribut versehen sein.

Drei Zustände eines Buttons, die flackern symbolisieren sollen.

Merksatz:

"Blitzt ein Element häufiger als dreimal auf, nehme ich das nicht mehr in Kauf!"

Kurzbeschreibung:

Verzichte auf Elemente, die schnell hintereinander aufblitzen. Darunter fallen etwa wild blinkende Buttons oder auch hektische GIFs.

Eine Illustration von einem Video mit einer Lautsprecher Icon, das hören symbolisiert.

Merksatz:

"Zeigen Bilder in Videos wichtige Information, brauchst du Audiodeskription!"

Kurzbeschreibung:

Videos benötigen eine Audiodeskription, wenn sie wichtige Inhalte vermitteln, die nicht über das gesprochene Wort benannt werden.

Illustration von zwei Buttons. Ein mal von einem Finger gedrückt und ein mal nicht gedrückt. Darüber steht, dass nicht direkt eine Aktion ausgeführt werden darf, wenn man den Finger auf einem Bedienelement hat.

Merksatz:

"Mit dem Finger drücken und halten, sollt keine Konsequenzen entfalten!"

Kurzbeschreibung:

Wenn du mit dem Finger einen Button auf deinem Telefon drückst und kurz hältst, sollte das nicht direkt die Aktion auslösen. Auch ein Link sollte dich bei der Aktion nicht gleich weiterleiten.

Eine Seite mit Zahlen-Markierungen für die Reihenfolge, in der die Elemente angesteuert werden sollen.

Merksatz:

"Geh ich mit der Tastatur in deine Webseite rein, sollte die Reihenfolge logisch sein."

Kurzbeschreibung:

Navigiere ich mit der Tastatur, sollten deine Elemente in einer nachvollziehbaren Reihenfolge sein. Ich sollte also zum Beispiel nicht vom Header zuerst in den Footer springen und dann zurück in den Hauptbereich.

Beispiel eines Dokumenttitels mit Namen der Seite auf der man sich befindet plus Namen der ganzen Webseite.

Merksatz:

"Schreibe den Titel jeder Seite gut, dann weiß ich, was die Seite tut."

Kurzbeschreibung:

Jede Seite benötigt einen sinnvollen HTML-Titel, damit ich sie im Browser leichter finden kann. Der Titel sollte den „Namen der momentanen Seite“ plus den „Namen der ganzen Webseite“ beinhalten.

Ein Beispiel von einem Sprunglink in einem Header.

Merksatz:

"Kann ich mit assistiver Technologie Bereiche überspringen, wird mir die Navigation gelingen!"

Kurzbeschreibung:

Dein HTML sollte es ermöglichen, Bereiche zu überspringen, die sich auf einer Webseite wiederholen (Beispiel: Header). Nutze dazu eine oder mehrere Dinge wie Sprunglinks, Listen, Überschriften, Main-Tag etc.

Eine Illustration von einem Slider auf einer Webseite. Der Slider hat ein Pause-Knopf, um ihn anzuhalten.

Merksatz:

"Willst du Elemente bewegen? Bei unter 5 Sekunden, hast du meinen Segen. "

Kurzbeschreibung:

Ich muss Animationen auf deiner Webseite stoppen können, wenn sie über 5 Sekunden dauern. Es sei denn, sie sind zwingend notwendig. (Animation einer Zeitanzeige für Sicherheitsaspekte.)

Illustration von zwei Notifikationen. Die Erste hat eine Zeitanzeigen. Nach diese Zeit wird sie verschwinden. Die Zweite hat das nicht. Das Erste ist ein Fehler.

Merksatz:

"Gib mir genug Zeit, sonst tut es dir noch leid!"

Kurzbeschreibung:

Lasse Meldungen nicht automatisch verschwinden und logge Nutzer nicht automatisch aus. Gibt es zeitliche Begrenzungen? Dann mache sie verlängerbar – außer sie sind essenziell (Beispiel: Auktionen oder Online-Prüfungen).

Illustration von den Tasten, S, Z und M. Daneben steht, wofür sie Kurzbefehle sind und ein Switch-Knopf, um sie an- und auszuschalten.

Merksatz:

"Hast du Tastatur-Kurzbefehle auf der Seite? Mach sie abschaltbar, sonst such ich das Weite."

Kurzbeschreibung:

Wenn du Tasten mit Funktionen ausgestattet hast (oft in Apps), mach sie anpassbar oder abschaltbar, sonst kann es mit Tastaturnavigation Probleme geben.

Ein Modal in dem steht:" Ich bin ein Modal, in das man nicht mehr reinnavigieren kann."

Merksatz:

"Tu mir einen großen Gefallen, stell mir keine Tastaturfallen!"

Kurzbeschreibung:

Wenn ich etwas mit Tastatur ansteuern kann, musst du sicherstellen, dass ich: a) nicht steckenbleibe und immer weg-navigieren kann und b) ich auch überall wieder hinkomme (zurück in ein Modal).

Eine Illustration von einer bunten Tastatur.

Merksatz:

"Schließ mich nicht aus, nutze ich keine Maus!"

Kurzbeschreibung:

Deine Webseite muss für mich bedienbar sein, auch wenn ich keine Maus nutzen kann.

Illustration von einer Navigation. Ein Menü-Punkt hat ein Untermenü, welches ausgeklappt ist. Ein Mauszeiger hovert über den obersten Menü-Punkt.

Merksatz:

"Blendest du zusätzlich Inhalte ein, lass sie auch bedienbar sein!"

Kurzbeschreibung:

Eingeblendete Elementen (etwa Menüs oder Modale) sollten: a) Mit der Maus überfahrbar sein, ohne zu verschwinden. b) Sich nicht nach einer Zeit allein schließen. c) Sich schließen lassen, ohne den Fokus zu verschieben (zum Beispiel mit ESC oder Aktivieren des auslösenden Elements).

Dreimal der gleiche Text. Ein mal mit 150 % Zeilenabstand. Ein mal mit größerem Zeilenabstand und noch mal mit größerem Zeilenabstand. Der letzte Text wird unten abgeschnitten. Das ist ein Fehler und soll zeigen, dass das nicht passieren darf.

Merksatz:

"Entscheiden sich Nutzer für mehr Zeilenabstand, schneide ihnen die Texte nicht ab, am Rand!"

Kurzbeschreibung:

Wenn ich den Zeilen- oder Buchstabenabstand vergrößere, dürfen dabei die Inhalte deiner Webseite oder App nicht abgeschnitten oder verdeckt werden.

Drei unterschiedliche Buttons. Der Erste ist dunkelrot und hat ausreichend Kontrast zum Hintergrund. Der Zweite ist hellblau, aber der Kontrast passt, weil er einen schwarzen Rahmen hat. Der letzte ist gelb und hebt sich nicht stark genug vom Hintergrund ab. Das ist ein Fehler.

Merksatz:

"Brauch ich das Element, um den Inhalt zu verstehen, ist es wichtig, es gut zu sehen!"

Kurzbeschreibung:

Alle Elemente, mit denen ich interagieren kann (Icon-Buttons / Buttons) oder die sonst wie wichtig fürs Verständnis sind, müssen sich vom Kontrast ausreichend vom Hintergrund abheben (min. 3:1).

Ein Text, der sich richtig anpasst, wenn man zoomt.

Merksatz:

"Zoome ich auch 400 % hinein, müssen deine Inhalte trotzdem lesbar sein!"

Kurzbeschreibung:

Wenn ich deine Webseite auf 400 % vergrößere, muss sie sich so gut anpassen, dass bei Texten beziehungsweise Absätzen kein horizontaler Scrollbalken entsteht.

Im Bild steht: Hier im Bild sollte eigentlich kein Text stehen, sorry! Daneben ist eine grüne Figur, die fragend schaut und dazu sagt sie: Typisch!

Merksatz:

"Zeigst du wichtigen Text im Bild, dann ist das für mich zu wild!"

Kurzbeschreibung:

Schreibe keine wichtigen Infos als Text in Bilder. Nutzerinnen können die Texte weder anpassen noch können assistive Technologien sie lesen. Ausnahme, wenn Bilder der Dokumentation dienen (wie hier!).

Es ist zweimal "Text" zu lesen. Der zweite Text ist größer. Daneben ist ein Pfeil und es steht 200% dran.

Merksatz:

"Für manche ist dein Text zu klein, darum muss das Zoomen sein."

Kurzbeschreibung:

Stelle sicher, dass man Text auf bis zu 200 % vergrößern kann, ohne dass Teile des Textes oder der Webseite davon verdeckt werden oder ganz verschwinden. Wir empfehlen relative Einheiten wie rem oder em.

Zwei Texte. Einer ist sehr hell und hat nicht genug Kontrast, der andere ist schwarz und der Kontrast ist ausreichend.

Merksatz:

"Kann ich Farben nicht gut erkennen, werde ich mich von deiner Seite trennen."

Kurzbeschreibung:

Die Kontraste von Texten zum Hintergrund muss stark genug sein. Der vorgeschriebene Kontrast der WCAG liegt bei mindestens 4,5:1, bei unter 24px und mindestens 3:1 bei Schriftgrößen darüber.

Illustration von einem Überweisungs-Formular mit IBAN und Betrag. Daneben eine Illustration von einem Modal, das aufkommt, wenn man auf den Button im Formular klickt. Man muss noch mal bestätigen, dass man die Überweisung wirklich machen will.

Merksatz:

"Bestätigen, rückgängig machen und korrigieren, sollte bei wichtigen Daten funktionieren."

Kurzbeschreibung:

Wenn ich eine Transaktion oder eine ähnliche Interaktion ausführe, die negative Konsequenten haben kann, muss es eine Möglichkeit geben, den Vorgang zu bestätigen oder ihn rückgängig zu machen.

Illustration von einem Login-Formular. Das Passwort ist falsch eingeben. Darunter ist eine Fehlermeldung, in der steht: Das Passwort ist falsch. Es muss mindestens 12 Zeichen enthalten.

Merksatz:

"Zeigst du mir im Formular Fehler an, häng ein Lösungshinweis mit dran."

Kurzbeschreibung:

Wenn du mir einen Fehler auf deiner Webseite anzeigst, schreibe den Fehlertext so, dass ich weiß, was ich tun muss, um den Fehler zu beheben.

Zwei Formularfelder. Das erste hat keine Beschriftungen, das zweite schon.

Merksatz:

"Gib Formularfeldern Beschreibungen oder Namen, um sie als User zu erahnen."

Kurzbeschreibung:

Wenn ein User auf deiner Webseite etwas eingeben muss, musst du ihn anleiten, was er eingeben soll. So brauchen zum Beispiel Eingabefelder eine Beschreibung (wir empfehlen: sichtbare Labels).

Ein Formular zudem ein Fehler durch Text angezegit wird.

Merksatz:

"Um Fehler wirklich zu verstehen, sollte ich Texte dazu sehen!"

Kurzbeschreibung:

Fehlermeldungen sollten leicht erkennbar sein und nicht nur durch Farben dargestellt werden. Du benötigst zusätzlichen Text, um sie zu beschreiben. Dieser Text muss auch für Screenreader lesbar sein.

Beispiel von zwei Paragrafen, die jeweils einen eigenen p-Tag haben.

Merksatz:

"Gib Absätzen ein ‚p‘, sowie ‚strong‘ und ‚em‘, damit ichs seh!"

Kurzbeschreibung:

Deine Paragrafen so wie Auszeichnungen in deinen Paragrafen (em, strong) müssen die richtigen HTML-Elemente haben, damit sie verständlich für assistive Technologien sind.

Beispiel einer ungeordneten Liste und dir richtigen HTML-Elemente dafür.

Merksatz:

"Zeigst du eine Liste, nutze ul" oder "ol" für die Kiste!"

Kurzbeschreibung:

Deine Listen müssen die richtigen HTML-Elemente haben. Sie müssen also entweder eine <ul> oder eine <ol> sein, je nachdem, ob sie eine geordnete Liste sind oder nicht.

Auf dem Bild steht: Nicht konsistent! Darunter sind zwei Webseiten. Auf einer Seite ist die Navigation oben und auf der zweiten Seite unten.

Merksatz:

"Halte die Navigation konsistent, damit der User sie wiedererkennt."

Kurzbeschreibung:

Deine Navigation sollte auf deiner Webseite immer an der gleichen Stelle zu finden sein. Einfach gesagt: einmal oben links, immer oben links!

Eine Illustration einer Checkbox. Diese löst unerwartet Kontextänderungen aus, wenn man sie anklickt. Sie bewegt den Fokus weg oder öffnet einen neuen Tab.

Merksatz:

"Löst meine Eingabe Kontextänderungen aus, macht sie die Seite zu einem Graus!"

Kurzbeschreibung:

Eine Eingabe in einem Formular sollte keine unerwarteten Kontextänderungen auslösen. Der Fokus sollte zum Beispiel nicht einfach auf ein anderes Element springen oder sich ein neuer Tab öffnen.

Illustration eines Buttons mit Fokus. Der Fokus hat ein Modal geöffnet, in dem steht: "Ich bin das Modal, das sich, nicht-barrierefrei, schon bei Fokus öffnet.

Merksatz:

"Nur weil ich etwas fokussiere, heißt es nicht, dass was passiere!"

Kurzbeschreibung:

Nur weil ich beispielsweise mit Tastatur oder Screenreader einen Fokus auf ein Menü setze oder meinen Finger draufhalte, sollte es nicht den Link betätigen.

Ein Beispiel von einem Paragrafen, in dem eine englischsprachige Phrase verwendet wird.

Merksatz:

"Nutzt du andere Sprache in deinen Sätzen, musst du ein Lang-Attribut setzen."

Kurzbeschreibung:

Wenn du in deinem Text Phrasen aus einer anderen Sprache verwendest, muss das „lang“-Attribut im HTML gesetzt werden, damit assistive Technologien diese Sprache korrekt wiedergeben.

Illustration des HTML-Tags mit dem HTML-Sprachen-Attribut für Deutschland.

Merksatz:

"Willst du, dass ich dich lesen kann, zeig mir deine Sprache an. "

Kurzbeschreibung:

Gib im HTML-Dokument das “lang”-Attribut an, damit assistive Technologien die Seite in der richtigen Sprache wiedergeben.

Ein Link, der "Mehr erfahren" sagt. Darunter zwei Illustrationen von einem Roboter-Kopf, der einen Screenreader darstellt. Ein mal sagt der Screenreader:"Lerne mehr, zum Thema Barrierefreiheit". Und das zweite Mal sagt er: "Mehr erfahren zum Thema Barrierefreiheit." Das Zweite stimmt, weil die Worte am Anfang sich mit dem Wortlaut des Links decken.

Merksatz:

"Halte deine Beschriftungen gleich, im sichtbaren und im versteckten Bereich."

Kurzbeschreibung:

Nutzt du versteckte Texte, um Links genauer zu beschreiben? Dann müssen diese genau so starten, wie der sichtbare Text. Beispiel: „Mehr erfahren“ und ARIA-Label: „Mehr erfahren über Barrierefreiheit.“

Illustration von einem Handy, welches geschüttelt wird. Daneben ein Plus und ein Button, der da sein muss, um die gleiche Aktion auszuführen, die mit dem Schütteln ausgeführt wird.

Merksatz:

"Muss ich mein Handy schütteln, ist an Alternativen nichts zu rütteln."

Kurzbeschreibung:

Alle Funktionen, die ich durch Bewegungen des Geräts auslösen kann, müssen Alternativen haben, damit sie auch von assistiven Technologien ausgelöst werden können.

Illustration von einem Handy. Darin ist eine Illustration von einem Dreieck, dass sexy sein soll. Darüber steht: swipe nach links oder rechts. Darunter ist zwei Buttons, die Ja und Nein symbolisieren. Daneben steht, dass eine Wischen-Aktion nur barrierefrei ist, wenn es Knöpfe zum Klicken als Alternative gibt.

Merksatz:

"Wenn der User drücken und ziehen kann, biete alternative Möglichkeiten an."

Kurzbeschreibung:

Muss ich mit meinem Finger auf einen Bildschirm drücken und dann ziehen, um eine Aktion auszuführen? Dann braucht es eine Alternative, die auch von assistiven Technologien ausgeführt werden kann.

Illustration von zwei Buttons. Der Erste hat einen Fokus-Rahmen, der andere nicht. Das Zweite ist ein Fehler.

Merksatz:

"Zeig mir einen Rahmen an, damit ich den Tastaturfokus erkennen kann."

Kurzbeschreibung:

Elementen, mit denen der User interagieren kann (Buttons, Links etc.), brauchen einen Fokus-Rahmen. Wir empfehlen, dass dieser Rahmen deutlich sichtbar ist und am besten im CSS als Border umgesetzt wird.

Illustration einer Webseite. Eine Überschrift sagt "jetzt kommen Services". Darunter sieht man eine Aufzählung von 3 Services.

Merksatz:

"Ich komme mir vor, als stehe ich im Wald, beschreiben deine Überschriften nicht den Inhalt."

Kurzbeschreibung:

Deine Überschriften beschreiben den Inhalt oder den Zweck. Auch die Beschriftungen von Formularen und Formularfeldern müssen Sinn ergeben.

Illustration einer Webseite in Graustufen. Dazu steht: "Dieses Design funktioniert auch in Schwarz-Weiß" Darunter ist eine Illustration einer runden Figur, die Fragend nach oben schaut.

Merksatz:

"Muss ich Informationen verstehen, sollte das nicht nur durch Farbe gehen."

Kurzbeschreibung:

Verlasse dich nicht darauf, dass User Farben sehen können. Vermeide es, Dinge nur durch Farben zu zeigen oder zu beschreiben. Wir empfehlen: Deine Webseite sollte auch in Graustufen verständlich sein.

Illustration von einem Menü-Symbol plus einem Lupen-Symbol. Darunter noch mal ein Menü-Symbol plus einem Sitemap-Symbol.

Merksatz:

"Zusätzlich zur Navigation, wird sich eine Suche oder Sitemap lohn."

Kurzbeschreibung:

Gib mir immer mehr als einen Weg, um auf die Inhalte deiner Seite zuzugreifen. Zusätzlich zur Navigation kannst du mir eine Suche oder eine Sitemap anbieten.

Illustration von zwei Buttons. Auf dem einen steht "Hier klicken" auf dem anderen "Zur Produktübersicht". Der erste ist nicht klar genug und ein Fehler.

Merksatz:

"Nutzt du nur Linktexte, wie „Mehr Lesen“ oder „Hier klicken“, werde ich dich gehörig anzicken!"

Kurzbeschreibung:

Linktexte müssen verständlich sein. Ein Link, mit dem Titel „mehr Lesen“, sagt mir nicht, wohin der Link führt. Auch Bilder, die als Links eingesetzt werden, benötigen einen verständlichen Text, wohin sie führen.

Ein Audio-Symbol mit einem Pause-Symbol dazu.

Merksatz:

"Geht der Ton per Knopfdruck nicht aus, bin ich auch schon direkt raus!"

Kurzbeschreibung:

Wenn deine Webseite Geräusche macht, musst du mir eine Möglichkeit geben, diese auszuschalten.

Zwei Illustrationen von einem Handy. Ein mal steht es und ein mal liegt es. Darin ist ein Kontaktformular gezeigt, dass seine Anordnung ändert, wenn das Handy anders gehalten wird.

Merksatz:

"Lass User ihren Bildschirm drehen, sonst ist’s um die Nutzbarkeit geschehen."

Kurzbeschreibung:

Ich muss die Möglichkeit haben, deine Webseite im vertikalen und horizontalen Format anzuschauen, ohne dass Inhalte verdeckt werden oder verschwinden.

Ein Ok-Zeichen neben dem Text: "Klicke auf den Button "Jetzt bestellen". Ein Fehler Zeichen neben dem Text: Klicke auf den gelben, runden Knopf unten. Beide beschreiben den Button darunter, auf dem "Jetzt bestellen" steht.

Merksatz:

"Beschreibst du Inhalte jeglicher Sorte, nutze nicht nur „grün, eckig“ oder andere sensorische Worte."

Kurzbeschreibung:

Um mir zu sagen, wo ich klicken soll, nutze Titel, Linktexte, Beschriftungen und so weiter. Also beschreibe Dinge, die ich mit assistiver Technologie verstehen kann. Mein Screenreader kann „unten links“ nicht sehen.

Eine Überschrift bei der jeder Buchstabe durch ein Leerzeichen getrennt. Das verändert den Sinn.

Merksatz:

"Beeinflusst die Reihenfolge der Elemente den Sinn, kriegen das assistive Technologien auch hin?"

Kurzbeschreibung:

Sorge einfach für eine saubere Struktur deiner Seite. Vermeide es insbesondere Leerzeilen und harte Umbrüche zu benutzen, um Inhalte visuell zu gliedern. Nutze dafür die richtigen Elemente wie Tabellen.

Eine Illustration von einem Kontaktformular. Man sieht das Input-Feld für Vorname. Darüber ist ein Beschriftung des Feldes, die durch das HTML "for"-Element mit dem Input-Feld darunter verknüpft ist.

Merksatz:

"Sei ein Held und verknüpfe Labels per Code mit dem Formularfeld."

Kurzbeschreibung:

Beschriftungen für Formularfelder benötigen ein “for“-Attribut im HTML, um Screenreadern anzuzeigen, auf welches Formularfeld sie sich beziehen.

Eine Illustration von einem Layout, dass mit einer Tabellenstruktur gemacht wurden. Das HTML-Mark-up ist durchgestrichen, weil es nicht verwendet werden darf.

Merksatz:

"Nutzt du Tabellen für dein Layout, habe keine Strukturelemente verbaut!"

Kurzbeschreibung:

Wenn deine Webseite noch HTML-Tabellen fürs Layout nutzt, ist ohnehin schon alles verloren …

Eine Illustration einer Tabelle. Die Tabelle hat zwei Kopfzeilen, ein mal oben und ein mal links. Es sind die HTML-Attribute zu sehen, die man benötigt, um das zu beschreiben. Und zwar scope ist gleich "row" und scope ist gleich "col".

Merksatz:

"Stellst du auf der Seite Tabellen dar, mache den Bezug von Überschrift zu Inhalt klar."

Kurzbeschreibung:

Bei einfachen Tabellen (Bild) sollten die Köpfe mit einem “scope”-Attribute ausgezeichnet sein (theoretisch reicht <th>). Bei komplexen Tabellen müssen sie mit dem “scope”-Attribute sein.

Eine Tabelle mit einer Kopfzeile. Dazu sind die richtigen HTML-Elemente angegeben.

Merksatz:

"Hilf Datentabellen auf den Sprung, mit „th“ oder ARIA-Rollen-Auszeichnung."

Kurzbeschreibung:

Deine Datentabellen benötigen die richtigen Auszeichnungen und HTML-Tags, um von assistiven Technologien verstanden zu werden.

Eine Figur sagt: Zitierst du mich, so vergiss die Blockquote nicht!" Der Text ist in dem HTML-Element Blockquote angezeigt.

Merksatz:

"Zitierst du mich, so vergiss die Blockquote nicht!"

Kurzbeschreibung:

Zitate von Leuten (auch von Kunden) benötigen die richtige Auszeichnung als <blockqoute>.

Nach einer H1 Überschrift kommt eine H2 und dann eine H3

Merksatz:

"Bleibe wirklich stur, bei der Überschriften-Struktur!"

Kurzbeschreibung:

Überschriften müssen die richtige Reihenfolge einhalten. Keine H3 vor einer H2 und so weiter. Eine H1 darf übrigens öfter vorkommen, wenn sie die Seite sinnvoll strukturiert!

Zwei Möglichkeiten: Einmal Audiodiskreption und einmal Voll-Text als Alternative

Merksatz:

"Hast du Audiodeskription oder Volltext als Alternative, unterstelle ich dir edle Motive!"

Kurzbeschreibung:

Deine Videos benötigen eine Audiodeskription, wenn wichtiger Inhalt darin vorkommt, der nicht wörtlich beschrieben ist. Es reicht auch eine Volltext-Alternative, die ist allerdings nur WCAG-Level A und nicht AA.

Es werden zwei Möglichkeiten gezeigt. Zuerst ein Audio-Symbol plus Text und dann ein Abspiel-Knopf Symbol plus ein Audio-Symbol. Dadurch wird symbolisiert, dass man immer eine Alternative bieten muss für Audio & stumme Videos.

Merksatz:

"Stecken in Audios und Videos wichtige Information, lohnt sich eine Alternative schon!"

Kurzbeschreibung:

Für Audiodateien oder Videos ohne Audio müssen Texte als Alternative bereitgestellt werden.

Eine Illustration von einem Video mit Untertitel. Oben links in der Ecke steht Live-Übertragung.

Merksatz:

"Machst du deinen Live-Vortrag, sind Untertitel, was ich mag!"

Kurzbeschreibung:

Live-Vorträge benötigen einen Untertitel. Achte dabei auf eine Eins-zu-Eins-Untertitelung.

Eine Illustration von einem Video mit Untertitel.

Merksatz:

"Ein Untertitel fürs Video macht dich und deine Umgebung froh!"

Kurzbeschreibung:

Aufgezeichnete Videos benötigen Untertitel. Achte dabei auf eine Eins-zu-Eins-Untertitelung.

Eine Illustration von einem CAPTCHA, bei dem man Bilder auswählen muss. Daneben ist eine alternatives CAPTCHA, bei dem man anhackt, dass man kein Roboter ist.

Merksatz:

"Grafische CAPTCHAS? Dann bitte nicht nur eins – entweder mit Alternative, oder keins!"

Kurzbeschreibung:

Wenn du ein grafisches CAPTCHA einsetzt, musst du mindestens eine Alternative dafür bereitstellen.

Logo auf einer Webseite. Darunter eine Illustratorin von einem Roboter-Gesicht, das einen Screenreader darstellt. Dazu steht das, was der Screenreader vorliest: "Link, Bild. Logo verlinkt zur Startseite."

Merksatz:

"Hat das Logo einen Link, gib mir einen Wink!"

Kurzbeschreibung:

Wenn deine Logos oder deine Bilder klickbar sind und an einen anderen Ort führen oder eine Funktion auslösen, benötigen diese Elemente einen Alternativ-Text, damit sie von Screenreadern verstanden werden.

Illustration von zwei Buttons in einer Reihe, die jeweils das gleich sagen, und zwar: "Zu deinem Konto." Darunter wieder zwei Buttons, die aber jetzt jeweils anderer Beschriftung zum gleichen Ziel haben.

Merksatz:

"Wer ‚A‘ sagt, muss auch immer ‚A‘ sagen!"

Kurzbeschreibung:

Die Beschriftungen deiner Navigations- beziehungsweise Interaktionselemente (Buttons, Icons, Formularfelder und so weiter) sollten immer gleich sein.

Ein Beispiel von einer Statusmeldung, die von einem Screenreader vorgelesen wird.

Merksatz:

"Willst du ein reines Gewissen, lass mich von Veränderungen automatisch wissen!"

Kurzbeschreibung:

Wenn du auf der Seite eine Statusnachricht, etwa eine Notifikation, anzeigst, muss diese assistiven Technologien mitgeteilt werden, ohne dass der Nutzende aktiv etwas dafür tun muss.

Codebeispiel einer selbstgeschriebenen Checkbox

Merksatz:

"Stellst du programmierte Komponenten bereit, sorge für eine gute Bedienbarkeit."

Kurzbeschreibung:

Fast alle nativen HTML-Elemente bringen alles mit, was es braucht, um sie mit assistiven Technologien zu bedienen. Wenn du selbst Komponenten entwickelst, musst du sicherstellen, dass deine Komponenten das auch können.

Ein Beispiel eines Feldes, in das der Nutzende ein Bild reinziehen kann. Dazu gibt es noch die Möglichkeit über einen Button das Bild hochzuladen.

Merksatz:

"Muss ein User Dinge ziehen, gib ihm Alternativen, sonst wird dir nicht verziehen."

Kurzbeschreibung:

Du solltest dich nicht darauf verlassen, dass User Inhalte ziehen können. Biete zusätzlich zu Drag-and-drop, eine einfache Zeiger-Alternative an.

Mehr Informationen:
Erfolgskriterium 2.5.7
Eine Sticky-Header überdeckt einen Button.

Merksatz:

"Sei nicht gemein, lass den Fokus nicht verdeckt sein!"

Kurzbeschreibung:

Ein Button, ein Formularfeld oder eine andere Komponente darf, wenn sie den Fokus hat, nicht vollständig von anderen Inhalten verdeckt sein.

Mehr Informationen:
Erfolgskriterium 2.4.11
Es sind ein Screen zu sehen. Unten rechts ist ein Gesicht mit einer Sprechblase, in der steht "Wie kann ich helfen?". Der Screen wird dann genau so noch mal wiederholt, um zu verdeutlichen, dass die Hilfe an der gleichen Stelle bleiben soll.

Merksatz:

"Unterstützung und Support gehören immer an denselben Ort."

Kurzbeschreibung:

Damit Nutzende sich zurechtfinden, sollten Hilfsangebote auf deiner Seite einfach zu finden sein. Stelle sicher, dass sie immer an derselben Stelle und gut organisiert ist. Das schließt auch die Kontaktdaten ein.

Mehr Informationen:
Erfolgskriterium 3.2.6
Es sind zwei Schaltflächen mit Icons zu sehen. Die Erste ist nur 16 mal 16 Pixel und damit zu klein. Die Zweite ist 24 mal 24 Pixel und damit groß genug.

Merksatz:

"Soll es gut bedienbar sein, mach die Dinge nicht zu klein!"

Kurzbeschreibung:

Deine Buttons sollten mindestens 24 × 24 Pixel groß sein, um sicherzustellen, dass User ohne Schwierigkeiten die gewünschte Aktion auslösen können.

Mehr Informationen:
Erfolgskriterium 2.5.8
Es sind zwei Formulare mit einem Feld zu sehen. Die Eingabe des Namens wiederholt sich bei den Feldern. Das sollte nicht passieren.

Merksatz:

"Hab ichs schon mal eingetragen, musst du's mich nicht noch mal fragen."

Kurzbeschreibung:

Informationen, die Nutzende schon mal eingegeben haben, sollten sie nicht noch einmal eingeben müssen. Die Webseite sollte diese Informationen allein eintragen oder dabei helfen, indem sie Vorschläge macht. Es gibt Ausnahmen, wie zum Beispiel, wenn die Eingaben sicherheitsrelevant sind.

Mehr Informationen:
Erfolgskriterium 3.3.7
Es werden 2 Login-Formulare gezeigt. Ein mal hat man die Möglichkeit durch einen Passwort-Manager oder Copy-Paste die Daten auszufüllen. Beim zweiten Formular gibt man nur seinen Benutzernamen ein und bekommt eine E-Mail mit dem Passwort.

Merksatz:

"Log-in bitte nur ohne Denken, um meine Zeit nicht zu verschenken."

Kurzbeschreibung:

Wenn Nutzende ihre Identität bestätigen müssen, sollte für keinen Schritt ein kognitiver Funktionstest nötig sein. Das ist nur in Ordnung, wenn es eine barrierefreie Alternative oder Unterstützung bei der Lösung gibt. Ausnahmen sind Tests, die Objekterkennung testen, oder der User nicht textuelle Inhalte identifizieren muss, die er selbst bereitgestellt hat.

Mehr Informationen:
Erfolgskriterium 3.3.8

Die WCAG-Kriterien als Poster!

  • Das WCAG Poster stellt eine Übersicht aller WCAG A und AA Kriterien dar.

    WCAG Poster (Digital)

    Unser Plakat der WCAG 2.2. Richtlinien als digitale Version. Die Auflösung ist 360dpi und sollte hoffentlich problemlos zoom-bar sein!Alle Erlöse deiner Bestellung gehen an: Lupus Erythematodes Selbsthilfegemeinschaft e. V.Zur Verkaufsseite des WCAG-Posters