Folge 2: Wahrnehmbar – alle 29 Regeln

Willkommen bei WCAG einfach erklärt. In dieser Folge geht es um Prinzip 1: Wahrnehmbar. Alle Inhalte müssen mit mindestens einem Sinn erfassbar sein: sehen, hören oder fühlen. Zu diesem Prinzip gehören 29 Regeln. Wir gehen sie der Reihe nach durch.

Richtlinie 1 Punkt 1: Textalternativen. Alles, was kein Text ist, bekommt eine Beschreibung in Textform.

1 Punkt 1 Punkt 1, Nicht-Text-Inhalt. Stufe A. Bilder, Icons, Diagramme und andere Nicht-Text-Inhalte brauchen eine Textalternative, die denselben Zweck erfüllt. Rein dekorative Bilder werden für Hilfsmittel versteckt.

Richtlinie 1 Punkt 2: Zeitbasierte Medien. Audio und Video brauchen Untertitel, Beschreibungen oder Transkripte.

1 Punkt 2 Punkt 1, Reine Audio- und Videoinhalte (aufgezeichnet). Stufe A. Für eine reine Tonaufnahme gibt es ein Transkript. Für ein Video ohne Ton gibt es eine Textbeschreibung oder eine Tonspur, die erklärt, was zu sehen ist.

1 Punkt 2 Punkt 2, Untertitel (aufgezeichnet). Stufe A. Aufgezeichnete Videos mit Ton haben Untertitel. Sie zeigen gesprochene Worte und wichtige Geräusche, zum Beispiel „[Telefon klingelt]“.

1 Punkt 2 Punkt 3, Audiodeskription oder Medienalternative (aufgezeichnet). Stufe A. Was im Video nur zu sehen ist, muss auch anders zugänglich sein: als Audiodeskription oder als vollständige Textfassung des Videos.

1 Punkt 2 Punkt 4, Untertitel (live). Stufe Doppel-A. Auch Live-Videos mit Ton haben Untertitel, die in Echtzeit mitlaufen.

1 Punkt 2 Punkt 5, Audiodeskription (aufgezeichnet). Stufe Doppel-A. Aufgezeichnete Videos haben eine Audiodeskription: Eine Stimme beschreibt in Sprechpausen, was Wichtiges zu sehen ist.

1 Punkt 2 Punkt 6, Gebärdensprache (aufgezeichnet). Stufe Dreifach-A. Aufgezeichnete Videos mit Ton gibt es auch mit Übersetzung in Gebärdensprache. Für viele gehörlose Menschen ist sie die Erstsprache.

1 Punkt 2 Punkt 7, Erweiterte Audiodeskription (aufgezeichnet). Stufe Dreifach-A. Wenn die Sprechpausen für eine Beschreibung zu kurz sind, hält das Video kurz an, damit genug Zeit für die Beschreibung bleibt.

1 Punkt 2 Punkt 8, Medienalternative (aufgezeichnet). Stufe Dreifach-A. Zu jedem Video gibt es eine vollständige Textfassung: alles Gesprochene und alles Sichtbare. Das hilft besonders taubblinden Menschen.

1 Punkt 2 Punkt 9, Reiner Audioinhalt (live). Stufe Dreifach-A. Auch für Live-Ton ohne Bild, etwa ein Live-Radio oder ein Live-Podcast, gibt es eine Textfassung in Echtzeit.

Richtlinie 1 Punkt 3: Anpassbar. Struktur und Bedeutung stecken im Code – nicht nur im Aussehen.

1 Punkt 3 Punkt 1, Info und Beziehungen. Stufe A. Was optisch wie eine Überschrift, Liste, Tabelle oder ein Formularfeld aussieht, muss auch im Code so ausgezeichnet sein. Nur so erkennen Hilfsmittel die Struktur.

1 Punkt 3 Punkt 2, Bedeutungstragende Reihenfolge. Stufe A. Die Reihenfolge im Code ergibt Sinn. Ein Screenreader liest in Code-Reihenfolge vor – nicht so, wie es auf dem Bildschirm angeordnet ist.

1 Punkt 3 Punkt 3, Sensorische Eigenschaften. Stufe A. Anleitungen verlassen sich nicht nur auf Form, Farbe, Größe, Position oder Ton. „Klicke den runden Knopf rechts“ hilft nicht, wenn man ihn nicht sieht.

1 Punkt 3 Punkt 4, Ausrichtung. Stufe Doppel-A. Inhalte funktionieren im Hoch- und im Querformat. Manche Menschen haben ihr Gerät fest am Rollstuhl montiert und können es nicht drehen.

