Wahrnehmbar

Dieser Artikel bietet praktische Ratschläge, wie Sie Ihre Webinhalte so verfassen, dass sie den Erfolgskriterien des Wahrnehmbar-Prinzips der Web Content Accessibility Guidelines (WCAG) 2.0 und 2.1 entsprechen. Wahrnehmbar bedeutet, dass Benutzer sie auf irgendeine Weise mit einem oder mehreren ihrer Sinne wahrnehmen können müssen.

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

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

Der Schlüssel hier ist, dass Text in andere Formen umgewandelt werden kann, die Menschen mit Behinderungen verwenden können. Zum Beispiel kann er von einem Bildschirmleser 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 Bereitstellung von Textequivalenten (A) Alle Bilder, die bedeutungsvolle Inhalte vermitteln, sollten mit geeignetem Alternativtext versehen werden. Textalternativen.
Komplexe Bilder oder Grafiken sollten eine zugängliche Alternative erhalten, entweder auf derselben Seite oder über einen Link. Verwenden Sie einen normalen Link anstelle eines longdesc-Attributs.

Eine Textbeschreibung kann funktionieren, oder eine zugängliche Datentabelle (siehe HTML-Tabellen-Barrierefreiheit). Siehe W3C's Image Description Extension (longdesc) für das Argument gegen longdesc.

Multimedia-Inhalte (d.h. Audio oder Video) sollten zumindest eine beschreibende Identifikation haben, wie etwa eine Untertitelung oder Ähnliches.

Siehe Textalternativen für statische Untertiteloptionen, und Audio-Transkripte, Video-Textspuren für andere Alternativen.

UI-Steuerelemente wie Formularelemente und Schaltflächen sollten Textbezeichnungen haben, die ihren Zweck beschreiben. Schaltflächen sind einfach—Sie sollten sicherstellen, dass der Schaltflächentext die Funktion der Schaltfläche beschreibt (z.B. <button>Bild hochladen</button>). Für weitere Informationen zu anderen UI-Steuerelementen siehe Verwenden Sie semantic UI-Steuerelemente, wo möglich.
Implementieren Sie dekorative (nicht-inhaltliche) Bilder, Videos usw. so, dass sie für unterstützende Technologien unsichtbar sind, um Benutzer nicht zu verwirren.

Dekorative Bilder sollten mit CSS-Hintergrundbildern implementiert werden (siehe Hintergründe und Rahmen). Wenn Sie ein Bild über ein <img>-Element einschließen müssen, geben Sie ihm ein leeres alt (alt=""). Andernfalls versuchen Bildschirmleser möglicherweise, den Dateipfad usw. vorzulesen.

