Wahrnehmbar

Dieser Artikel bietet praktische Ratschläge, wie Sie Ihre Webinhalte so gestalten, dass sie den Erfolgskriterien entsprechen, die im wahrnehmbaren Prinzip der Web Content Accessibility Guidelines (WCAG) 2.0 und 2.1 festgelegt sind. Wahrnehmbar bedeutet, dass Benutzer in der Lage sein müssen, es auf irgendeine Weise wahrzunehmen, indem sie einen oder mehrere ihrer Sinne nutzen.

Hinweis: Um die W3C-Definitionen für Wahrnehmbar und seine Richtlinien und Erfolgskriterien zu lesen, siehe Prinzip 1: Wahrnehmbar - Informationen und Benutzeroberflächenkomponenten müssen so dargestellt werden, dass Benutzer sie wahrnehmen können.

Richtlinie 1.1 — Bereitstellung von Textalternativen für nicht-textuelle Inhalte

Der Schlüssel hierbei ist, dass Text in andere Formen umgewandelt werden kann, die Menschen mit Behinderungen nutzen können. Beispielsweise kann er von einem Screenreader gesprochen, in großen Druck umgewandelt oder auf einem Brailledisplay dargestellt werden. Nicht-textuelle Inhalte beziehen sich auf Multimedia wie Bilder, Audio und Video.

Erfolgskriterien Wie die Kriterien erfüllt werden Praktische Ressource
1.1.1 Textäquivalente bereitstellen (A) Alle Bilder, die bedeutungsvolle Inhalte vermitteln, sollten mit geeignetem alternativem Text versehen werden. Textalternativen.
Komplexe Bilder oder Grafiken sollten eine barrierefreie Alternative haben, entweder auf derselben Seite oder über einen Link. Verwenden Sie einen regulären Link anstelle eines longdesc-Attributs.

Eine Textbeschreibung kann sinnvoll sein, oder eine barrierefreie Datentabelle (siehe HTML-Tabellenbarrierefreiheit). Siehe W3C's Image Description Extension (longdesc) für das Argument gegen longdesc.

Multimedia-Inhalte (z. B. Audio oder Video) sollten zumindest über eine beschreibende Kennzeichnung wie eine Untertitelung verfügen.

Siehe Textalternativen für statische Untertiteloptionen, und Audiotranskripte, Videotextspuren für andere Alternativen.

UI-Steuerungselemente wie Formularelemente und Buttons sollten Textlabels haben, die ihren Zweck beschreiben. Buttons sind einfach—Sie sollten sicherstellen, dass der Buttontext die Funktion des Buttons beschreibt (z.B., <button>Upload image</button>). Weitere Informationen zu anderen UI-Steuerelementen finden Sie unter Verwenden Sie semantische UI-Steuerelemente, wo immer möglich.
Dekorative (Nicht-Inhalts-)Bilder, Videos usw. sollten so implementiert werden, dass sie von assistiven Technologien unsichtbar sind, um Benutzer nicht zu verwirren.

Dekorative Bilder sollten mit CSS-Hintergrundbildern implementiert werden (siehe Hintergründe und Ränder). Wenn Sie ein Bild über ein <img>-Element einfügen müssen, geben Sie ihm ein leeres Alt-Attribut (alt=""). Andernfalls versuchen Screenreader möglicherweise, den Dateipfad usw. vorzulesen.

Wenn Sie ein Hintergrundvideo oder -audio einfügen, das automatisch abgespielt wird, machen Sie es so unauffällig wie möglich. Lassen Sie es nicht wie Inhalt aussehen/klingen und bieten Sie eine Steuerung an, um es auszuschalten. Idealerweise sollten Sie es überhaupt nicht einfügen.

Hinweis: Siehe auch die WCAG-Beschreibung für Richtlinie 1.1: Textalternativen.

Richtlinie 1.2 — Bereitstellung von Textalternativen für zeitbasierte Medien

Zeitbasierte Medien beziehen sich auf Multimedia mit einer Dauer, wie Audio und Video. Beachten Sie, dass, wenn das Audio/Video als Alternative zu bestehenden Textinhalten dient, Sie keine weitere Textalternative bereitstellen müssen.

