1.4 Unterscheidbar

Mache es den Nutzern einfacher, Inhalte zu sehen und zu hören, indem du Vordergrund und Hintergrund voneinander trennst.

Das sorgt für eine bessere Benutzererfahrung und fördert die Interaktion.

Was wird geprüft?

Ob die Inhalte klar voneinander abgehoben sind, damit sie für alle Nutzer gut wahrnehmbar sind.

Das umfasst sowohl visuelle als auch auditive Elemente.

Warum wird das geprüft?

Eine klare Unterscheidung von Inhalten ermöglicht es, dass alle Nutzer gut auf deine Website zugreifen können.

Das verbessert die Zugänglichkeit und sorgt für eine positive Wahrnehmung deiner Marke.

Wie wird das geprüft?

Durch Benutzer-Tests, die die Wahrnehmung von Farben und Klängen berücksichtigen.

Zusätzlich werden automatisierte Tools eingesetzt, um die Unterscheidbarkeit zu analysieren.


1.4.1 Verwendung von Farbe

Farbe darf nicht das einzige visuelle Mittel sein, um Informationen zu vermitteln.

Das sorgt dafür, dass auch Nutzer mit Farbsehschwächen die Inhalte verstehen können.

Was wird geprüft?

Ob Informationen, Aktionen und visuelle Elemente auch ohne Farbinformationen erkennbar sind.

Das stellt sicher, dass alle Nutzer die Inhalte richtig interpretieren können.

Warum wird das geprüft?

Farbwahrnehmung ist nicht bei allen Nutzern gleich.

Daher ist es wichtig, zusätzliche visuelle Hinweise zu bieten, um die Zugänglichkeit zu erhöhen.

Wie wird das geprüft?

Durch Tests, die die Benutzererfahrung von Menschen mit Farbsehschwächen berücksichtigen.

Zusätzlich werden Richtlinien zur Farbnutzung herangezogen.


1.4.2 Audio-Kontrolle

Wenn auf einer Webseite Audio automatisch länger als 3 Sekunden abspielt, muss es Möglichkeiten geben, das Audio zu pausieren oder zu stoppen.

Das schützt Nutzer vor unangenehmen Überraschungen.

Was wird geprüft?

Ob Mechanismen vorhanden sind, um die Lautstärke unabhängig vom Gesamtsystem zu steuern.

Das stellt sicher, dass Nutzer die Kontrolle über ihre Hörerfahrung haben.

Warum wird das geprüft?

Inhalte, die den Nutzer stören, können dazu führen, dass sie die Seite sofort verlassen.

Ein besseres Hörerlebnis fördert die Interaktion und das Verweilen auf der Seite.

Wie wird das geprüft?

Durch Tests, die das Nutzerverhalten bei automatisch abspielendem Audio analysieren.

Zusätzlich wird überprüft, ob die Audio-Kontrollmechanismen intuitiv bedienbar sind.


1.4.3 Kontrast (Minimum)

Der Kontrast zwischen Text und Hintergrund muss mindestens 4.5:1 betragen.

Das sorgt für eine gute Lesbarkeit und Sichtbarkeit der Inhalte.

Was wird geprüft?

Ob die visuelle Präsentation von Text und Bildern diesen Kontrastanforderungen entspricht.

Das gilt insbesondere für große Texte, die einen Kontrast von mindestens 3:1 haben müssen.

Warum wird das geprüft?

Ein ausreichender Kontrast verbessert die Lesbarkeit für alle Nutzer, insbesondere für Menschen mit Sehbehinderungen.

Das trägt zur Zugänglichkeit deiner Website bei.

Wie wird das geprüft?

Durch automatische Tools, die das Kontrastverhältnis messen.

Zusätzlich werden Benutzer-Tests durchgeführt, um die Lesbarkeit zu evaluieren.


1.4.4 Text vergrößern