Wenn Sie Hintergrundvideo oder -audio einfügen, das automatisch wiedergegeben wird, machen Sie es so unauffällig wie möglich. Lassen Sie es nicht wie Inhalt aussehen/klingen und bieten Sie eine Steuerung, um es auszuschalten. Idealerweise sollten Sie es gar 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 Bereitstellung von Alternativen für voraufgezeichnete Audio-only- und Video-only-Inhalte (A) Für voraufgezeichnete Audio-only-Medien sollte ein Transkript bereitgestellt werden, und für voraufgezeichnete Video-only-Medien (d.h. stille Videos) sollte ein Transkript oder eine Audiobeschreibung bereitgestellt werden. Siehe Audio-Transkripte für Transkriptinformationen. Noch kein Audiobeschreibungstutorial verfügbar.
1.2.2 Bereitstellung von Untertiteln für webbasierte Videos (A) Sie sollten Untertitel für auf dem Web präsentierte Videos bereitstellen (z.B. HTML-Video). Dies ist zum Vorteil von Menschen, die den Audioteil des Videos nicht hören können. Siehe Video-Textspuren für HTML-Video-Untertitel. Siehe auch Fügen Sie Ihre eigenen Untertitel & geschlossene Untertitel hinzu (YouTube).
1.2.3 Bereitstellung von Texttranskript oder Audiobeschreibung für webbasierte Videos (A) Sie sollten Texttranskripte oder Audiobeschreibungen für auf dem Web präsentierte Videos bereitstellen (z.B. HTML-Video). Dies ist zum Vorteil von Menschen, die den visuellen Teil des Videos nicht sehen können und den Inhalt nicht alleine aus dem Audio erhalten. Siehe Audio-Transkripte für Transkriptinformationen. Noch kein Audiobeschreibungstutorial verfügbar.
1.2.4 Bereitstellung von Untertiteln für Live-Audio (AA) Sie sollten synchronisierte Untertitel für alle Live-Multimedia bereitstellen, das Audio enthält (z.B. Videokonferenzen, Live-Audioübertragungen).
1.2.5 Bereitstellung von Audiobeschreibungen für voraufgezeichnete Videos (AA) Audiobeschreibungen sollten für voraufgezeichnete Videos bereitgestellt werden, jedoch nur, wenn das bestehende Audio nicht die volle im Video ausgedrückte Bedeutung vermittelt.
1.2.6 Bereitstellung von Gebärdensprache-Äquivalenten zu voraufgezeichnetem Audio (AAA) Ein entsprechendes Gebärdensprachvideo sollte für alle voraufgezeichneten Inhalte mit Audio bereitgestellt werden.
1.2.7 Bereitstellung von erweitertem Video mit Audiobeschreibungen (AAA) Wenn Audiobeschreibungen aufgrund von Video-Timing-Problemen (z.B. es gibt keine geeigneten Pausen im Inhalt, in die die Audiobeschreibungen eingefügt werden können) nicht bereitgestellt werden können (siehe 1.2.5), sollte eine alternative Version des Videos bereitgestellt werden, die eingefügte Pausen (und Audiobeschreibungen) enthält.
1.2.8 Bereitstellung einer Alternative für voraufgezeichnete Medien (AAA) Für alle Inhalte, die Video enthalten, sollte ein beschreibendes Texttranskript bereitgestellt werden, beispielsweise ein Drehbuch des Films, den Sie sich ansehen. Dies ist zum Vorteil von hörgeschädigten Zuschauern, die den Inhalt nicht hören können. Siehe Audio-Transkripte für Transkriptinformationen.
1.2.9 Bereitstellung eines Transkripts für Live-Audio (AAA) Für alle Live-Audio-Inhalte, die übertragen werden, sollte ein beschreibender Text bereitgestellt werden, beispielsweise ein Skript des Stücks oder Musicals, das Sie hören. Dies ist zum Vorteil von hörgeschädigten Zuschauern, die den Inhalt nicht hören können. Siehe Audio-Transkripte 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, Inhalte in mehreren Formen zu konsumieren, um den unterschiedlichen Bedürfnissen der Benutzer gerecht zu werden.

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

Jede Inhaltsstruktur oder visuelle Beziehung zwischen Inhalten kann auch programmgesteuert ermittelt oder aus einer Textbeschreibung abgeleitet werden. Die Hauptsituationen, in denen dies relevant ist:

  • Textetiketten und die Formularelemente, die sie beschreiben. Diese werden eindeutig mit dem <label>-Element assoziiert, welches von Bildschirmlesern usw. erfasst werden kann.
  • Bild-alt-Text. Inhaltsbilder sollten verfügbaren Text haben, der den Inhalt des Bildes klar beschreibt, der programmgesteuert mit ihm in Verbindung gebracht werden kann (z.B. alt-Text), oder auf andere Weise leicht assoziiert werden kann (z.B. beschreibt es und steht direkt daneben). Dies sollte bedeuten, dass die volle Bedeutung immer noch geschlossen werden kann, auch wenn Sie das Bild nicht sehen können.
  • Listen. Wenn die Reihenfolge der Listenelemente wichtig ist, verwenden Sie eine geordnete Liste (<ol>).
Das Ganze von

HTML: Eine gute Grundlage für Barrierefreiheit ist vollgepackt mit Informationen darüber, aber Sie sollten besonders auf Gute Semantik, Verwenden Sie semantic UI-Steuerelemente, wo möglich, und Textalternativen, verweisen.