Erfolgskriterien Wie die Kriterien erfüllt werden Praktische Ressource
1.2.1 Alternativen für vorab aufgezeichnete nur Audio- und nur Video-Inhalte bereitstellen (A) Ein Transkript sollte für voraufgezeichnete nur Audio-Medien bereitgestellt werden, und ein Transkript oder eine Audiobeschreibung sollte für voraufgezeichnete nur Video-Medien (d.h. stilles Video) bereitgestellt werden. Siehe Audiotranskripte für Transkriptinformationen. Es ist noch kein Tutorial zur Audiobeschreibung verfügbar.
1.2.2 Untertitel für internetbasiertes Video bereitstellen (A) Sie sollten Untertitel für Videos bereitstellen, die im Internet präsentiert werden (z.B. HTML-Video). Dies kommt Menschen zugute, die den Audioteil des Videos nicht hören können. Siehe Videotextspuren für HTML-Video-Untertitel. Siehe auch Fügen Sie eigene Untertitel hinzu (YouTube).
1.2.3 Texttranskript oder Audiobeschreibung für internetbasiertes Video bereitstellen (A) Sie sollten Texttranskripte oder Audiobeschreibungen für Videos bereitstellen, die im Internet präsentiert werden (z.B. HTML-Video). Dies dient Menschen, die den visuellen Teil des Videos nicht sehen können und den kompletten Inhalt nicht nur aus dem Audio erschließen. Siehe Audiotranskripte für Transkriptinformationen. Es ist noch kein Tutorial zur Audiobeschreibung verfügbar.
1.2.4 Untertitel für Live-Audio bereitstellen (AA) Sie sollten synchronisierte Untertitel für sämtliche Live-Multimedia bereitstellen, das Audio enthält (z.B. Videokonferenzen, Live-Audio-Übertragungen).
1.2.5 Audiobeschreibungen für voraufgezeichnetes Video bereitstellen (AA) Audiobeschreibungen sollten für voraufgezeichnetes Video bereitgestellt werden, jedoch nur, wenn das bestehende Audio die im Video ausgedrückte volle Bedeutung nicht vermittelt.
1.2.6 Gebärdenspracheäquivalent zu voraufgezeichnetem Audio bereitstellen (AAA) Ein gleichwertiges Gebärdensprachevideo sollte für jegliche voraufgezeichneten Inhalte bereitgestellt werden, die Audio enthalten.
1.2.7 Erweiterte Videos mit Audiobeschreibungen bereitstellen (AAA) Wo Audiobeschreibungen nicht bereitgestellt werden können (siehe 1.2.5) aufgrund von Video-Zeitproblemen (z.B. es gibt keine geeigneten Pausen im Inhalt, in denen die Audiobeschreibungen eingefügt werden können), sollte eine alternative Version des Videos bereitgestellt werden, die eingefügte Pausen (und Audiobeschreibungen) enthält.
1.2.8 Alternative für voraufgezeichnete Medien bereitstellen (AAA) Für alle Inhalte, die Video enthalten, sollte ein beschreibendes Texttranskript bereitgestellt werden, zum Beispiel ein Drehbuch des Films, den Sie anschauen. Dies dient hörbehinderten Zuschauern, die den Inhalt nicht hören können. Siehe Audiotranskripte für Transkriptinformationen.
1.2.9 Transkript für Live-Audio bereitstellen (AAA) Für jegliche Live-Audioinhalte, die ausgestrahlt werden, sollte ein beschreibender Text bereitgestellt werden, zum Beispiel ein Drehbuch des Stückes oder der Musik, die Sie hören. Dies dient hörbehinderten Zuschauern, die den Inhalt nicht hören können. Siehe Audiotranskripte für Transkriptinformationen.

Hinweis: Siehe auch die WCAG-Beschreibung für Richtlinie 1.2: Zeitbasierte Medien: Bereitstellung von Alternativen für zeitbasierte Medien.