Text kann bis zu 200 Prozent vergrößert werden, ohne dass Inhalte oder Funktionalitäten verloren gehen.

Das ermöglicht es Nutzern, die Schriftgröße an ihre Bedürfnisse anzupassen.

Was wird geprüft?

Ob Texte ohne technische Hilfsmittel vergrößert werden können.

Das betrifft alle Texte, außer Bildunterschriften und Textbilder.

Warum wird das geprüft?

Viele Nutzer benötigen größere Schriftarten, um die Inhalte besser lesen zu können.

Das erhöht die Zugänglichkeit und die Nutzerzufriedenheit.

Wie wird das geprüft?

Durch Tests, bei denen der Text vergrößert wird, ohne dass sich das Layout oder die Funktionalität ändert.

Zusätzlich wird überprüft, ob die Benutzeroberfläche auf größere Schriftgrößen reagiert.


1.4.5 Bilder von Text

Text sollte verwendet werden, um Informationen zu vermitteln, anstatt Bilder von Text zu nutzen.

Das gilt nicht für dekorative Zwecke oder wenn eine bestimmte Textpräsentation essenziell ist.

Was wird geprüft?

Ob Technologien verwendet werden, die die visuelle Präsentation ermöglichen.

Bilder von Text dürfen nur eingesetzt werden, wenn sie anpassbar sind oder für die Informationsvermittlung notwendig sind.

Warum wird das geprüft?

Der Einsatz von echtem Text verbessert die Zugänglichkeit für Screenreader-Nutzer und fördert die Interaktivität.

Das trägt zur Barrierefreiheit deiner Website bei.

Wie wird das geprüft?

Durch Analysen, die den Einsatz von Textbildern und deren Auswirkungen auf die Zugänglichkeit bewerten.

Zusätzlich wird überprüft, ob die Textbilder essenziell sind oder nicht.


1.4.6 Kontrast (Erweitert)

Der Kontrast zwischen Text und Hintergrund muss mindestens 7:1 betragen.

Das gilt für alle Texte und Bilder von Text.

Was wird geprüft?

Ob die visuelle Präsentation den erweiterten Kontrastanforderungen entspricht.

Für große Texte gilt ein Mindestkontrast von 4.5:1.

Warum wird das geprüft?

Ein hoher Kontrast verbessert die Lesbarkeit und Sichtbarkeit für alle Nutzer.

Das trägt dazu bei, dass deine Website für alle zugänglich ist.

Wie wird das geprüft?

Durch automatische Tools zur Messung des Kontrastverhältnisses.

Zusätzlich werden Benutzer-Tests zur Lesbarkeit durchgeführt.


1.4.7 Geringe oder keine Hintergrundgeräusche

Für vorab aufgezeichnete Audioinhalte, die hauptsächlich Sprache im Vordergrund enthalten, dürfen keine störenden Hintergrundgeräusche vorhanden sein.

Das sorgt für ein besseres Hörerlebnis.

Was wird geprüft?

Ob die Audioinhalte entweder keine Hintergrundgeräusche enthalten oder diese abgestellt werden können.

Das erhöht die Zugänglichkeit für hörgeschädigte Nutzer.

Warum wird das geprüft?

Hintergrundgeräusche können die Verständlichkeit beeinträchtigen und Nutzer vom Inhalt ablenken.

Ein klares Audioerlebnis fördert das Engagement.

Wie wird das geprüft?

Durch die Analyse von Audioinhalten und der Lautstärkeverhältnisse.

Zusätzlich werden Tests mit Nutzern durchgeführt, um die Hörerfahrung zu bewerten.


1.4.8 Visuelle Präsentation

Für die visuelle Präsentation von Textblöcken muss ein Mechanismus zur Verfügung stehen, um Folgendes zu erreichen:

  • Vor- und Hintergrundfarben können vom Nutzer ausgewählt werden.
  • Die Breite beträgt maximal 80 Zeichen oder Glyphen (40 bei CJK).
  • Der Text darf nicht blockartig ausgerichtet sein.
  • Der Zeilenabstand beträgt mindestens das 1,5-fache der Schriftgröße, und der Abstand nach Absätzen ist mindestens doppelt so groß wie der Zeilenabstand.

