1.1.1 Nicht-Text-Inhalt
Steuerelemente, Eingabe
Wenn es sich bei dem Nicht-Text-Inhalt um ein Steuerelement handelt oder Eingaben durch den Benutzer akzeptiert, dann hat dieser einen Namen, der seinen Zweck beschreibt. Warum? Weil blinde oder sehbehinderte Nutzer ohne dieses Label nicht wissen, was das Steuerelement tut – und somit nicht interagieren können. Ein Beispiel:
<!-- Schlecht: reines Icon, kein Name -->
<button>
<svg><!-- Lautsprecher-Icon --></svg>
</button>
<!-- Gut: sprechender Name per aria-label -->
<button aria-label="Ton ein- und ausschalten">
<svg><!-- Lautsprecher-Icon --></svg>
</button>Zeitbasierte Medien
Wenn es sich bei den Nicht-Text-Inhalten um zeitbasierte Medien handelt, dann stellen Textalternativen zumindest eine deskriptive Identifizierung des Nicht-Text-Inhalts bereit.
<!-- Schlecht: kein Hinweis, worum es sich handelt -->
<video controls>
<source src="demo.mp4" type="video/mp4">
Ihr Browser unterstützt das Video-Tag nicht.
</video>
<!-- Gut: sprechender Name per aria-label -->
<video controls aria-label="Kurzfilm: Sonnenuntergang am Ostseestrand, Dauer 2 Minuten">
<source src="sonnenuntergang.mp4" type="video/mp4">
Ihr Browser unterstützt das Video-Tag nicht.
</video>Test
Wenn es sich bei dem Nicht-Text-Inhalt um einen Test oder eine Übung handelt, die nichtig wäre, wenn sie als Text dargestellt würde, dann stellen Textalternativen zumindest eine deskriptive Identifizierung des Nicht-Text-Inhalts bereit. Zum Beispiel so:
<!-- Schlecht: keine Kennzeichnung, Nutzer*innen wissen nicht, was für eine Übung das ist -->
<section role="application">
<canvas id="math-exercise"></canvas>
</section>
<!-- Gut: sprechender Name per aria-label -->
<section role="application" aria-label="Matheübung: Verbinde die Punkte 1 bis 5, um ein Rechteck zu bilden">
<canvas id="math-exercise"></canvas>
</section>Sensorisch
Wenn Nicht-Text-Inhalt hauptsächlich dafür gedacht ist, eine bestimmte Sinneserfahrung zu schaffen, dann stellen Textalternativen zumindest eine deskriptive Identifizierung des Nicht-Text-Inhalts bereit. Ein Bild, eine Grafik oder ein anderes visuelles Element, das primär dazu da ist, eine bestimmte Stimmung oder Sinneswahrnehmung zu transportieren, muss eine Textalternative haben, die beschreibt, worum es geht. Sie muss nicht in jede Einzelheit gehen, aber den Sinn beschreiben: »Was soll ich fühlen, wenn ich das sehe?«. Zum Beispiel:
<!-- Schlecht: reine Dekoration ohne Alternative -->
<img src="lagerfeuer.jpg" />
<!-- Gut: deskriptive Kennzeichnung per alt-Attribut -->
<img src="lagerfeuer.jpg" alt="Flackerndes Lagerfeuer, das Wärme und Gemütlichkeit ausstrahlt" />CAPTCHA
Wenn der Zweck des Nicht-Text-Inhalts der ist zu bestätigen, dass eine Person und nicht ein Computer auf den Inhalt zugreift, dann werden Textalternativen bereitgestellt, die den Zweck des Nicht-Text-Inhalts identifizieren. Außerdem werden alternative Formen von CAPTCHAs bereitgestellt, die Ausgabeformen für verschiedene Arten der sensorischen Wahrnehmung nutzen, um verschiedenen Behinderungen Rechnung zu tragen.
In der Praxis braucht ein visuelles CAPTCHA beispielsweise einen sprechenden Namen bzw. Textalternative, damit Screenreader interpretieren können, worum es geht. Zusätzlich muss eine anders gelagerte Variante (zum Beispiel ein Audio-CAPTCHA) vorhanden sein, damit Menschen mit Seh- oder Hörbehinderungen wählen können.
Dekoration, Formatierung, unsichtbar
Wenn der Nicht-Text-Inhalt reine Dekoration ist, nur für visuelle Formatierung benutzt wird oder dem Benutzer gar nicht präsentiert wird, dann wird der Inhalt so implementiert, dass er von assistierender Technik ignoriert werden kann.
Dekorative oder unsichtbare Inhalte bekommen in der Praxis damit entweder ein leeres alt-Attribut (trotz Warnungen mancher Werkzeuge!) oder werden per aria-hidden="true" markiert. Damit springen Screenreader drüber und niemand wird mit bedeutungslosem Text überflutet.
Verwandte Erfolgskriterien
-
4.1.2Name, Rolle, WertZusätzliche Anforderungen an Steuerelemente und Inhalte, die Eingaben durch den Benutzer akzeptieren.
Empfehlungen
- Die künstliche Intelligenz analysiert Ihr Bild und generiert einen Vorschlag für einen alternativen Text von Bildern für mehr Barrierefreiheit.
- Alternative Texte beschreiben den Inhalt von Bildern und ermöglichen den Zugang von Informationen, die sonst nur visuell vorhanden sind.
- CAPTCHA ist ein Test zur Unterscheidung von Menschen und Bots. Traditionelle Varianten erschweren oft den Zugang für Menschen mit Behinderungen.