WCAG hören und sehen: Podcast und Videos

Willkommen bei WCAG einfach erklärt. In dieser Folge lernst du die Grundlagen: Was sind die WCAG, wem helfen sie, und wie sind sie aufgebaut?

WCAG ist eine Abkürzung. Sie steht für Web Content Accessibility Guidelines. Auf Deutsch: Richtlinien für barrierefreie Webinhalte. Herausgegeben werden sie vom World Wide Web Consortium, kurz W3C. Das ist die Organisation, die auch die Standards für HTML und CSS pflegt.

Die WCAG beschreiben, wie Websites und Apps gebaut sein müssen, damit alle Menschen sie nutzen können. Auch Menschen, die blind sind oder schlecht sehen. Menschen, die gehörlos sind. Menschen, die keine Maus bedienen können. Und Menschen, die mehr Zeit oder einfachere Sprache brauchen.

Barrierefreiheit hilft aber allen. Untertitel helfen im lauten Zug. Guter Kontrast hilft in der Sonne. Große Schaltflächen helfen auf dem Handy. Und eine klare Sprache hilft jedem, der es eilig hat.

Die aktuelle Fassung heißt WCAG 2 Punkt 2. Sie enthält 86 Regeln. Diese Regeln heißen Erfolgskriterien. Jede Regel beschreibt eine Sache, die man prüfen kann.

Alle Regeln gehören zu einem von vier Prinzipien. Erstens: wahrnehmbar. Alle Inhalte müssen mit mindestens einem Sinn erfassbar sein. Zweitens: bedienbar. Alles muss sich bedienen lassen, auch ohne Maus. Drittens: verständlich. Texte und Bedienung müssen klar und vorhersehbar sein. Viertens: robust. Inhalte müssen mit Hilfsmitteln wie Screenreadern zuverlässig funktionieren.

Jede Regel hat außerdem eine Stufe. Stufe A ist das absolute Minimum. Stufe Doppel-A ist der übliche Standard, den auch Gesetze verlangen. In Deutschland zum Beispiel das Barrierefreiheitsstärkungsgesetz. Stufe Dreifach-A ist die höchste Stufe.

In den nächsten vier Folgen gehen wir alle Regeln durch. Eine Folge pro Prinzip. Das Transkript jeder Folge findest du auf der Website. Viel Freude beim Zuhören.

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.

Willkommen bei WCAG einfach erklärt. In dieser Folge geht es um Prinzip 2: Bedienbar. Alles muss sich bedienen lassen – mit Tastatur, Maus, Touch, Sprache oder Hilfsmitteln, und ohne Zeitdruck. Zu diesem Prinzip gehören 34 Regeln. Wir gehen sie der Reihe nach durch.

Richtlinie 2 Punkt 1: Per Tastatur zugänglich. Alles funktioniert auch ganz ohne Maus.

2 Punkt 1 Punkt 1, Tastatur. Stufe A. Alles lässt sich allein mit der Tastatur bedienen. Viele Menschen nutzen keine Maus: wegen einer Lähmung, eines Tremors, Blindheit – oder einfach, weil es schneller ist.

2 Punkt 1 Punkt 2, Keine Tastaturfalle. Stufe A. Der Tastaturfokus bleibt nirgends stecken. Wer mit Tab in einen Bereich hineinkommt, kommt mit der Tastatur auch wieder heraus.

2 Punkt 1 Punkt 3, Tastatur (keine Ausnahme). Stufe Dreifach-A. Wirklich alles funktioniert per Tastatur – ohne die Ausnahmen aus Regel 2.1.1, etwa für Freihandzeichnen.

2 Punkt 1 Punkt 4, Tastaturkürzel mit Zeichentasten. Stufe A. Tastaturkürzel aus nur einem Buchstaben, einer Ziffer oder einem Zeichen lassen sich abschalten, ändern oder sind nur aktiv, solange das Element den Fokus hat. Sonst lösen Spracheingabe oder ein Verrutschen versehentlich Aktionen aus.

Richtlinie 2 Punkt 2: Ausreichend Zeit. Menschen bekommen die Zeit, die sie brauchen.

2 Punkt 2 Punkt 1, Zeiteinteilung anpassbar. Stufe A. Zeitlimits lassen sich abschalten, anpassen oder verlängern. Manche Menschen brauchen zum Lesen und Tippen deutlich länger.

