Redaktion

Richtlinie

Hinweis

Verweis

Konformität

Fotos sollten so gestaltet werden, dass sie für alle Nutzer verständlich sind, auch für Screenreader-Nutzer.

Fokussiere dich auf das Wesentliche des Fotos. Bei Personen: Wer ist zu sehen, nicht was sie tragen – es sei denn, die Kleidung ist relevant.

WCAG 2.1: 1.1.1

A

Diagramme müssen eine inhaltliche Beschreibung für Screenreader enthalten.

Beschreibe die Aussage des Diagramms – Daten, Trends, Implikationen – nicht Farben oder Formen. Falls die Inhalte im Fließtext erklärt werden, reicht eine kurze Textalternative.

WCAG 2.1: 1.1.1

A

Icons müssen für Screenreader funktional beschrieben sein.

Beschreibe Icons so, dass ihre Funktion verständlich ist. Statt „Lupe“ verwende z. B. „Suche starten“, um die Nutzung klarzumachen.

WCAG 2.1: 1.4.5

AA

Logos gelten als wesentliche Inhalte und müssen mit einem Alternativtext versehen sein.

Falls ein Logo Text enthält, sollte der Alternativtext den Markennamen oder die relevante Beschriftung wiedergeben.

WCAG 2.1: 1.4.5

AA

Optisch als Überschrift gestaltete Inhalte müssen mit den entsprechenden HTML-Überschriftenelementen (<h1>–<h6>) ausgezeichnet werden.

Nur visuelle Hervorhebungen wie größere Schrift genügen nicht. Überschriftenelemente sorgen für eine nachvollziehbare Struktur für Screenreader und assistive Technologien.

WCAG 2.1: 2.4.6

AA

Nach längeren Linklisten sollte der Seiteninhalt mit einer Überschrift fortgeführt werden, um die Navigation zu erleichtern.

Überschriften nach Linklisten erleichtern das Überspringen per Tastatur oder Screenreader. Fehlen sie, müssen Nutzer mühsam alle Links durchgehen, was die Bedienung erschwert.

WCAG 2.1: 2.4.6

AA

Überschriftenebenen müssen einheitlich und logisch für die strukturelle Navigation verwendet werden.

Überschriften sollten hierarchisch und ohne Sprünge angeordnet sein. Dies erleichtert die Orientierung, besonders für Screenreader- und Tastaturnutzende.

WCAG 2.1: 2.4.6

AA

Überschriften sollten nur eine H1 pro Seite haben.

WCAG 2.1: 2.4.6

AA

Überschriften müssen eindeutig und beschreibend sein, um die Barrierefreiheit zu gewährleisten.

Formuliere Überschriften so, dass sie den folgenden Inhalt oder Zweck klar widerspiegeln. Das gilt auch für Formularbeschriftungen, damit Nutzende den Kontext sofort verstehen.

WCAG 2.1: 2.4.6

AA

Überschriften müssen auch als solche im Code ausgezeichnet sein und sollten die richtige Reihenfolge einhalten.

Ü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!

WCAG 2.1: 1.3.1

A

Links müssen klar und verständlich beschriftet sein.

Formuliere Linktexte so, dass sie auch ohne zusätzlichen Kontext Sinn ergeben. Vermeide generische Bezeichnungen wie „Hier klicken“.

WCAG 2.1: 2.4.4

A

Halte Linkbeschriftungen so kurz wie möglich, aber so aussagekräftig wie nötig.

Verlinke nur den wesentlichen Teil des Textes, der das Ziel des Links klar macht – keine ganzen Sätze oder unnötig lange Phrasen.

WCAG 2.1: 2.4.4; 2.4.6 (Beschriftungen)

A

Nutze keine Leerzeichen zur Gestaltung von Abständen in Texten.

Verwende stattdessen CSS oder entsprechende Formatierungsmöglichkeiten, um Zeichen-, Wort- und Zeilenabstände zu steuern. Dies stellt sicher, dass Screenreader und andere assistive Technologien den Text korrekt interpretieren können.

