1.1.1 Nicht-Text-Inhalt

Was bedeutet das?

Alles, was man sehen, aber nicht als Text lesen kann, braucht eine Beschreibung in Textform: Fotos, Grafiken, Icons, Bild-Buttons, Diagramme. Ein Screenreader liest diesen Text vor, eine Braillezeile zeigt ihn an. Der Text soll sagen, was das Bild an dieser Stelle bedeutet, nicht, wie es aussieht. Ein Lupen-Icon im Suchfeld heißt also „Suchen“, nicht „Lupe“.

Rein dekorative Bilder, die nichts zur Information beitragen, bekommen ein leeres alt="" und werden so übersprungen. Für Bedienelemente muss der Text den Zweck nennen. Bei komplexen Grafiken wie Diagrammen genügt im alt-Attribut eine Kurzbeschreibung, wenn die Daten zusätzlich im Text oder in einer Tabelle stehen. Ausnahmen gelten unter anderem für Tests, sinnliche Erfahrungen (etwa ein Kunstwerk) und CAPTCHAs; auch dort ist aber mindestens eine Beschreibung nötig, was der Inhalt ist.

Wem hilft das?

• Menschen, die blind sind und einen Screenreader oder eine Braillezeile nutzen
• Menschen mit Sehbehinderung, die Bilder nur schwer erkennen
• Alle, bei denen Bilder nicht laden, etwa bei schlechter Mobilverbindung
• Menschen mit Lernschwierigkeiten, denen Text und Bild zusammen beim Verstehen helfen

Typische Fehler

• Produktfotos ohne alt-Attribut; der Screenreader liest dann den Dateinamen vor, etwa „IMG_4711.jpg“
• Icon-Buttons (Warenkorb, Menü, Schließen) ohne zugänglichen Namen
• Alternativtexte wie „Bild“, „Foto“ oder ein Stapel Suchbegriffe statt einer Beschreibung
• Dekorative Hintergrundbilder oder Trennlinien als <img> mit sprechendem alt-Text, die den Lesefluss stören
• Diagramme oder Infografiken, deren Aussage nirgends als Text steht

So prüfen wir das

• axe-core Automatisch: axe-core findet typische Verstöße. Ein Verstoß wird als „nicht erfüllt“ vorausgefüllt.
• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Hat jedes Bild einen Alternativtext, der sagt, was das Bild hier bedeutet? Dekorative Bilder brauchen alt="".

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<img src="team.jpg">
<button><svg viewBox="0 0 24 24">…</svg></button>

<img src="team.jpg" alt="Unser Team vor dem Laden in Leipzig">
<button aria-label="Warenkorb öffnen">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">…</svg>
</button>
<img src="welle.svg" alt="">

Inhaltliche Bilder und Icon-Buttons haben jetzt einen sinnvollen Namen, die Zierwelle wird von Screenreadern übersprungen.

Praxistipps

• Fragen Sie sich beim Schreiben: Was würde ich am Telefon sagen, wenn mein Gegenüber das Bild nicht sieht?
• Wiederholen Sie im alt-Text nicht, was direkt daneben schon als Bildunterschrift steht.
• Lassen Sie in Ihrem Shop-System das Feld für den Alternativtext nicht leer, wenn das Bild Information trägt.

Ratgeber und Muster dazu

• Der richtige Alternativtext in fünf FragenEin guter Alternativtext ersetzt, was das Bild auf dieser Seite leistet, nicht was darauf zu sehen ist. Mit fünf Fragen finden Sie für jedes Bild die passende Lösung.
• In 30 Minuten zum ersten Screenreader-TestEin Screenreader zeigt schonungslos, ob Ihre Seite sauber aufgebaut ist. Mit dieser Anleitung testen Sie Ihre wichtigsten Seiten selbst, mit kostenlosen Werkzeugen und ohne Vorkenntnisse.
• BFSG-Prüfung: So lassen Sie Ihre Website auf Barrierefreiheit prüfenDas BFSG verlangt barrierefreie Angebote, aber kein bestimmtes Prüfverfahren. Hier steht, welche Prüfung was leistet, wie ein Audit abläuft, was es bei uns kostet und was Sie danach in der Hand haben.
• BFSG für kleine Unternehmen: Wann die Ausnahme greift und wann nichtKleinstunternehmen mit Dienstleistungen sind vom BFSG ausgenommen. Doch die Ausnahme hat klare Grenzen, und wer wächst, verlässt sie schneller als gedacht.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 1.1.1 Non-text Content