2 Punkt 2 Punkt 2, Pausieren, Stoppen, Ausblenden. Stufe A. Was sich von selbst bewegt, blinkt oder scrollt, länger als 5 Sekunden läuft und neben anderem Inhalt steht, lässt sich pausieren, stoppen oder ausblenden. Dasselbe gilt für Inhalte, die sich automatisch aktualisieren. Bewegung lenkt stark ab.

2 Punkt 2 Punkt 3, Keine Zeiteinteilung. Stufe Dreifach-A. Es gibt überhaupt keine Zeitlimits. Ausnahmen sind echte Live-Ereignisse und Medien, die nun einmal ablaufen.

2 Punkt 2 Punkt 4, Unterbrechungen. Stufe Dreifach-A. Unterbrechungen wie Pop-ups und Benachrichtigungen lassen sich aufschieben oder abschalten. Nur Notfälle dürfen stören.

2 Punkt 2 Punkt 5, Erneute Authentifizierung. Stufe Dreifach-A. Wer nach Ablauf der Sitzung neu anmelden muss, verliert keine Daten und kann dort weitermachen, wo er war.

2 Punkt 2 Punkt 6, Zeitüberschreitungen. Stufe Dreifach-A. Menschen erfahren vorab, nach wie viel Untätigkeit Daten verloren gehen – außer die Daten bleiben länger als 20 Stunden erhalten.

Richtlinie 2 Punkt 3: Anfälle und körperliche Reaktionen. Nichts blitzt oder bewegt sich so, dass es krank machen kann.

2 Punkt 3 Punkt 1, Grenzwert von dreimaligem Blitzen oder weniger. Stufe A. Nichts blitzt mehr als dreimal pro Sekunde – oder das Blitzen ist so klein und schwach, dass es unter den Grenzwerten bleibt. Starkes Blitzen kann epileptische Anfälle auslösen – das kann lebensgefährlich sein.

2 Punkt 3 Punkt 2, Drei Blitze. Stufe Dreifach-A. Es blitzt nie mehr als dreimal pro Sekunde – ganz ohne Ausnahme für kleine oder dunkle Flächen.

2 Punkt 3 Punkt 3, Animation durch Interaktionen. Stufe Dreifach-A. Bewegungseffekte, die durch Scrollen oder Klicken ausgelöst werden, lassen sich abschalten. Parallax und Zoom-Effekte können Schwindel und Übelkeit auslösen.

Richtlinie 2 Punkt 4: Navigierbar. Menschen finden sich zurecht und wissen immer, wo sie sind.

2 Punkt 4 Punkt 1, Blöcke umgehen. Stufe A. Wiederkehrende Bereiche wie die Navigation lassen sich überspringen. Niemand muss auf jeder Seite 30-mal Tab drücken, um zum Inhalt zu kommen.

2 Punkt 4 Punkt 2, Seite mit Titel versehen. Stufe A. Jede Seite hat einen Titel, der Thema oder Zweck beschreibt. Er steht im Browser-Tab und wird vom Screenreader zuerst vorgelesen.

2 Punkt 4 Punkt 3, Fokus-Reihenfolge. Stufe A. Mit der Tab-Taste wandert der Fokus in einer sinnvollen Reihenfolge – in der Regel von oben nach unten und von links nach rechts.

2 Punkt 4 Punkt 4, Linkzweck (im Kontext). Stufe A. Aus dem Linktext – zusammen mit dem Satz oder Absatz drumherum – wird klar, wohin der Link führt.

2 Punkt 4 Punkt 5, Verschiedene Methoden. Stufe Doppel-A. Es gibt mindestens zwei Wege, eine Seite zu finden – zum Beispiel Navigation und Suche oder Navigation und Sitemap. Ausgenommen sind Seiten, die ein Schritt in einem Ablauf sind, etwa im Bestellvorgang.

2 Punkt 4 Punkt 6, Überschriften und Beschriftungen. Stufe Doppel-A. Überschriften und Beschriftungen sagen klar, worum es geht. Screenreader-Nutzende springen von Überschrift zu Überschrift, um eine Seite zu überfliegen.