Richtlinie 1.3 — Erstellen von Inhalten, die auf unterschiedliche Weise präsentiert werden können

Diese Richtlinie bezieht sich auf die Fähigkeit von Inhalten, von Benutzern auf verschiedene Weise konsumiert zu werden, wobei deren unterschiedliche Bedürfnisse berücksichtigt werden.

Erfolgskriterien Wie die Kriterien erfüllt werden Praktische Ressource
1.3.1 Informationen und Beziehungen (A)

Jegliche Inhaltsstruktur—oder visuelle Beziehung zwischen Inhalten— kann auch programmatisch bestimmt oder aus Textbeschreibungen abgeleitet werden. Die Hauptsituationen, in denen dies relevant ist, sind:

  • Textbeschriftungen und die von ihnen beschriebenen Formularelemente. Diese sind eindeutig mit dem <label>-Element verknüpft, das von Screenreadern usw. erfasst werden kann.
  • Bild-Alt-Text. Inhaltsbilder sollten über Text verfügen, der deren Inhalt klar beschreibt und der programmatisch damit verknüpft werden kann (z.B. alt Text) oder anderweitig leicht zuzuordnen ist (z.B. beschreibt es und ist direkt daneben platziert). Dies sollte bedeuten, dass die vollständige Bedeutung auch dann erschlossen werden kann, wenn Sie das Bild nicht sehen können.
  • Listen. Wenn die Reihenfolge der Listenelemente wichtig ist, verwenden Sie eine geordnete Liste (<ol>).
Das gesamte

HTML: Eine gute Grundlage für Barrierefreiheit ist vollgepackt mit Informationen dazu, aber Sie sollten insbesondere auf Gute Semantik, Verwenden Sie semantische UI-Steuerelemente, wo möglich, und Textalternativen.

1.3.2 Bedeutungsvolle Inhaltssequenz (A) Eine sinnvolle, logische Lesereihenfolge sollte für jegliche Inhalte leicht erkennbar sein, selbst wenn sie visuell auf ungewöhnliche Weise präsentiert werden. Die Reihenfolge sollte durch die Verwendung korrekter semantischer Elemente (z.B. Überschriften, Absätze) deutlich gemacht werden, wobei CSS verwendet wird, um ungewöhnliche Layoutstile zu erstellen, unabhängig von der Auszeichnung. Erneut verweisen Sie auf HTML: Eine gute Grundlage für Barrierefreiheit.
1.3.3 Sensorische Merkmale (A)

Anweisungen zum Bedienen von Steuerelementen oder zum Verstehen von Inhalten basieren nicht nur auf einem einzelnen Sinn. Dies kann für Menschen mit einer Behinderung, die mit diesem Sinn in Verbindung steht, oder für ein Gerät, das diesen Sinn nicht unterstützt, unzugänglich sein. Zum Beispiel:

  • "Klicken Sie auf die runde Schaltfläche, um fortzufahren"
    Die Schaltfläche sollte klar beschriftet sein, damit offensichtlich ist, dass es die Schaltfläche ist, die Sie drücken müssen. Wenn es mehrere Schaltflächen gibt, stellen Sie sicher, dass alle klar beschriftet sind, um deren Funktion zu unterscheiden.
  • "Hören Sie sich die Audio-Anweisungen für eine Führung an"
    Das ist offensichtlich problematisch—Audio wird für Menschen mit Hörbehinderungen unzugänglich sein, während Text gelesen, aber auch von einem Screenreader gesprochen werden kann, falls erforderlich.
  • "Wischen Sie von der rechten Seite des Bildschirms, um das Menü anzuzeigen"
    Einige Benutzer könnten nicht in der Lage sein, den Bildschirm zu wischen, entweder aufgrund einer Behinderung oder weil ihr Gerät das Wischen nicht unterstützt. Alternativ sollte eine Lösung angeboten werden, wie z.B. eine Tastenkombination oder eine Taste, die über die Tastatur oder andere Mittel aktiviert werden kann.

Hinweis: Das Übermitteln von Anweisungen nur durch Farbe ist verwandt, wird jedoch in einer anderen Richtlinie behandelt — 1.4.1.