1.3.2 Sinnvolle Inhaltssequenz (A) Eine sinnvolle, logische Lesereihenfolge sollte einfach für jeden Inhalt zu bestimmen sein, auch wenn er visuell auf ungewöhnliche Weise präsentiert wird. Die Reihenfolge sollte durch die Verwendung korrekter semantischer Elemente deutlich gemacht werden (z.B. Überschriften, Absätze), wobei CSS verwendet wird, um ungewöhnliche Layoutstile zu erstellen, unabhängig vom Markup. Verweisen Sie wieder auf HTML: Eine gute Grundlage für Barrierefreiheit.
1.3.3 Sensory-Charakteristika (A)

Anweisungen zum Bedienen von Steuerelementen oder zum Verstehen von Inhalten basieren nicht nur auf einem einzigen Sinn. Dies kann sich als unzugänglich für Menschen mit einer Behinderung in Bezug auf diesen Sinn oder einem Gerät, das diesen Sinn nicht unterstützt, erweisen. Daher zum Beispiel:

  • "Klicken Sie auf die runde Schaltfläche, um fortzufahren"
    Die Schaltfläche sollte klar beschriftet sein, damit erkennbar ist, dass dies die Schaltfläche ist, auf die Sie drücken müssen. Wenn es mehrere Schaltflächen gibt, stellen Sie sicher, dass alle klar gekennzeichnet sind, um ihre Funktion zu unterscheiden.
  • "Hören Sie die Audioanweisungen zur Orientierung"
    Dies ist offensichtlich problematisch—Audio wird für Menschen mit Hörbeeinträchtigungen unzugänglich sein, während Text gelesen werden kann, aber auch bei Bedarf von einem Bildschirmleser gesprochen werden kann.
  • "Wischen Sie von der rechten Seite des Bildschirms, um das Menü zu öffnen"
    Einige Benutzer können möglicherweise den Bildschirm aus einer Behinderung oder weil ihr Gerät keine Berührungen unterstützt, nicht wischen. Eine Alternative sollte bereitgestellt werden, wie eine Tastenkombination oder Schaltfläche, die mit der Tastatur oder auf andere Weise aktiviert werden kann.

Hinweis: Die Übermittlung von Anweisungen ausschließlich durch Farbe ist verwandt, wird jedoch in einer anderen Richtlinie behandelt - 1.4.1.

1.3.4 Orientierung (AA) Inhalte schränken ihre Ansicht und Bedienung nicht auf eine einzige Anzeigeposition ein, wie Hoch- oder Querformat, es sei denn, eine bestimmte Anzeigeposition ist unerlässlich.

Verständnis der Orientierung

1.3.5 Eingabezweck identifizieren (AA)

Befolgen Sie die Liste von 53 Eingabefeldern um den Zweck eines Feldes programmgesteuert zu identifizieren.

Verständnis des Eingabezwecks
1.3.6 Zweck identifizieren (AAA) In Inhalten, die mit Markup-Sprachen implementiert sind, kann der Zweck von Benutzeroberflächenkomponenten, Symbolen und Regionen programmgesteuert bestimmt werden. Verständnis des Zwecks

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

Richtlinie 1.4: Es den Benutzern erleichtern, Inhalte zu sehen und zu hören, einschließlich Trennung von Vordergrund 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 und 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 Farben (A)

Auf Farbe sollte nicht ausschließlich zur Vermittlung von Informationen vertraut werden. Zum Beispiel, in Formularen sollten erforderliche Felder niemals nur mit einer Farbe (wie Rot) markiert werden. Stattdessen (oder zusätzlich) wäre etwas wie ein Sternchen mit einer Beschriftung "erforderlich" angemessener.

Siehe Verwendung von Farbe, Farbe und Farbkontrast, und Mehrere Etiketten.
1.4.2 Audiosteuerungen (A) Für jedes Audio, das länger als drei Sekunden läuft, stellen Sie zugängliche Steuerungen bereit, um Audio/Video abzuspielen und zu pausieren sowie die Lautstärke stummzuschalten/anzupassen. Verwenden Sie native <button>s, um zugängliche Tastatursteuerungen bereitzustellen, wie in Grundlagen der Video-Player-Styling.
1.4.3 Mindestkontrast (AA)

Der Farbkontrast zwischen Hintergrund und Vordergrundinhalten sollte ein Mindestniveau haben, um die Lesbarkeit zu gewährleisten:

  • Text und sein Hintergrund sollten ein Kontrastverhältnis von mindestens 4.5:1 haben.
  • Überschriften- (oder einfach größerer) Text sollte ein Verhältnis von mindestens 3:1 haben. Größerer Text ist definiert als mindestens 18pt oder 14pt fett.
