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:

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.

Kurzbeschreibung:

Jedes Bild, das Informationen vermittelt oder dazu beiträgt, die Inhalte deiner Seite besser zu verstehen, benötigt einen Alternativtext bzw. eine Textalternative.

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!

Kurzbeschreibung:

Für Audiodateien muss ein Text (Transkript) als Medienalternative bereitgestellt werden. Für stumme Videos brauchst du entweder ein Transkript oder eine Audiodatei als Alternative.

Illustration einer Audio-Dateie und eines stummen Videos.

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 Untertiteln, die als Text über dem Inhalt liegen.

Kurzbeschreibung:

Deine Videos benötigen eine Audiodeskription oder Volltext-Alternative, wenn wichtiger Inhalt darin vorkommt, der nicht auf der Tonspur beschrieben wird.

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.

Kurzbeschreibung:

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

Eine Illustration von einem Video. Es stehen zwei Figuren im Video. Ein blaues Viereck und ein grünes Rechteck. Dazu ist eine Audiodeskription vorhanden. In einem Text über dem Bild steht "Zwei Figuren stehen sich freudig strahlend gegenüber, einer winkt."

Kurzbeschreibung:

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

In einem Browserfenster sind drei Überschriften untereinander dargestellt. Die Größte steht oben und ist mit einem Tag als h1 gekennzeichnet. Darunter folgen eine kleinere h2 und eine noch kleinere h3.

Kurzbeschreibung:

Beschreibe Elemente nicht nur über sensorische Merkmale wie Position, Farbe oder Form, sondern immer so, dass alle sie verstehen können. Dafür solltest du schreiben, was es für ein Element ist oder wie es benannt ist.

Ein Fehler-Symbol über dem Text: Klicke auf den gelben, runden Knopf unten. Daneben ein Bestätigungs-Symbol über dem Text: Klicke auf den Button "Jetzt bestellen". Beide beschreiben den Button darunter, auf dem "Jetzt bestellen" steht.

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.

Ein Fehler-Symbol mit einem Link rechts daneben der heißt „Hier klicken“. Darunter ein Bestätigungs-Symbol mit einem Link rechts daneben der heißt „zur Produktübersicht“.

Kurzbeschreibung:

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

Zwei Überschriften. Eine sagt Super interessantes Zeug und ist sehr vage. Die andere sagt Unser neuesten Blogatrikel und ist sehr beschreibend.

Kurzbeschreibung:

Versteckte Texte, die Links, Buttons oder Formularfelder erweitern und genauer benennen, müssen den sichtbaren Text vollständig enthalten. Am besten ist, wenn der sichtbare Teil des Textes auch im versteckten Teil am Anfang steht.

Ein Link mit dem sichtbaren Namen: Mehr erfahren. Darunter zwei Felder mit Ausschnitten des Codes. Bei dem oberen steht als Erweiterung im aria-label: Mehr über Barrierefreiheit. Bei dem darunter steht im aria-label: Mehr erfahren über Barrierefreiheit. Nur der untere ist korrekt, weil er den Namen des Links (Mehr erfahren) vollständig beinhaltet.

Kurzbeschreibung:

Wenn auf einer Webseite Worte, Sätze oder Abschnitte in einer anderen Sprache als der Hauptsprache der Webseite vorkommen, brauchen diese Texte das richtige »lang«-Attribut.

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

Kurzbeschreibung:

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

Illustration von zwei Kärtchen mit jeweils zwei Buttons. In dem ersten Kärtchen sagen die Buttons etwas Verschiedenes, und zwar: Zu deinem Konto und Zum Account. In dem zweiten Kärtchen sagen die Buttons das gleiche, und zwar: Zu deinem Konto. Nur das zweite Kärtchen, wo beide Buttons dasselbe sagen ist richtig.

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