[role='img'] Elemente haben ein Alternativtext.

Warum es diese Prüfung gibt

Ein Screenreader kann nur Text vorlesen. Ein unbeschriftetes Bild ist Stille; ein unbeschrifteter Icon-Button ist das Wort „Schaltfläche“ und sonst nichts.

Was sie üblicherweise auslöst

• 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 es gemeldet wird

A11ySignal meldet das mit der Schwere schwerwiegend. Jedes fehlerhafte Element kommt mit seinem CSS-Selektor und dem Markup, das durchgefallen ist — Sie kommen also direkt zur Zeile, statt sie zu suchen. Deque veröffentlicht die Details auf Engine-Ebene:

https://dequeuniversity.com/rules/axe/4.13/role-img-alt ↗

Prüfung umgesetzt in axe-core 4.13.0, © Deque Systems, MPL-2.0.

Weitere Prüfungen für 1.1.1