- Stufe
- A
- Seit
- WCAG 2.0
- Einträge
- 63 / 193
1.1.1 Nicht-Text-Inhalt
Alles, was kein Text ist (ein Bild, ein Icon, ein Diagramm), braucht eine Textalternative mit derselben Information.
/ Was es verlangt
Jedes Bild, jedes Icon, jedes Diagramm, jede Tonaufnahme und jeder andere Inhalt, der kein Text ist, braucht eine Textalternative, die denselben Zweck erfüllt. Ein Screenreader kann keine Pixel beschreiben: Er liest das alt-Attribut, den zugänglichen Namen oder gar nichts. Fehlt die Alternative, hört eine blinde Person einen Dateinamen oder das Wort „Grafik“, wer per Sprache steuert, kann die Schaltfläche nicht ansprechen, und wer Bilder wegen einer langsamen Verbindung abgeschaltet hat, sieht ein leeres Feld.
Die Grenze zieht der Zweck, nicht das Aussehen. Ein Foto, das Information trägt, braucht eine Beschreibung dieser Information; ein verlinktes Logo braucht das Linkziel; ein rein dekoratives Element braucht ein leeres alt-Attribut, damit assistive Technologie es überspringt. Das Kriterium nennt seine Ausnahmen selbst: Bedienelemente und Eingabefelder brauchen einen Namen, Audio und Video mindestens eine beschreibende Kennzeichnung, Tests und Sinneserfahrungen eine kurze Benennung, und ein CAPTCHA braucht eine Textbezeichnung sowie eine alternative Form für einen anderen Sinn.
/ Woran Seiten scheitern
- Ein img-Element hat gar kein alt-Attribut, sodass der Screenreader auf den Dateinamen zurückfällt.
- Der Alternativtext ist ein Dateiname oder ein Platzhalter wie image, photo oder IMG_2043.jpg.
- Ein verlinktes Bild oder eine Icon-Schaltfläche hat ein leeres alt, wodurch der Link oder die Schaltfläche ohne Namen bleibt.
- Ein Diagramm oder eine Infografik ist als „Diagramm“ beschrieben, und keine der gezeigten Zahlen steht als Text zur Verfügung.
- Dekorative Bilder tragen lange Beschreibungen, sodass die Seite mit Störgeräuschen zwischen den Absätzen vorgelesen wird.
/ So prüfen Sie es selbst
- Klicken Sie mit der rechten Maustaste auf ein Bild, wählen Sie Untersuchen und suchen Sie das alt-Attribut. Lesen Sie es so, als könnten Sie das Bild nicht sehen.
- Fragen Sie bei jedem Bild: Würde jemandem etwas fehlen, wenn dieser Text an seiner Stelle stünde. Für Dekoration lautet die richtige Antwort alt="".
- Starten Sie einen kostenlosen Screenreader (NVDA unter Windows, VoiceOver unter macOS) und gehen Sie mit der Tabulatortaste alle verlinkten Bilder und Icon-Schaltflächen durch. Jedes Element sollte ansagen, wohin es führt oder was es tut.
- Prüfen Sie, ob Diagramme, Karten und Infografiken dieselben Daten als Text haben, neben der Grafik oder über einen Link.
- Durchsuchen Sie das Stylesheet nach background-image an Elementen, die Bedeutung tragen. Ein CSS-Bild hat kein alt, die Information muss also auch im Markup stehen.
/ So beheben Sie es
- Geben Sie jedem img-Element ein alt-Attribut. Beschreiben Sie, was das Bild an dieser Stelle beiträgt, nicht wie es allgemein aussieht.
- Für Dekoration verwenden Sie alt="" (leer, ohne Leerzeichen) oder verschieben das Bild als background-image ins CSS.
- Ist ein Bild der einzige Inhalt eines Links oder einer Schaltfläche, schreiben Sie das Ziel oder die Aktion ins alt, zum Beispiel Startseite oder Suchen.
- Inline-SVG erhält role="img" und ein aria-label. Bei einer Icon-Schrift setzen Sie aria-label auf die Schaltfläche und aria-hidden="true" auf das Zeichen.
- Geben Sie einer komplexen Grafik ein kurzes alt mit ihrer Bezeichnung und stellen Sie die vollständigen Daten in eine Tabelle oder einen Absatz daneben.
/ Was unser Scanner prüft
Unser statischer Durchlauf zählt img-Elemente ohne alt-Attribut, sofern sie nicht role presentation oder none tragen. Der Durchlauf auf der gerenderten Seite wiederholt das für sichtbare Bilder und meldet Alternativtexte, die ein Dateiname oder ein Platzhalterwort sind. HTML_CodeSniffer und axe-core ergänzen verlinkte Bilder ohne alt, ein leeres alt zusammen mit einem title sowie object-Elemente ohne Textalternative. Keines dieser Werkzeuge kann beurteilen, ob eine vorhandene Beschreibung zutrifft.
/ Wer es verletzt, nach unseren eigenen Messungen
| Stelle | Sektor | Vorkommen | Wert |
|---|---|---|---|
| Bundesrat | government · DE | 70 | 14 |
| Politechnika Śląska | education · PL | 33 | 2 |
| Gdańsk | city · PL | 26 | 2 |
| Indianapolis | city · US | 25 | 18 |
| Harris County | government · US | 20 | 19 |
| Uniwersytet Jagielloński | education · PL | 18 | 1 |
| Urząd Ochrony Danych Osobowych | government · PL | 16 | 6 |
| Prezydent RP | government · PL | 15 | 15 |
| Boston | city · US | 12 | 6 |
| Social Security Administration | government · US | 12 | - |
| Uniwersytet Warszawski | education · PL | 12 | 4 |
| Senat RP | government · PL | 11 | 24 |
| Berliner Verkehrsbetriebe | transport · DE | 10 | 21 |
| Narodowy Instytut Dziedzictwa | culture · PL | 7 | 6 |
| Bundesnetzagentur | government · DE | 6 | 9 |
| Poznań | city · PL | 6 | 1 |
| Deutsche Bahn | transport · DE | 5 | 5 |
| Poczta Polska | government · PL | 5 | 16 |
| Radom | city · PL | 5 | 2 |
| Teatr Wielki Opera Narodowa | culture · PL | 5 | 3 |
| Los Angeles County | government · US | 4 | 9 |
| National Weather Service | government · US | 4 | 34 |
| PKP Intercity | transport · PL | 4 | 2 |
| Politechnika Łódzka | education · PL | 4 | 5 |
| Rybnik | city · PL | 4 | 6 |
| Chicago Transit Authority | transport · US | 3 | 4 |
| Düsseldorf | city · DE | 3 | 9 |
| Philadelphia | city · US | 3 | 8 |
| Politechnika Warszawska | education · PL | 3 | 12 |
| University of Florida | education · US | 3 | 23 |
| Łódź | city · PL | 3 | 3 |
| Austin | city · US | 2 | 20 |
| Elbląg | city · PL | 2 | 20 |
| Gdynia | city · PL | 2 | 7 |
| Humboldt-Universität zu Berlin | education · DE | 2 | 35 |
| Narodowy Fundusz Zdrowia | health · PL | 2 | 18 |
| Państwowa Komisja Wyborcza | government · PL | 2 | 15 |
| Phoenix | city · US | 2 | 1 |
| Sejm RP | government · PL | 2 | 9 |
| State of Washington | government · US | 2 | 9 |
| Stiftung Preußischer Kulturbesitz | culture · DE | 2 | 21 |
| Amtrak | transport · US | 1 | 4 |
| Białystok | city · PL | 1 | 37 |
| Bundesministerium der Justiz | government · DE | 1 | 7 |
| Centers for Disease Control | health · US | 1 | 8 |
| Cook County | government · US | 1 | 13 |
| Dallas | city · US | 1 | 23 |
| Department of Justice | government · US | 1 | 39 |
| Houston | city · US | 1 | 7 |
| Instytut Pamięci Narodowej | government · PL | 1 | 43 |
| Kraków | city · PL | 1 | 12 |
| Ministerstwo Sprawiedliwości | government · PL | 1 | 25 |
| München | city · DE | 1 | 22 |
| New Orleans | city · US | 1 | 7 |
| Rzeszów | city · PL | 1 | 8 |
| State of Florida | government · US | 1 | 8 |
| State of Illinois | government · US | 1 | 89 |
| Szkoła Główna Handlowa | education · PL | 1 | 12 |
| Uniwersytet Ekonomiczny w Krakowie | education · PL | 1 | 15 |
| Uniwersytet Mikołaja Kopernika | education · PL | 1 | 6 |
| Uniwersytet Wrocławski | education · PL | 1 | 15 |
| Wrocław | city · PL | 1 | 2 |
| Zielona Góra | city · PL | 1 | 7 |
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Braucht jedes Bild einen Alternativtext?
Jedes img-Element braucht ein alt-Attribut, aber nicht jedes Bild braucht eine Beschreibung. Ein Bild, das Information beiträgt, erhält einen kurzen Text, der sagt, was es beiträgt. Ein rein dekoratives Bild erhält ein leeres Attribut, alt="", das den Screenreader anweist, es zu überspringen. Der Fehler ist das fehlende Attribut, denn dann wird unter Umständen der Dateiname vorgelesen.
Wie lang sollte ein Alternativtext sein?
WCAG nennt keine Zeichengrenze. Entscheidend ist, ob der Text an dieser Stelle denselben Zweck erfüllt wie das Bild, daher genügt meist ein kurzer Satz. Enthält ein Bild mehr, als ein Satz fassen kann, etwa ein Diagramm oder ein Schema, halten Sie das alt kurz und stellen Sie die vollständige Beschreibung oder die Daten in den Seitentext direkt daneben.
Was ist der Unterschied zwischen fehlendem und leerem alt-Attribut?
Ein fehlendes Attribut lässt assistive Technologie raten, und ein Screenreader liest möglicherweise den Dateinamen oder die Linkadresse vor. Ein leeres Attribut, alt="", ist die bewusste Aussage, dass das Bild Dekoration ist und ignoriert werden soll. Sehende bemerken beides nicht. Nur der erste Fall verstößt für sich genommen gegen 1.1.1; der zweite dann, wenn das Bild doch Information trug.