Ein vollständiger Leitfaden zur Web-Barrierefreiheit (Teil 1): Das Prinzip der Wahrnehmbarkeit

Sicherstellen, dass Informationen und Benutzeroberflächenkomponenten für alle Nutzer wahrnehmbar sind.

‍

Willkommen zum ersten Teil unserer umfassenden Serie über Web-Barrierefreiheit. Wir beginnen mit dem Fundament der WCAG-Richtlinien, zusammengefasst im Akronym POUR: Wahrnehmbar (Perceivable), Bedienbar (Operable), Verständlich (Understandable) und Robust. Das erste Prinzip, Wahrnehmbarkeit, ist der Ausgangspunkt für jede barrierefreie Website.

‍

Was bedeutet es, dass eine Website wahrnehmbar ist?

Das Prinzip der Wahrnehmbarkeit verlangt, dass Informationen und Benutzeroberflächenkomponenten den Benutzern auf eine Weise präsentiert werden müssen, die sie wahrnehmen können — das heißt durch Sehen, Hören oder Berühren. Mit anderen Worten, Inhalte dürfen nicht mit allen Sinnen eines Benutzers unauffindbar sein. Wenn eine Person mit Sehbehinderung nicht auf die Informationen in einem Bild zugreifen kann oder ein hörgeschädigter Benutzer ein Video nicht verstehen kann, ist Ihre Website nicht wahrnehmbar.

‍

WCAG-Konformitätsstufen

Bevor Sie sich mit den technischen Details befassen, ist es wichtig zu verstehen, wie die WCAG-Richtlinien klassifiziert werden. Für jedes Prinzip lassen sich die Regeln in eine der folgenden drei Kategorien einteilen, die den erreichten Grad der Barrierefreiheit angeben:

Stufe A: Dies ist das Mindestmaß an Konformität. Die Nichteinhaltung dieser Richtlinien führt zu erheblichen Hindernissen für Benutzer mit Behinderungen.
Stufe AA: Diese Stufe umfasst alle Anforderungen der Stufe A sowie weitere. Es ist der Referenzstandard für die meisten globalen Gesetze, einschließlich des Europäischen Gesetzes zur Barrierefreiheit (EAA), und bietet ein mittleres und robustes Maß an Barrierefreiheit.
Stufe AAA: Die höchste und komplexeste Konformitätsstufe. Es umfasst alle Anforderungen der Stufen A und AA und wird in der Regel von spezialisierten Organisationen oder für Inhalte übernommen, die sich an eine bestimmte Zielgruppe mit unterschiedlichen Bedürfnissen richten.

Ausführlicher technischer Leitfaden für das Prinzip der Wahrnehmbarkeit

Im Folgenden haben wir die technischen Regeln und Tipps genau so übernommen und strukturiert, wie sie in den offiziellen Richtlinien definiert sind, um Entwicklern und Erstellern von Inhalten ein praktisches Tool zur Verfügung zu stellen.

‍

1.2 Stellen Sie Textalternativen für alle Nicht-Text-Inhalte bereit

1.2.1. [AAA] Inhalte ohne Text

Alle Bilder und Bildschaltflächen müssen einen suggestiven Alternativtext haben.
Für Hintergrundbilder werden CSS-generierte Hintergründe bevorzugt. Wenn Bilder für den Hintergrund verwendet werden, müssen sie einen explizit markierten Null-Alternativtext haben.
Formularschaltflächen müssen einen beschreibenden Wert haben.
Formulareingaben müssen beschreibende Textbeschriftungen haben.
Multimediainhalte müssen durch beschreibenden, zugänglichen Text gekennzeichnet sein.
Jeder verwendete Frame muss einen Titel haben.

Tipps:

