Gehirngerecht Digital

WCAG-Kriterien für: Redaktion

Eine Illustration von einem gelben Kreis mit Augen, Nase und ohne Mund. Er hält einer Kamera und einem Stift in den Händen. Er symbolisiert Content-Ersteller*innen.

Filter:

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

Kurzbeschreibung:

Die Beschriftungen deiner Navigations- oder Interaktionselemente, wie Buttons, Icons, Formularfelder, müssen identisch sein, wenn sie die selbe Funktion haben.

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:"Ein Untertitel fürs Video macht dich und deine Umgebung froh!"

Kurzbeschreibung:

Aufgezeichnete Videos benötigen Untertitel. Achte dabei darauf, dass genau das in den Untertiteln steht, was auch im Audio vorkommt.

Eine Illustration von einem Video mit Untertitel.

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

Kurzbeschreibung:

Live-Vorträge benötigen Untertitel. Achte dabei darauf, dass genau das in den Untertiteln steht, was auch im Audio vorkommt.

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

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

Kurzbeschreibung:

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

Illustration einer Audio-Dateie und eines stummen Videos.

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 auf der Tonspur beschrieben wird. Eine Volltext-Alternative ist nur WCAG-Level A und nicht AA.

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

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

Kurzbeschreibung:

Überschriften müssen auch als solche im Code ausgezeichnet sein und sollten die richtige Reihenfolge einhalten (keine <h5> nach einer <h2> usw.).

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

Merksatz:"Beschreibst du Inhalte jeglicher Sorte, nutze nicht nur »grün, eckig« oder andere sensorische Worte."

Kurzbeschreibung:

Verzichte auf sensorische Hinweise. »Unten Links« kann ein Screenreader nicht finden, aber den Text eines Buttons oder Labels schon. Schreibe also eher: »Klicke auf den Button ‘Jetzt kaufen’!«

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:"Nutzt du nur Linktexte, wie „Mehr Lesen“ oder „Hier klicken“, werde ich dich gehörig anzicken!"

Kurzbeschreibung:

Der Text eines Links (und auch der Alternativtext eines verlinkten Bildes) sollte den Zweck des Links verständlich machen. Er sollte sagen, wohin der Link führt. Wenn das nicht geht, sollte der Linktext zumindest aus dem Kontext Sinn ergeben. Der Kontext kann die Überschrift vor dem Link sein oder wenn der Link sich im gleichen <p>-Tag, wie der beschreibende Text befindet.

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:"Ich komme mir vor, als stehe ich im Wald, beschreiben deine Überschriften nicht den Inhalt."

Kurzbeschreibung:

Deine Überschriften müssen klar den Inhalt oder den Zweck des Inhalts beschreiben, der auf sie folgt. Ebenso müssen die Beschriftungen von Formularen und Formularfeldern Sinn ergeben.

Eine Überschrift sagt: jetzt kommen Services. Darunter sieht man eine Aufzählung von 3 Services.

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

Kurzbeschreibung:

Nutzt du versteckte Texte in Aria-Labels oder sonstigem Code, um Links, Buttons oder Formularfelder genauer zu beschreiben, müssen diese die gleichen Worte enthalten und mit den Worten anfangen, wie der sichtbare Text.

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:"Nutzt du andere Sprache in deinen Sätzen, musst du ein Lang-Attribut setzen."

Kurzbeschreibung:

Wenn du auf deiner Webseite Phrasen aus einer anderen Sprache als der Hauptsprache verwendest, muss an dem entsprechenden Element das »lang«-Attribut gesetzt werden.

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

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

Kurzbeschreibung:

Videos benötigen eine Audiodeskription, wenn sie wichtige Inhalte vermitteln, die nicht bereits über die Tonspur bereitgestellt werden.

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

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 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:"Ist das Bild nur dekorativ, spar dir den Alt-Text definitiv!"

Kurzbeschreibung:

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

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.

Filter nach Rollen:

Zurück zu allen WCAG-Kriterien

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