Siehe Farbkontrast und Farbe und Farbkontrast.
1.4.4 Textgröße anpassen (AA) Die Seite sollte lesbar und nutzbar sein, wenn die Textgröße verdoppelt wird. Das bedeutet, dass Designs responsiv sein sollten, sodass beim Vergrößern der Textgröße der Inhalt weiterhin zugänglich ist.
1.4.5 Bilder von Text (AA) Bilder sollten NICHT verwendet werden, um Inhalte darzustellen, wo Text die Aufgabe erfüllen könnte. Beispielsweise könnte ein Bild, das hauptsächlich aus Text besteht, auch mit Text anstatt nur 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.
  • Überschriften- (oder einfach größerer) Text sollte ein Verhältnis von mindestens 4.5:1 haben. Größerer Text ist definiert als mindestens 18pt oder 14pt fett.
Siehe Farbe und Farbkontrast.
1.4.7 Geringer oder kein Hintergrundaudio (AAA) Vorgefertigte Audioaufnahmen, die hauptsächlich Sprache enthalten, sollten minimales Hintergrundrauschen haben, damit der Inhalt leicht verstanden werden kann.
1.4.8 Visuelle Darstellung (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 als 80 Zeichen (oder Glyphen) sein, für maximale Lesbarkeit.
  • Text sollte nicht vollständig gerechtfertigt werden (z.B. text-align: justify;).
  • Die Zeilenhöhe sollte mindestens 1,5-mal so groß sein wie die Textgröße innerhalb von Absätzen (z.B. line-height: 1.5;), und mindestens 2,25-mal so groß sein zwischen Absätzen (z.B. padding: 2.25rem;).
  • Wenn die Textgröße verdoppelt wird, sollte der Inhalt nicht gescrollt werden müssen.
1.4.9 Bilder von Text (Ohne Ausnahme) (AAA) Text sollte nicht als Teil eines Bildes präsentiert werden, es sei denn, es ist rein dekorativ (d.h. es vermittelt keinen Inhalt) oder kann nicht auf andere Weise präsentiert werden.
1.4.10 Umbruch (AA)
  • Kein horizontales Scrollen für Sprachen von links nach rechts (wie Englisch) oder von rechts nach links (wie Arabisch)
  • Kein vertikales Scrollen für Sprachen von oben nach unten (wie Japanisch)
  • Ausgenommen sind Teile der Inhalte, die ein zweidimensionales Layout erfordern für die Nutzung oder Bedeutung (wie eine große Datentabelle)
Verständnis des Umbruchs
1.4.11 Nicht-Text-Kontrast (AA) Mindestens ein Farbkontrastverhältnis von 3:1 für Benutzeroberflächenkomponenten und grafische Objekte. Verständnis des Nicht-Text-Kontrasts
1.4.12 Textabstände (AA)

Kein Verlust an Inhalt oder Funktionalität tritt auf, wenn die folgenden Stile angewendet werden:

  • Zeilenhöhe (Zeilenabstand) von mindestens 1,5-mal der Schriftgröße
  • Abstand nach Absätzen von mindestens 2-mal der Schriftgröße
  • Zeichenabstand (Tracking) von mindestens 0,12-mal der Schriftgröße
  • Wortabstand von mindestens 0,16-mal der Schriftgröße
 Verständnis der Textabstände
1.4.13 Inhalt bei Hover oder Fokus (AA)

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

  • Manipulierbar (kann geschlossen/entfernt werden)
  • schwebbar (der zusätzliche Inhalt verschwindet nicht, wenn der Zeiger darüber ist)
  • dauerhaft (der zusätzliche Inhalt verschwindet nicht ohne Benutzeraktion)
Verständnis des Inhalts bei Hover oder Fokus

Hinweis: Siehe auch die WCAG-Beschreibung für Richtlinie 1.4: Unterscheidbar: Es den Benutzern erleichtern, Inhalte zu sehen und zu hören, einschließlich der Trennung von Vordergrund und Hintergrund.

Siehe auch