WCAG 2.1: 1.3.1, 1.3.2

A

Vermeide rein sensorische Beschreibungen wie Farben oder Positionen.

Screenreader können „unten links“ oder „grün“ nicht interpretieren. Stattdessen beschreibe Inhalte präzise, z. B. „Klicke auf den Button ‘Jetzt kaufen’“.

WCAG 2.1: 1.3.3

A

Elemente mit der gleichen Funktion müssen auf allen Seiten konsistent beschriftet sein.

Achte darauf, dass Navigationselemente, Buttons, Icons und Formularfelder immer gleich benannt werden. Einheitliche Bezeichnungen erleichtern die Orientierung und verbessern die Nutzbarkeit.

WCAG 2.1: 3.2.4

A

Die Sprache jedes Abschnitts oder Satzes muss durch Software erkennbar sein, außer bei Eigennamen, Fachbegriffen oder eingebürgertem Jargon.

Falls du auf deiner Webseite Wörter oder Phrasen in einer anderen Sprache als der Hauptsprache verwendest, setze das lang-Attribut am entsprechenden Element.

WCAG 2.1: 3.1.2

AA

Für jedes Audiomedium muss eine textuelle Alternative bereitgestellt werden.

Biete eine Transkription oder Untertitelung, z. B. per .vtt. Die Beschreibung kann entweder direkt in den Haupt-Audioinhalt integriert oder als separate, synchronisierte Audiobeschreibung bereitgestellt werden.

WCAG 2.1: 1.2.2, 1.2.3

A

Für Videos mit Ton muss eine Alternative wie eine Audiodeskription oder ein anderes zeitbasiertes Medium bereitgestellt werden.

Stelle für synchronisierte Medien eine Audiodeskription oder eine alternative textbasierte Darstellung bereit. Dies gilt nicht, wenn das Video selbst bereits eine Alternative für Text ist und als solche klar gekennzeichnet wurde.

WCAG 2.1: 1.2.3

A

Live-Audioinhalte in Videos müssen mit Untertiteln versehen werden.

Audiodeskriptionen beschreiben visuelle Inhalte für sehbeeinträchtigte Nutzer:innen. Sie sind notwendig, wenn wichtige Handlungsaspekte nur visuell vermittelt werden.

WCAG 2.1: 1.2.4

AA

Vermeide Inhalte, die mehr als dreimal pro Sekunde blinken.

Schnelles Blinken kann Anfälle oder epileptische Reaktionen auslösen. Achte darauf, dass Animationen und visuelle Effekte sicher und barrierefrei gestaltet sind.

WCAG 2.1: 2.3.1 

A

Overlay-Text muss gut lesbar sein.

Achte auf eine geeignete Schriftart, ausreichende Schriftgröße und hohen Kontrast zwischen Text und Hintergrund, um die Lesbarkeit für alle Nutzer:innen zu gewährleisten.

WCAG 2.1: 1.4.3

AA

Für reine Audio- oder Videoaufzeichnungen ist eine textuelle Alternative bereitzustellen, es sei denn, sie sind ausdrücklich als Medienalternative für Text gekennzeichnet.

Stelle für Audiodateien ein Transkript und für stumme Videos eine textliche Beschreibung bereit, damit die Inhalte auch ohne Ton oder Bildbarriere verständlich sind.

WCAG 2.1: 1.2.1 

A

Aufgezeichnete Videos mit synchronisiertem Ton müssen eine Audiodeskription enthalten.

Falls wichtige Inhalte nur visuell vermittelt werden, muss eine Audiodeskription ergänzt werden, damit auch sehbeeinträchtigte Nutzer:innen alle relevanten Informationen erfassen können.

WCAG 2.1: 1.2.5

AA

Interaktive Elemente müssen mindestens 24 × 24 Pixel groß sein.

Dies gilt für alle klickbaren Flächen, einschließlich Buttons und Icons. Ausreichende Größe erleichtert die Bedienung und verhindert Fehlklicks, besonders für motorisch eingeschränkte Nutzer:innen.

WCAG 2.2: 2.5.8 (neu)

A