2 Punkt 4 Punkt 7, Fokus sichtbar. Stufe Doppel-A. Man sieht immer, welches Element gerade den Tastaturfokus hat. Ohne sichtbaren Fokus ist Tastaturbedienung wie Mausbedienung ohne Mauszeiger.

2 Punkt 4 Punkt 8, Position. Stufe Dreifach-A. Menschen erkennen, wo sie sich innerhalb der Website befinden.

2 Punkt 4 Punkt 9, Linkzweck (reiner Link). Stufe Dreifach-A. Der Linktext ist schon für sich allein verständlich – ganz ohne den Text drumherum. Screenreader können Links als reine Liste anzeigen.

2 Punkt 4 Punkt 10, Abschnittsüberschriften. Stufe Dreifach-A. Längere Inhalte sind durch Überschriften in Abschnitte gegliedert.

2 Punkt 4 Punkt 11, Fokus nicht verdeckt (Minimum). Stufe Doppel-A. Das fokussierte Element ist nicht komplett verdeckt – zum Beispiel durch einen fest stehenden Kopfbereich, ein Cookie-Banner oder ein Chat-Fenster.

2 Punkt 4 Punkt 12, Fokus nicht verdeckt (erhöht). Stufe Dreifach-A. Das fokussierte Element ist vollständig sichtbar. Kein Teil davon wird verdeckt.

2 Punkt 4 Punkt 13, Fokus-Erscheinungsbild. Stufe Dreifach-A. Der Fokusrahmen ist groß und kontrastreich genug: mindestens so groß wie ein 2 Pixel dicker Rahmen um das Element, mit einem Kontrast von 3:1 zwischen fokussiert und nicht fokussiert.

Richtlinie 2 Punkt 5: Eingabemodalitäten. Bedienung per Touch, Zeiger und Bewegung ist einfach und fehlertolerant.

2 Punkt 5 Punkt 1, Zeigergesten. Stufe A. Funktionen, die Mehrfinger- oder Wischgesten brauchen, gibt es auch als einfaches Tippen oder Klicken.

2 Punkt 5 Punkt 2, Zeigerabbruch. Stufe A. Eine Aktion wird erst beim Loslassen ausgelöst, nicht schon beim Herunterdrücken. So lässt sich ein Fehlklick abbrechen: einfach wegziehen.

2 Punkt 5 Punkt 3, Beschriftung im Namen. Stufe A. Der sichtbare Text eines Bedienelements steckt auch in seinem Namen im Code. Sonst funktioniert Sprachsteuerung nicht: „Klicke Senden“ findet den Knopf nicht.

2 Punkt 5 Punkt 4, Bewegungsaktivierung. Stufe A. Funktionen, die durch Schütteln oder Neigen des Geräts ausgelöst werden, gibt es auch als Knopf – und die Bewegungssteuerung lässt sich abschalten.

2 Punkt 5 Punkt 5, Zielgröße (erhöht). Stufe Dreifach-A. Klick- und Tippflächen sind mindestens 44 × 44 CSS-Pixel groß.

2 Punkt 5 Punkt 6, Gleichzeitige Eingabemechanismen. Stufe Dreifach-A. Menschen können jederzeit zwischen Eingabearten wechseln: Touch, Maus, Tastatur, Stift, Sprache.

2 Punkt 5 Punkt 7, Ziehbewegungen. Stufe Doppel-A. Alles, was man durch Ziehen erledigt, geht auch mit einfachen Klicks. Ziehen mit gedrückter Taste ist bei Tremor oder mit Mundstab kaum möglich.

2 Punkt 5 Punkt 8, Zielgröße (Minimum). Stufe Doppel-A. Klick- und Tippflächen sind mindestens 24 × 24 CSS-Pixel groß – oder haben so viel Abstand, dass man nicht versehentlich das Nachbarelement trifft.

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

Willkommen bei WCAG einfach erklärt. In dieser Folge geht es um Prinzip 3: Verständlich. Texte und Bedienung müssen klar und vorhersehbar sein. Fehler lassen sich leicht vermeiden und beheben. Zu diesem Prinzip gehören 21 Regeln. Wir gehen sie der Reihe nach durch.

Richtlinie 3 Punkt 1: Lesbar. Die Sprache ist im Code angegeben und Text ist verständlich.