ARIE: Verwenden Sie aria-label, aria-labelledby oder aria-describedby, um Beschriftungen oder Textalternativen hinzuzufügen.
Allgemein: Für eine Gruppe von Bildern, die gemeinsam interpretiert werden sollen, kann dem ersten Bild ein Alt-Wert ungleich Null hinzugefügt werden, um die Gruppe zu beschreiben, während die anderen explizit keine alternativen Texte haben.
HTML/XHTML: Um die Barrierefreiheit zu verbessern, wird empfohlen, Links sowohl textuell als auch grafisch darzustellen. Es wird empfohlen, ein einzelnes Element zu verwenden, das sowohl den Text als auch das Bild enthält, aber das Bild sollte explizit ein Alt-Attribut ohne Wert haben.
HTML/XHTML: Als Variante des vorherigen Falls kann der alternative Text des Bildes ungleich Null sein, wenn es sich bei dem Bild um ein Symbol handelt, das eine visuelle Botschaft vermittelt. Wenn das Symbol beispielsweise darauf hindeutet, dass durch Klicken auf den Link eine PDF-Datei geöffnet wird, sollte der Alt-Text des Bildes sehbehinderte Benutzer davor warnen.
HTML/XHTML: Für Applet-Elemente wird die Textalternative sowohl mithilfe des alt-Attributs als auch durch Bereitstellung von Text innerhalb des Applet-Elements erstellt. Beide sind erforderlich, da die Unterstützung für das Applet-Element je nach Benutzerprogramm unterschiedlich ist.
HTML/XHTML: Für Bilder, die als Formularschaltflächen verwendet werden, wird der alternative Text über das Alt-Attribut des Eingabeelements vom Typ img bereitgestellt.
HTML/XHTML: Eingabeelemente vom Typ Text, Checkbox, Radio, Datei, Passwort sowie Textarea- und Select-Elemente können mithilfe eines Labelelements, dessen for-Attribut den gleichen Wert wie das ID-Attribut des Label-Elements haben muss, einem Label zugeordnet werden. Diese Methode kann nicht verwendet werden, um Eingaben vom Typ Submit, Reset, IMG oder Button zu kennzeichnen.
HTML/XHTML: In Fällen, in denen ein Labelelement nicht verwendet werden kann (entweder aus Platzmangel oder weil es nicht sinnvoll ist), kann das Titelattribut verwendet werden, um Formularinteraktionsfelder zu beschriften.
HTML/XHTML: Objektelemente können die Textalternative in ihrem Körper enthalten oder sie können ein Bild/Video enthalten, dessen Textalternative wiederum über ein eigenes Alt-Attribut bereitgestellt wird.

1.3 Bieten Sie Alternativen für zeitbasierte Medien

1.3.1. [A] Nur Audio und Nur Video (vorab aufgenommen)

Allen reinen Audioinhalten muss ein erweitertes Transkript mit beschreibenden Elementen beigefügt werden (die sich auf Elemente beziehen, die für das Verständnis erforderlich sind).
Alle reinen Videoinhalte müssen von einer Audio- oder Textbeschreibung begleitet werden.

Tipps:

Allgemein: Die Textalternative für einen Podcast kann das Drehbuch (falls verfügbar) sein, das mit Beschreibungen der Hintergrundgeräusche angereichert ist.
Allgemein: Die Textalternative für eine PPT-Präsentation, die in ein Stummvideo umgewandelt wurde, enthält sowohl die Beschreibung des Folieninhalts als auch alle Animationen/Effekte, die zum Verständnis erforderlich sind.
Allgemein: Die Audioalternative für eine PPT-Präsentation, die in ein Stummvideo umgewandelt wurde, beschreibt den Inhalt der Folien sowie Erläuterungen, die der Moderator zur Unterstützung bestimmter Punkte auf diesen Folien gegeben hat.
HTML/XHTML: Videoelemente können Track-Elementen in HTML5 zugeordnet werden. Das src-Attribut des Track-Elements kann eine Datei angeben, die die Audiodeskription des Films enthält, die mit den Ereignissen im Film synchronisiert ist.

1.3.2. [A] Bildunterschriften (vorab aufgenommen)

Alle aufgezeichneten Audio-Video-Inhalte müssen synchronisierte Untertitel haben, es sei denn, der Audio-Video-Inhalt ist selbst eine Medienalternative für Text (und ist deutlich als solche gekennzeichnet).
Tipps:
HTML/XHTML: Das Track-Element kann verwendet werden, um Beschriftungen für ein Videoelement bereitzustellen.

1.3.3. [A] Audiobeschreibung oder Medienalternative (vorab aufgenommen)

Für alle aufgezeichneten Audio- und Videoinhalte muss eine Alternative bereitgestellt werden — entweder eine Textbeschreibung (die mehr als nur eine Bildunterschrift ist) oder eine Audiobeschreibung.