1.3.4 Orientierung (AA) hinzugefügt in 2.1 Inhalte schränken ihre Ansicht und Bedienung nicht auf eine einzige Anzeigenausrichtung wie Hoch- oder Querformat ein, es sei denn, eine spezifische Anzeigenausrichtung ist wesentlich.

Orientierung verstehen

1.3.5 Zweck der Eingabe ermitteln (AA) hinzugefügt in 2.1

Folgen Sie der Liste von 53 Eingabefeldern, um programmatisch den Zweck eines Feldes zu ermitteln.

Den Zweck der Eingabe verstehen
1.3.6 Zweck identifizieren (AAA) hinzugefügt in 2.1 In Inhalten, die mit Markup-Sprachen implementiert sind, kann der Zweck von Benutzeroberflächenkomponenten, Symbolen und Regionen programmatisch bestimmt werden. Den Zweck verstehen

Hinweis: Siehe auch die WCAG-Beschreibung für Richtlinie 1.3: Anpassungsfähig: Erstellen Sie Inhalte, die auf unterschiedliche Weise präsentiert werden können, ohne Informationen oder Struktur zu verlieren.

Richtlinie 1.4: Machen Sie es Benutzern einfacher, Inhalte zu sehen und zu hören, einschließlich der Trennung von Vorder- und Hintergrund

Diese Richtlinie bezieht sich darauf, sicherzustellen, dass Kerninhalte leicht von Hintergründen und anderen Dekorationen zu unterscheiden sind. Das klassische Beispiel ist die Farbe (sowohl Farbkontrast als auch Verwendung von Farbe, um Anweisungen zu vermitteln), aber es gilt auch in anderen Situationen.

Erfolgskriterien Wie die Kriterien erfüllt werden Praktische Ressource
1.4.1 Verwendung von Farbe (A)

Farbe sollte nicht allein verwendet werden, um Informationen zu vermitteln. Zum Beispiel sollten Felder in Formularen nicht nur durch eine Farbe (wie rot) als erforderlich markiert werden. Stattdessen (oder zusätzlich) wäre etwas wie ein Sternchen mit einem Etikett "erforderlich" angemessener.

Siehe Verwendung von Farbe, Farbe und Farbkontrast, und Mehrere Etiketten.
1.4.2 Audiosteuerungen (A) Für jegliches Audio, das länger als drei Sekunden abgespielt wird, sollten zugängliche Steuerungen zum Abspielen, Pausieren des Audios/Videos und zum Anpassen der Lautstärke bereitgestellt werden. Verwenden Sie native <button>, um zugängliche Tastatursteuerungen bereitzustellen, wie in Grundlagen der Videoplayer-Stilisierung gezeigt.
1.4.3 Minimalkontrast (AA)

Der Farbkontrast zwischen Hintergrund und Vordergrundinhalten sollte auf einem Mindestniveau sein, um die Lesbarkeit zu gewährleisten:

  • Text und sein Hintergrund sollten ein Kontrastverhältnis von mindestens 4.5:1 haben.
  • Überschrift (oder nur größerer) Text sollte ein Verhältnis von mindestens 3:1 haben. Größerer Text ist als mindestens 18pt oder 14pt fett definiert.
Siehe Farbkontrast und Farbe und Farbkontrast.
1.4.4 Text vergrößern (AA) Die Seite sollte lesbar und benutzbar sein, wenn die Textgröße verdoppelt wird. Das bedeutet, dass Designs responsiv sein sollten, sodass, wenn die Textgröße erhöht wird, die Inhalte weiterhin zugänglich sind.
1.4.5 Bilder von Text (AA) Bilder sollten NICHT verwendet werden, um Inhalte zu präsentieren, bei denen Text die Aufgabe erledigen könnte. Zum Beispiel könnte, wenn ein Bild hauptsächlich Text enthält, es mit Text sowie mit Bildern dargestellt werden.
1.4.6 Erhöhter Kontrast (AAA)