Was wird geprüft?

Ob die oben genannten Anforderungen erfüllt sind.

Das sorgt für eine benutzerfreundliche Textdarstellung.

Warum wird das geprüft?

Eine gut strukturierte visuelle Präsentation verbessert die Lesbarkeit und Benutzererfahrung.

Das trägt zur Zugänglichkeit der Website bei.

Wie wird das geprüft?

Durch Tests, die die visuelle Gestaltung und Benutzerinteraktion berücksichtigen.

Zusätzlich werden Feedback von Nutzern eingeholt.


1.4.9 Bilder von Text (Keine Ausnahme)

Bilder von Text dürfen nur für dekorative Zwecke oder wenn eine bestimmte Präsentation essenziell ist, verwendet werden.

Das schützt die Zugänglichkeit der Inhalte.

Was wird geprüft?

Ob Bilder von Text in einem sinnvollen Kontext eingesetzt werden.

Das betrifft insbesondere Logotypes, die als essenziell gelten.

Warum wird das geprüft?

Der Einsatz von echtem Text verbessert die Zugänglichkeit für alle Nutzer.

Das ist wichtig für eine inklusive Benutzererfahrung.

Wie wird das geprüft?

Durch die Analyse der Verwendung von Textbildern in den Inhalten.

Zusätzlich wird geprüft, ob die Bilder für die Informationsübermittlung erforderlich sind.


1.4.10 Neuformatierung

Inhalte können ohne Verlust von Informationen oder Funktionalität präsentiert werden.

Das erfordert kein Scrollen in zwei Dimensionen.

Was wird geprüft?

Ob Inhalte ohne horizontales oder vertikales Scrollen auf 320 CSS-Pixel Breite bzw. 256 CSS-Pixel Höhe angezeigt werden können.

Warum wird das geprüft?

Ein reibungsloses Nutzererlebnis fördert die Zugänglichkeit und Benutzerfreundlichkeit.

Das ermöglicht es allen Nutzern, die Inhalte problemlos zu erfassen.

Wie wird das geprüft?

Durch Tests, die die Anzeige der Inhalte unter verschiedenen Bedingungen überprüfen.

Zusätzlich wird analysiert, wie Nutzer mit den Inhalten interagieren.

1.4.11 Nicht-Text-Kontrast

Level AA

Die visuelle Präsentation der folgenden Elemente hat ein Kontrastverhältnis von mindestens 3:1 gegenüber angrenzenden Farben:

  • Benutzeroberflächenkomponenten: Visuelle Informationen, die erforderlich sind, um Benutzeroberflächenkomponenten und deren Zustände zu identifizieren, mit Ausnahme von inaktiven Komponenten oder wenn das Aussehen der Komponente durch den Benutzeragenten bestimmt und nicht durch den Autor modifiziert wird;
  • Grafische Objekte: Teile von Grafiken, die zum Verständnis des Inhalts erforderlich sind, es sei denn, eine bestimmte Präsentation von Grafiken ist für die übermittelten Informationen wesentlich.

Was wird geprüft?

Es wird geprüft, ob das Kontrastverhältnis zwischen Benutzeroberflächenkomponenten und angrenzenden Farben mindestens 3:1 beträgt.

Warum wird das geprüft?

Ein ausreichendes Kontrastverhältnis sorgt dafür, dass visuelle Elemente für alle Nutzer sichtbar und erkennbar sind, insbesondere für Personen mit Sehbehinderungen.

Wie wird das geprüft?

Durch die Verwendung von Kontrastmesswerkzeugen, die das Verhältnis zwischen den Farben der Benutzeroberflächenkomponenten und ihrer Umgebung analysieren.

