image-redundant-alt
Alternativtext eines Bildes darf benachbarten sichtbaren Text nicht wiederholen
Prüft, dass der alt-Text eines <img> nicht mit anderem sichtbarem Text identisch ist, der bereits in seinem unmittelbaren Elternelement vorhanden ist.
Anwendbarkeit. Gilt für <img>-Elemente mit nicht leerem alt-Text, deren unmittelbares Elternelement zusätzlich anderen sichtbaren Textinhalt hat (also Textknoten neben dem Bild selbst, typischerweise ein <a> oder <button>, das sowohl ein Icon-Bild als auch eine Textbeschriftung umschließt). Findet sie nichts nachzufragen, meldet sie notApplicable, nicht pass: Sie gilt nur für das, was ihre Prüfung markiert, und dort nichts zu finden zeigt nicht, dass alles in Ordnung ist.
Erwartung. Der alt-Text des Bildes ist nicht derselbe (ohne Berücksichtigung der Groß-/Kleinschreibung, normalisiert) wie der andere sichtbare Text im selben Elternelement. Sind beide vorhanden, sagen assistive Technologien für ein einziges Steuerelement dieselben Worte zweimal an (z. B. ein Link aus Icon und Text, bei dem das alt des Icons den Linktext wiederholt).
Was ein Befund meldet.
alt: der Alt-Text des Bilds, mit zusammengefassten Leerräumen. Er stimmt mit dem Text daneben überein.
Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.
Beispiele
<a href="/"><img alt="Home" src="home.png">Home</a>
Der alt-Text des Bildes („Home“) wiederholt den benachbarten sichtbaren Linktext Wort für Wort – ein Screenreader sagt ihn zweimal an.
<a href="/"><img alt="Home icon" src="home.png">Home</a>
Der alt-Text („Home icon“) unterscheidet sich vom benachbarten Text („Home“).
So prüfen Sie es
Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.
IMAGE_ALT_REDUNDANT
- Suchen Sie das im Bericht genannte Bild und den Text daneben im selben Link, in derselben Schaltfläche oder im selben Elternelement.
- Navigieren Sie mit einem Screenreader zu diesem Link oder dieser Schaltfläche oder lesen Sie den berechneten Namen im Bereich „Barrierefreiheit“ und achten Sie darauf, ob die Wörter zweimal gesagt werden.
- Ist das Bild bereits vor assistiven Technologien verborgen, beachten Sie, dass sich nichts wiederholt.
Bestanden. Die Wörter werden einmal gelesen: Das Bild ist verborgen oder hat alt="", oder sein alt fügt etwas hinzu, was der Text nicht sagt.
Nicht bestanden. Das alt des Bildes wiederholt den Text daneben, sodass dieselben Wörter zweimal gelesen werden; ein Verstoß gegen die Best Practice (H2).