1.3.4. [AA] Bildunterschriften (Live)

Alle Live-Medieninhalte mit einer Audiokomponente müssen von synchronisierten Untertiteln begleitet werden.
Tipps:
Allgemein: Echtzeit-Übersetzungsdienste können verwendet werden, um solche Bildunterschriften zu generieren.

1.3.5. [AA] Audiobeschreibung (vorab aufgenommen)

Für alle aufgezeichneten Audio-Video-Inhalte muss die Möglichkeit bestehen, einen alternativen Soundtrack auszuwählen, der die Audiobeschreibung der präsentierten Bilder enthält.

1.3.6. [AAA] Gebärdensprache (vorab aufgenommen)

Für alle Audioinhalte muss auch eine Übersetzung in Gebärdensprache bereitgestellt werden.

1.3.7. [AAA] Erweiterte Audiobeschreibung (vorab aufgenommen)

Für alle Audio-/Videoinhalte, bei denen der Hintergrundton nicht lang genug ist, um eine ausreichend umfassende synchronisierte Audiobeschreibung zu ermöglichen, muss eine Medienversion bereitgestellt werden, die angemessen segmentiert ist, um eine erweiterte Audiobeschreibung aufzunehmen.

1.3.8. [AAA] Media Alternative (vorab aufgenommen)

Für alle Audiovideo- oder reinen Videoinhalte muss auch eine beschreibende Alternative (Text, der von einem Screenreader gelesen werden kann) angeboten werden.

1.3.9. [AAA] Nur Audio (Live)

Für alle reinen Audioinhalte muss auch eine Medienalternative angeboten werden, die auf der Sicht beruht (Untertitel in Echtzeit, Live-Video mit dem Äquivalent in Gebärdensprache usw.).

1.4 Erstellen Sie Inhalte, die auf unterschiedliche Weise präsentiert werden können, ohne Informationen oder Struktur zu verlieren

1.4.1. [A] Informationen und Beziehungen

Semantisches Markup im HTML-Code muss angemessen verwendet werden (für Überschriften, Listen, Hervorhebungen usw.).
Tabellarische Daten müssen in Tabellen mit Titeln und Zusammenfassungen strukturiert sein.
Formulareingaben müssen mit Textbeschriftungen gekennzeichnet und entsprechend gruppiert werden.

1.4.2. [A] Aussagekräftige Reihenfolge

Die Lese- und Navigationsreihenfolge der Seite muss logisch sein. Screenreader müssen Zugriff auf Informationen zur Reihenfolge der Blöcke auf der Seite haben.

1.4.3. [A] Sensorische Eigenschaften

Anleitungen zum Verstehen und Bedienen des Inhalts dürfen nicht auf visuellen Merkmalen beruhen (z. B. „es befindet sich in der linken Spalte“ oder „Klicken Sie auf das rote Quadrat“).
Anweisungen zum Verstehen und Bedienen des Inhalts dürfen nicht auf akustischen Hinweisen beruhen (z. B. „warte auf den Signalton“).

1.5 Machen Sie es Benutzern einfacher, Inhalte zu sehen und zu hören, einschließlich der Trennung von Vordergrund und Hintergrund

1.5.1. [A] Verwendung von Farbe

Farbe darf nicht als alleiniges Mittel zur Vermittlung von Informationen oder zur Verwaltung von Interaktionen verwendet werden.
Um Links vom Rest des Textes zu unterscheiden, reicht es nicht aus, wenn sie nur eine andere Farbe haben, es sei denn, der Kontrast zum Hintergrund beträgt mindestens 3:1 und das Auswählen oder Bewegen des Links über den Link geht mit dem Erscheinen eines Unterscheidungsmerkmals (z. B. einer Unterstreichung) einher.

1.5.2. [A] Audiosteuerung

Wenn eine Seite Audio enthält, das automatisch abgespielt wird, muss es auf der Seite Mechanismen geben, mit denen der Ton gestoppt, angehalten, angepasst oder stummgeschaltet werden kann.

1.5.3. [AA] Kontrast (Minimum)

Text und Textbilder müssen einen Mindestkontrast von haben 4, 5:1.
Großer Text (mindestens 18 Punkt oder 14 Punkt fett) muss einen Mindestkontrast von haben 3:1.
Hintergrundtext oder Text in Logos sind von diesen Bedingungen ausgenommen.