1.4.12 Textabstand

Level AA

In Inhalten, die mithilfe von Auszeichnungssprachen implementiert sind, darf durch die Festlegung der folgenden Eigenschaften und durch die Änderung keiner anderen Stil-Eigenschaft kein Verlust an Inhalt oder Funktionalität auftreten:

  • Zeilenhöhe (Zeilenabstand) von mindestens 1,5-fachem der Schriftgröße;
  • Abstand nach Absätzen von mindestens dem 2-fachen der Schriftgröße;
  • Buchstabenabstand (Tracking) von mindestens 0,12-fachem der Schriftgröße;
  • Wortabstand von mindestens 0,16-fachem der Schriftgröße.

Ausnahme: Menschliche Sprachen und Schriftarten, die eine oder mehrere dieser Textstil-Eigenschaften nicht in schriftlichem Text verwenden, können sich nur auf die Eigenschaften stützen, die für diese Kombination aus Sprache und Schrift vorhanden sind.

Es wird geprüft, ob durch Anpassungen der Textabstände keine Inhalte oder Funktionen verloren gehen, damit alle Nutzer gut auf deine Website zugreifen können.

Was wird geprüft?

Es wird geprüft, ob die Textabstände (Zeilenhöhe, Abstand nach Absätzen, Buchstabenabstand und Wortabstand) den festgelegten Anforderungen entsprechen.

Warum wird das geprüft?

Die richtige Einstellung von Abständen verbessert die Lesbarkeit und Zugänglichkeit des Textes, insbesondere für Menschen mit Lernschwierigkeiten oder Sehbehinderungen.

Wie wird das geprüft?

Durch Überprüfung der CSS-Stile und deren Auswirkungen auf die Textdarstellung in verschiedenen Browsern und Geräten.


1.4.13 Inhalt bei Hover oder Fokus

Level AA

Wenn das Empfangen und anschließende Entfernen des Zeiger-Hovers oder der Tastaturfokussierung zusätzliches Material sichtbar und dann unsichtbar macht, gilt Folgendes:

  • Abweisbar: Es steht ein Mechanismus zur Verfügung, um den zusätzlichen Inhalt abzulehnen, ohne den Zeiger-Hover oder den Tastaturfokus zu bewegen, es sei denn, der zusätzliche Inhalt kommuniziert einen Eingabefehler oder verdeckt oder ersetzt keine anderen Inhalte;
  • Hoverbar: Wenn der Zeiger-Hover den zusätzlichen Inhalt auslösen kann, kann der Zeiger über den zusätzlichen Inhalt bewegt werden, ohne dass der zusätzliche Inhalt verschwindet;
  • Beständig: Der zusätzliche Inhalt bleibt sichtbar, bis der Hover- oder Fokus-Auslöser entfernt wird, der Benutzer ihn abweist oder die Informationen nicht mehr gültig sind.

Ausnahme: Die visuelle Präsentation des zusätzlichen Inhalts wird durch den Benutzeragenten kontrolliert und nicht vom Autor modifiziert.

Es wird geprüft, ob zusätzlicher Inhalt bei Hover oder Fokus korrekt angezeigt wird und ob er für alle Nutzer zugänglich ist.

Was wird geprüft?

Es wird geprüft, ob zusätzlicher Inhalt beim Hover oder Fokus abweisbar, hoverbar und beständig ist.

Warum wird das geprüft?

Die Zugänglichkeit des Inhalts ist entscheidend, um sicherzustellen, dass alle Nutzer, unabhängig von ihren Fähigkeiten, die Informationen problemlos erhalten können.

Wie wird das geprüft?

Durch Interaktion mit der Website, um zu testen, ob der zusätzliche Inhalt wie erwartet reagiert und ob es möglich ist, ihn ohne Probleme zu schließen oder zu navigieren.

Weitere WCAG-Kriterien