3 Punkt 1 Punkt 1, Sprache der Seite. Stufe A. Die Hauptsprache der Seite steht im Code. Nur dann liest ein Screenreader mit der richtigen Aussprache vor – sonst klingt Deutsch wie von einer englischen Stimme gesprochen.

3 Punkt 1 Punkt 2, Sprache von Teilen. Stufe Doppel-A. Auch einzelne Textstellen in einer anderen Sprache sind im Code gekennzeichnet.

3 Punkt 1 Punkt 3, Ungewöhnliche Wörter. Stufe Dreifach-A. Fachbegriffe, Redewendungen und ungewöhnliche Wörter werden erklärt.

3 Punkt 1 Punkt 4, Abkürzungen. Stufe Dreifach-A. Abkürzungen werden aufgelöst oder erklärt.

3 Punkt 1 Punkt 5, Leseniveau. Stufe Dreifach-A. Ist ein Text schwerer zu lesen als nach etwa 9 Schuljahren zu erwarten, gibt es eine einfachere Fassung oder eine Zusammenfassung.

3 Punkt 1 Punkt 6, Aussprache. Stufe Dreifach-A. Wo die Bedeutung eines Wortes von der Aussprache abhängt, wird die Aussprache angegeben.

Richtlinie 3 Punkt 2: Vorhersehbar. Seiten verhalten sich so, wie Menschen es erwarten.

3 Punkt 2 Punkt 1, Bei Fokus. Stufe A. Nur weil ein Element den Fokus bekommt, passiert nichts Unerwartetes: kein Seitenwechsel, kein neues Fenster, kein Absenden.

3 Punkt 2 Punkt 2, Bei Eingabe. Stufe A. Eine Auswahl oder Eingabe löst nicht von selbst etwas Unerwartetes aus – außer es wurde vorher angekündigt.

3 Punkt 2 Punkt 3, Konsistente Navigation. Stufe Doppel-A. Navigation, die auf mehreren Seiten vorkommt, steht überall in derselben Reihenfolge.

3 Punkt 2 Punkt 4, Konsistente Erkennung. Stufe Doppel-A. Dinge mit gleicher Funktion sind überall einheitlich benannt und beschriftet.

3 Punkt 2 Punkt 5, Änderung auf Anfrage. Stufe Dreifach-A. Größere Änderungen passieren nur, wenn jemand sie auslöst – oder sie lassen sich abschalten. Keine automatischen Weiterleitungen, keine ungefragt neuen Fenster.

3 Punkt 2 Punkt 6, Konsistente Hilfe. Stufe A. Wenn Hilfe-Angebote wie Kontakt, Chat oder häufige Fragen auf mehreren Seiten vorkommen, stehen sie überall an derselben Stelle in der Reihenfolge der Seite.

Richtlinie 3 Punkt 3: Hilfestellung bei der Eingabe. Formulare helfen, Fehler zu vermeiden und zu korrigieren.

3 Punkt 3 Punkt 1, Fehlererkennung. Stufe A. Bei einem Eingabefehler wird in Textform gesagt, welches Feld betroffen ist und was falsch ist. Ein roter Rahmen allein reicht nicht.

3 Punkt 3 Punkt 2, Beschriftungen oder Anweisungen. Stufe A. Jedes Eingabefeld hat eine sichtbare Beschriftung. Wenn ein bestimmtes Format nötig ist, steht das vorher da.

3 Punkt 3 Punkt 3, Fehlerempfehlung. Stufe Doppel-A. Fehlermeldungen sagen nicht nur, dass etwas falsch ist, sondern auch, wie es richtig geht.

3 Punkt 3 Punkt 4, Fehlervermeidung (rechtliche, finanzielle, Daten). Stufe Doppel-A. Bei wichtigen Vorgängen wie Käufen, Verträgen, Prüfungsantworten oder dem Löschen von Daten kann man die Eingaben prüfen, korrigieren oder rückgängig machen.

3 Punkt 3 Punkt 5, Hilfe. Stufe Dreifach-A. Zu Eingabefeldern und Aufgaben gibt es Hilfe direkt an Ort und Stelle.

3 Punkt 3 Punkt 6, Fehlervermeidung (alle). Stufe Dreifach-A. Bei allen Formularen – nicht nur bei wichtigen – kann man Eingaben prüfen, korrigieren oder rückgängig machen.