1.5.4. [AA] Textgröße ändern

Die Seite muss funktionsfähig und lesbar bleiben, wenn die Größe auf bis zu 200% ihrer Originalgröße geändert wird.

1.5.5. [AA] Bilder von Text

Wenn Informationen nur mit Text (möglicherweise formatiert) übermittelt werden können, sollte die Verwendung von Bildern, die diesen Text enthalten, vermieden werden.
Eine Ausnahme von dieser Regel ist, wenn das Bild des Textes dynamisch generiert und an die Anforderungen des Benutzers angepasst werden kann.

1.5.6. [AAA] Kontrast (verbessert)

Text und Textbilder müssen einen Mindestkontrast von haben 7:1.
Großer Text (mindestens 18 Punkt oder 14 Punkt fett) muss einen Mindestkontrast von haben 4, 5:1.
Hintergrundtext oder Text in Logos sind von diesen Bedingungen ausgenommen.

1.5.7. [AAA] Niedriges oder kein Hintergrundgeräusch

Das Hintergrundgeräusch einer Konversation darf nicht vorhanden sein oder leiser gestellt werden können, um Probleme beim Verstehen von Wörtern zu vermeiden.
Wenn das Hintergrundgeräusch nicht eingestellt werden kann, muss es eine Lautstärke haben, die mindestens 20 dB niedriger ist als die des Gesprächs.

1.5.8. [AAA] Visuelle Präsentation

Für die visuelle Darstellung von Textblöcken muss ein Mechanismus vorhanden sein, der Anpassungen ermöglicht, sodass die folgenden Regeln eingehalten werden:
- Die Hintergrund- und die Textfarbe können vom Benutzer ausgewählt werden.
- Die Breite kann auf maximal 80 Zeichen pro Zeile festgelegt werden.
- Die Textausrichtung sollte NICHT gerechtfertigt sein (sowohl am linken als auch am rechten Rand ausgerichtet).
- Der Abstand zwischen den Zeilen eines Absatzes muss mindestens 1,5 und zwischen den Absätzen mindestens 2,5 betragen.
- Bei der Größenänderung von Text bis zu 200% der ursprünglichen Größe darf kein horizontales Scrollen erforderlich sein.

1.5.9. [AAA] Textbilder (keine Ausnahme)

Textbilder sollten niemals anstelle des tatsächlichen Textes verwendet werden.

Vereinfachen Sie die Wahrnehmbarkeit mit Wawsome

‍

Die manuelle Implementierung dieser Regeln kann ein mühsamer und fehleranfälliger Prozess sein. Umwerfend wurde entwickelt, um diesen Aufwand zu automatisieren und zu vereinfachen.

KI-gestützte Korrekturen: Unsere Plattform fügt Bildern und wichtigen ARIA-Labels automatisch beschreibenden Alt-Text hinzu und stellt so sicher, dass kein Nicht-Text-Inhalt für unterstützende Technologien unsichtbar bleibt.
Benutzeranpassung: Das Wawsome-Widget gibt Besuchern die Kontrolle. Sie können Kontrast, Farben, Abstände und Textgröße anpassen, Filter für Farbenblindheit aktivieren oder vordefinierte Profile für verschiedene Bedürfnisse auswählen, um eine optimale Lesbarkeit für alle zu gewährleisten.

‍

Entdecken Sie diese und viele weitere Funktionen, indem Sie noch heute eine kostenlose 7-Tage-Testversion starten!

Fazit

Wahrnehmbarkeit ist mehr als eine Checkliste technischer Anforderungen; sie ist die Grundlage, auf der ein wirklich inklusives digitales Erlebnis aufgebaut ist. Indem Sie sicherstellen, dass alle Nutzer Ihre Inhalte wahrnehmen können, öffnen Sie die Tür zu effektiver Kommunikation und zeigen ein echtes Engagement für jedes Mitglied Ihrer Zielgruppe.

In unserem nächsten Artikel werden wir uns mit dem zweiten WCAG-Prinzip befassen: Bedienbarkeit. Wir zeigen Ihnen, wie Sie sicherstellen können, dass alle Nutzer auf Ihrer Website navigieren und mit ihr interagieren können, unabhängig davon, welches Gerät oder welche Eingabemethode sie verwenden.