Gehirngerecht Digital

WCAG-Kriterien für: Content-Ersteller

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.
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.

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 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.

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.

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.

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!

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.

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.

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.

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.“

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.

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 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.

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.

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