3 Punkt 3 Punkt 7, Redundante Eingabe. Stufe A. Was jemand in einem Ablauf schon einmal eingegeben hat, muss er nicht noch einmal tippen. Es wird vorausgefüllt oder zur Auswahl angeboten.

3 Punkt 3 Punkt 8, Barrierefreie Authentifizierung (Minimum). Stufe Doppel-A. Die Anmeldung verlangt keinen Gedächtnis- oder Denktest: kein Passwort aus dem Kopf abtippen, kein Rätsel lösen – außer es gibt eine Alternative oder Hilfe. Erlaubt bleiben auf dieser Stufe: Objekte erkennen und selbst hochgeladene Bilder wiedererkennen.

3 Punkt 3 Punkt 9, Barrierefreie Authentifizierung (erhöht). Stufe Dreifach-A. Die Anmeldung kommt ganz ohne Gedächtnis- oder Denkaufgabe aus – auch ohne das Erkennen von Objekten oder eigenen Bildern.

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

Willkommen bei WCAG einfach erklärt. In dieser Folge geht es um Prinzip 4: Robust. Inhalte müssen mit Browsern und Hilfsmitteln wie Screenreadern zuverlässig funktionieren – heute und morgen. Zu diesem Prinzip gehören 2 Regeln. Wir gehen sie der Reihe nach durch.

Richtlinie 4 Punkt 1: Kompatibel. Bedienelemente geben Name, Rolle und Zustand an Hilfsmittel weiter.

4 Punkt 1 Punkt 2, Name, Rolle, Wert. Stufe A. Jedes Bedienelement teilt Hilfsmitteln mit, wie es heißt (Name), was es ist (Rolle) und in welchem Zustand es ist (Wert) – zum Beispiel „Menü, Schalter, ausgeklappt“.

4 Punkt 1 Punkt 3, Statusmeldungen. Stufe Doppel-A. Meldungen wie „Gespeichert“, „3 Treffer“ oder „In den Warenkorb gelegt“ werden vom Screenreader angesagt, ohne dass der Fokus dorthin springen muss.

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

Was ist WCAG?

Was ist WCAG? Die Abkürzung steht für Web Content Accessibility Guidelines. Das sind die weltweiten Regeln für barrierefreie Websites. In zwei Minuten kennst du die Grundlagen.

Für wen?

Für wen sind die Regeln da? Für blinde und sehbehinderte Menschen. Für gehörlose Menschen. Für Menschen, die keine Maus nutzen können. Und am Ende für alle. Denn guter Kontrast und klare Sprache helfen jedem.

Vier Prinzipien

Die WCAG haben vier Prinzipien. Erstens: wahrnehmbar. Zweitens: bedienbar. Drittens: verständlich. Viertens: robust. Jede der 86 Regeln gehört zu einem dieser Prinzipien.

Wahrnehmbar und bedienbar

Wahrnehmbar heißt zum Beispiel: Bilder haben Alternativtexte und Videos haben Untertitel. Bedienbar heißt: Alles funktioniert auch nur mit der Tastatur.

Verständlich und robust

Verständlich heißt: klare Sprache und Fehlermeldungen, die sagen, was zu tun ist. Robust heißt: sauberer Code, den Hilfsmittel wie Screenreader verstehen.

Drei Stufen

Jede Regel hat eine von drei Stufen. Stufe A ist das Minimum. Stufe Doppel-A ist der Standard, den Gesetze verlangen. Stufe Dreifach-A ist die höchste Stufe.

Dein erster Test

Dein erster Test dauert eine Minute. Lege die Maus weg. Bediene deine Website nur mit der Tab-Taste. Siehst du immer, wo du gerade bist? Kommst du überall hin?

Mehr erfahren

Mehr erfährst du auf wcag Punkt dehl Punkt net. Dort findest du alle 86 Regeln einfach erklärt, mit Demos zum Ausprobieren und einem kostenlosen Checker.

Neu in WCAG 2.2

Neu in WCAG 2 Punkt 2. Die Fassung wurde im Oktober 2023 veröffentlicht und bringt 9 neue Regeln. Wir gehen sie der Reihe nach durch.

