Was die Norm sagt
Alle Nicht-Text-Inhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die einem äquivalenten Zweck dient, außer in den unten aufgeführten Situationen.
Warum das zählt
Ein Screenreader kann nur Text vorlesen. Ein unbeschriftetes Bild ist Stille; ein unbeschrifteter Icon-Button ist das Wort „Schaltfläche“ und sonst nichts.
Wie ein Fehlschlag aussieht
- fällt durchEin Produktfoto mit `alt=""`, obwohl das Foto das Einzige ist, was das Produkt benennt.
- fällt durchEin Icon-Button ohne `aria-label`, der deshalb als „Schaltfläche“ angesagt wird.
- fällt durchEin Diagramm als PNG mit `alt="Diagramm"` und nirgends eine Datentabelle.
- fällt durchRein dekorative Elemente mit beschreibendem Alternativtext, sodass der Lesende Rauschen hört.
So beheben Sie es
- tunSchreiben Sie den Alternativtext so, wie Sie die Seite jemandem am Telefon vorlesen würden.
- tunGeben Sie rein dekorativen Bildern `alt=""` — leer, nicht fehlend — damit assistive Technik sie überspringt.
- tunBei Icon-Buttons ein `aria-label`, das die Aktion benennt, nicht das Icon: „Entwurf löschen“, nicht „Papierkorb“.
- tunBei Diagrammen die zugrunde liegenden Zahlen irgendwo erreichbar machen — eine Tabelle, ein zusammenfassender Satz, ein Download.
Wie A11ySignal es prüft
Bei jedem Scan laufen 7 automatische Prüfungen gegen dieses Kriterium.
kritischimage-altAbbildungen müssen einen Alternativtext besitzen.
kritischinput-image-alt<input type="image">-Elemente müssen einen Alternativtext besitzen.
schwerwiegendaria-meter-nameARIA-meter Knoten müssen einen zugänglichen Namen (accessible name) besitzen.
schwerwiegendaria-progressbar-nameARIA-progressbar Knoten müssen einen zugänglichen Namen (accessible name) besitzen.
schwerwiegendobject-alt<object>-Elemente müssen einen Alternativtext besitzen.
schwerwiegendrole-img-alt[role='img'] Elemente haben ein Alternativtext.
schwerwiegendsvg-img-alt<svg> Elemente mit einer img Rolle sollten einen Alternativtext besitzen.
Was ein Werkzeug Ihnen nicht sagen kann
Ein Scanner sieht, dass Alternativtext existiert. Ob „image123.jpg“ das Bild beschreibt, kann er nicht wissen — die Formulierung liegt bei Ihnen.