Dies folgt auf und baut auf Kriterium 1.4.3 auf.

  • Text und sein Hintergrund sollten ein Kontrastverhältnis von mindestens 7:1 haben.
  • Überschrift (oder nur größerer) Text sollte ein Verhältnis von mindestens 4.5:1 haben. Größerer Text ist als mindestens 18pt oder 14pt fett definiert.
Siehe Farbe und Farbkontrast.
1.4.7 Niedriger oder kein Hintergrundaudio (AAA) Voraufgezeichnete Audiowiedergaben, die hauptsächlich Sprache enthalten, sollten minimale Hintergrundgeräusche aufweisen, damit der Inhalt leicht verständlich ist.
1.4.8 Visuelle Präsentation (AAA)

Für die Präsentation von Textinhalten sollte folgendes zutreffen:

  • Vorder- und Hintergrundfarben sollten vom Benutzer auswählbar sein.
  • Textblöcke sollten nicht breiter sein als 80 Zeichen (oder Glyphen) für maximale Lesbarkeit.
  • Text sollte nicht vollständig gerechtfertigt sein (z.B. text-align: justify;).
  • Der Zeilenabstand sollte innerhalb von Absätzen mindestens 1,5-mal so groß wie die Textgröße sein (z.B. line-height: 1.5;), und zwischen den Absätzen mindestens 2,25-mal der Textgröße betragen (z.B. padding: 2.25rem;).
  • Wenn die Textgröße verdoppelt wird, sollte der Inhalt nicht gescrollt werden müssen.
1.4.9 Textbilder (Keine Ausnahme) (AAA) Text sollte nicht als Teil eines Bildes dargestellt werden, es sei denn, es ist rein dekorativ (d.h. es vermittelt keine Inhalte) oder kann auf keine andere Weise dargestellt werden.
1.4.10 Umfluss (AA) hinzugefügt in 2.1
  • Kein horizontales Scrollen für von links nach rechts gerichtete Sprachen (wie Englisch) oder von rechts nach links gerichtete Sprachen (wie Arabisch)
  • Kein vertikales Scrollen für von oben nach unten gerichtete Sprachen (wie Japanisch)
  • Ausgenommen sind Teile des Inhalts, die für die Nutzung oder Bedeutung ein zweidimensionales Layout erfordern (wie eine große Datentabelle)
Umfluss verstehen
1.4.11 Nicht-Text-Kontrast (AA) hinzugefügt in 2.1 Mindestfarbkontrastverhältnis von 3:1 für Benutzeroberflächenkomponenten und grafische Objekte. Nicht-Text-Kontrast verstehen
1.4.12 Textabstand (AA) hinzugefügt in 2.1

Es gibt keinen Verlust von Inhalten oder Funktionalität, wenn die folgenden Stile angewendet werden:

  • Zeilenhöhe (Zeilenabstand) mindestens 1,5-mal der Schriftgröße
  • Abstand nach Absätzen mindestens 2-mal der Schriftgröße
  • Zeichenabstand (Tracking) mindestens 0,12-mal der Schriftgröße
  • Wortabstand mindestens 0,16-mal der Schriftgröße
 Textabstand verstehen
1.4.13 Inhalt bei Hover oder Fokus (AA) hinzugefügt in 2.1

Während zusätzlicher Inhalt erscheinen und verschwinden kann in Koordination mit Hover und Tastaturfokus, spezifiziert dieses Erfolgskriterium drei Bedingungen, die erfüllt sein müssen:

  • abweisbar (kann geschlossen/entfernt werden)
  • hoverfähig (der zusätzliche Inhalt verschwindet nicht, wenn der Zeiger darüber ist)
  • persistent (der zusätzliche Inhalt verschwindet nicht ohne Benutzerinteraktion)
Inhalt bei Hover oder Fokus verstehen

Hinweis: Siehe auch die WCAG-Beschreibung für Richtlinie 1.4: Unterscheidbar: Machen Sie es Benutzern einfacher, Inhalte zu sehen und zu hören, einschließlich der Trennung von Vorder- und Hintergrund.

Siehe auch