2.4.11 Fokus nicht verdeckt (Minimum)

Regel 2 Punkt 4 Punkt 11, Fokus nicht verdeckt (Minimum), Stufe AA. Das fokussierte Element ist nicht komplett verdeckt – zum Beispiel durch einen fest stehenden Kopfbereich, ein Cookie-Banner oder ein Chat-Fenster. Das hilft besonders: Menschen mit motorischen Einschränkungen und Menschen mit Sehbehinderung.

2.4.12 Fokus nicht verdeckt (erhöht)

Regel 2 Punkt 4 Punkt 12, Fokus nicht verdeckt (erhöht), Stufe AAA. Das fokussierte Element ist vollständig sichtbar. Kein Teil davon wird verdeckt. Das hilft besonders: Menschen mit motorischen Einschränkungen und Menschen mit Sehbehinderung.

2.4.13 Fokus-Erscheinungsbild

Regel 2 Punkt 4 Punkt 13, Fokus-Erscheinungsbild, Stufe AAA. Der Fokusrahmen ist groß und kontrastreich genug: mindestens so groß wie ein 2 Pixel dicker Rahmen um das Element, mit einem Kontrast von 3:1 zwischen fokussiert und nicht fokussiert. Das hilft besonders: Menschen mit Sehbehinderung und Menschen mit motorischen Einschränkungen.

2.5.7 Ziehbewegungen

Regel 2 Punkt 5 Punkt 7, Ziehbewegungen, Stufe AA. Alles, was man durch Ziehen erledigt, geht auch mit einfachen Klicks. Ziehen mit gedrückter Taste ist bei Tremor oder mit Mundstab kaum möglich. Das hilft besonders: Menschen mit motorischen Einschränkungen.

2.5.8 Zielgröße (Minimum)

Regel 2 Punkt 5 Punkt 8, Zielgröße (Minimum), Stufe AA. Klick- und Tippflächen sind mindestens 24 × 24 CSS-Pixel groß – oder haben so viel Abstand, dass man nicht versehentlich das Nachbarelement trifft. Das hilft besonders: Menschen mit motorischen Einschränkungen und Menschen mit Sehbehinderung.

3.2.6 Konsistente Hilfe

Regel 3 Punkt 2 Punkt 6, Konsistente Hilfe, Stufe A. Wenn Hilfe-Angebote wie Kontakt, Chat oder häufige Fragen auf mehreren Seiten vorkommen, stehen sie überall an derselben Stelle in der Reihenfolge der Seite. Das hilft besonders: Menschen mit kognitiven Einschränkungen.

3.3.7 Redundante Eingabe

Regel 3 Punkt 3 Punkt 7, Redundante Eingabe, Stufe A. Was jemand in einem Ablauf schon einmal eingegeben hat, muss er nicht noch einmal tippen. Es wird vorausgefüllt oder zur Auswahl angeboten. Das hilft besonders: Menschen mit kognitiven Einschränkungen und Menschen mit motorischen Einschränkungen.

3.3.8 Barrierefreie Authentifizierung (Minimum)

Regel 3 Punkt 3 Punkt 8, Barrierefreie Authentifizierung (Minimum), Stufe AA. Die Anmeldung verlangt keinen Gedächtnis- oder Denktest: kein Passwort aus dem Kopf abtippen, kein Rätsel lösen – außer es gibt eine Alternative oder Hilfe. Erlaubt bleiben auf dieser Stufe: Objekte erkennen und selbst hochgeladene Bilder wiedererkennen. Das hilft besonders: Menschen mit kognitiven Einschränkungen und Menschen mit Leseschwäche.

3.3.9 Barrierefreie Authentifizierung (erhöht)

Regel 3 Punkt 3 Punkt 9, Barrierefreie Authentifizierung (erhöht), Stufe AAA. Die Anmeldung kommt ganz ohne Gedächtnis- oder Denkaufgabe aus – auch ohne das Erkennen von Objekten oder eigenen Bildern. Das hilft besonders: Menschen mit kognitiven Einschränkungen.

Und eine Regel weniger

Und eine Regel ist entfallen: 4 Punkt 1 Punkt 1, Syntaxanalyse, wurde gestrichen. Alle Regeln mit Beispielen findest du auf wcag Punkt dehl Punkt net.