1 Punkt 3 Punkt 5, Eingabezweck bestimmen. Stufe Doppel-A. Formularfelder für persönliche Daten sagen im Code, was hinein soll. Dann kann der Browser sie automatisch ausfüllen.

1 Punkt 3 Punkt 6, Zweck bestimmen. Stufe Dreifach-A. Der Zweck von Bereichen, Knöpfen und Links ist im Code erkennbar. Hilfsmittel können dann zum Beispiel vertraute Symbole einblenden oder Unwichtiges ausblenden.

Richtlinie 1 Punkt 4: Unterscheidbar. Inhalte sind gut zu sehen und zu hören: Kontrast, Größe, Abstände.

1 Punkt 4 Punkt 1, Benutzung von Farbe. Stufe A. Farbe ist nie das einzige Mittel, um etwas mitzuteilen. Etwa jeder zwölfte Mann sieht Rot und Grün schlecht.

1 Punkt 4 Punkt 2, Audio-Steuerelement. Stufe A. Ton, der von selbst startet und länger als 3 Sekunden läuft, lässt sich pausieren oder leiser stellen. Sonst übertönt er den Screenreader.

1 Punkt 4 Punkt 3, Kontrast (Minimum). Stufe Doppel-A. Text hebt sich deutlich vom Hintergrund ab: mindestens 4,5:1 bei normalem Text und 3:1 bei großem Text (ab 24 px oder 18,66 px fett).

1 Punkt 4 Punkt 4, Textgröße ändern. Stufe Doppel-A. Text lässt sich auf 200 % vergrößern, ohne dass Inhalte oder Funktionen verloren gehen.

1 Punkt 4 Punkt 5, Bilder eines Textes. Stufe Doppel-A. Text ist echter Text und kein Bild von Text. Echter Text lässt sich vergrößern, umfärben und vorlesen. Logos sind ausgenommen.

1 Punkt 4 Punkt 6, Kontrast (erhöht). Stufe Dreifach-A. Für besonders gute Lesbarkeit: mindestens 7:1 bei normalem Text und 4,5:1 bei großem Text.

1 Punkt 4 Punkt 7, Leiser oder kein Hintergrund-Audioinhalt. Stufe Dreifach-A. In Sprachaufnahmen gibt es keine oder nur sehr leise Hintergrundgeräusche – mindestens 20 Dezibel leiser als die Sprache.

1 Punkt 4 Punkt 8, Visuelle Präsentation. Stufe Dreifach-A. Menschen können Textblöcke so einstellen, dass sie angenehm zu lesen sind: eigene Farben, höchstens 80 Zeichen pro Zeile, kein Blocksatz, Zeilenabstand mindestens 1,5-fach, größerer Absatzabstand und 200 % Vergrößerung ohne seitliches Scrollen.

1 Punkt 4 Punkt 9, Bilder eines Textes (keine Ausnahme). Stufe Dreifach-A. Bilder von Text kommen gar nicht vor – außer als reine Dekoration oder wenn es unbedingt nötig ist, etwa beim Logo.

1 Punkt 4 Punkt 10, Umbruch (Reflow). Stufe Doppel-A. Bei 320 CSS-Pixel Breite (das entspricht 1280 Pixel bei 400 % Zoom) muss niemand in zwei Richtungen scrollen, um Inhalte zu lesen. Ausgenommen sind Inhalte, die zwei Dimensionen brauchen, etwa Datentabellen, Karten und Diagramme.

1 Punkt 4 Punkt 11, Nicht-Text-Kontrast. Stufe Doppel-A. Auch Bedienelemente und wichtige Grafiken brauchen Kontrast: mindestens 3:1 für Rahmen von Eingabefeldern, Icons, Fokusrahmen und Diagrammlinien.

1 Punkt 4 Punkt 12, Textabstand. Stufe Doppel-A. Menschen können Abstände vergrößern, ohne dass Text abgeschnitten wird oder sich überlappt: Zeilenabstand 1,5-fach, Absatzabstand 2-fach, Zeichenabstand 0,12-fach und Wortabstand 0,16-fach der Schriftgröße.

1 Punkt 4 Punkt 13, Eingeblendete Inhalte bei Hover oder Fokus. Stufe Doppel-A. Tooltips und Aufklapp-Inhalte, die bei Hover oder Fokus erscheinen, lassen sich schließen (Esc), bleiben stehen, wenn man mit der Maus darauf fährt, und verschwinden nicht von selbst.

Das waren alle Regeln zum Prinzip Wahrnehmbar. Zu jeder Regel findest du auf der Website ein Beispiel und einen Praxis-Tipp. Danke fürs Zuhören.