Deutsch
Website-Menü

img-alt-quality

Alternativtext von <img> muss angemessen sein (manuelle Prüfung)

manualWCAG 1.1.1 (A)Konfidenz: mediumSchweregrad: minorperceivable

Markiert <img>-Elemente mit nicht leerem Alternativtext zur manuellen Prüfung, ob er angemessen ist, und gibt an, wenn der Alternativtext wie ein Dateiname, eine Webadresse oder ein Platzhalter aussieht, mit „image of“ beginnt oder sehr lang ist.

Anwendbarkeit. Gilt für <img>-Elemente, deren alt-Attribut vorhanden und nicht leer ist. Das Element muss im Accessibility Tree enthalten sein, und ein role-Attribut, das zu presentation/none aufgelöst wird (sein erstes Token, das eine bekannte Rolle nennt, ohne Berücksichtigung der Groß-/Kleinschreibung abgeglichen), nimmt es aus dem Geltungsbereich, sofern es nicht fokussierbar ist, was seine Rolle wiederherstellt. Ein <img> ganz ohne alt ist ein Fehler von img-alt-present, eines mit alt="" wird von img-alt-decorative geprüft.

Erwartung. Eine manuelle Prüfung ist nötig, um zu bestätigen, dass die angegebene Textalternative zutreffend und angemessen ist. Alternativtext, der nach etwas anderem als einer Beschreibung aussieht, erhält eine eigene Zusammenfassung und einen eigenen Hinweis: ein Dateiname (oder ein alt, das dem eigenen Dateinamen des Bildes entspricht), eine Webadresse, ausschließlich Symbole (etwa „★★★★☆“), ein Platzhalter oder ein generisches Wort wie „image“ oder „TBD“, ein Anfang, der sagt, dass es sich um ein Bild handelt („image of“, „photo of“), oder ein alt mit mehr als 150 Zeichen. Jeder Befund bleibt cantTell: Jeder dieser Fälle kann im Kontext richtig sein.

Was ein Befund meldet.

  • altSignal: was den Alternativtext verdächtig erscheinen ließ, nur bei diesen Befunden: file-name, url, symbols, placeholder, redundant-prefix oder too-long. Fehlt bei einem Befund mit unauffälligem Alternativtext. Treffen mehrere zu, wird der erste in dieser Reihenfolge gemeldet.
  • length: die Länge des Alternativtexts in Zeichen, nur bei too-long.
  • limit: die Länge, oberhalb derer ein alt als zu lang gilt (150), nur bei too-long.
  • reasonCode: IMAGE_ONLY_CONTROL_CONTENT, wenn das Bild der einzige Inhalt eines Links oder Buttons ist (kein Text und kein anderes Bild darin), sein alt also der Name des Steuerelements ist (H30), wobei controlContent die Rolle des Steuerelements nennt (link oder button); sonst TEXT_ALTERNATIVE_REVIEW.

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

can't tell
<img src="chart.png" alt="image">

Ein nicht leeres alt ist vorhanden, aber „image“ wiederholt nur den Elementtyp, statt zu beschreiben, was das Diagramm zeigt. Der Befund gibt an, dass das alt ein Platzhalter oder ein generisches Wort ist (data.details.altSignal: "placeholder"), so wie er es auch bei einem Dateinamen, einer Webadresse, einem Anfang wie „image of“ oder einem alt mit mehr als 150 Zeichen tut.

can't tell
<img src="team.jpg" alt="Our support team at the 2025 meetup">

Gewöhnlicher Alternativtext erhält die allgemeine Prüfung: Nur eine Person kann beurteilen, ob er das Bild im Kontext gut beschreibt.

n/a
<img src="border.png" alt="">

Ein leeres alt kennzeichnet das Bild als dekorativ; das ist eine Frage für img-alt-decorative, nicht für diese Regel.

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_ONLY_CONTROL_CONTENT

  1. Suchen Sie den im Bericht genannten Link oder die Schaltfläche; das Bild ist ihr einziger Inhalt, daher ist sein alt der Name des Bedienelements.
  2. Lesen Sie den Alternativtext und aktivieren Sie dann das Bedienelement oder prüfen Sie sein Ziel, um zu erfahren, was es tut.
  3. Entscheiden Sie, ob das alt sagt, was das Bedienelement tut („Suche“, „Startseite“), und nicht, wie das Bild aussieht.

Bestanden. Der Alternativtext nennt den Zweck oder das Ziel des Bedienelements.

Nicht bestanden. Der Alternativtext sagt nicht, was das Bedienelement tut, etwa ein Dateiname, eine Adresse, ein allgemeines Wort oder Symbole; das verstößt gegen WCAG 1.1.1 (H30, F30).

TEXT_ALTERNATIVE_REVIEW

  1. Suchen Sie das im Bericht genannte Bild und lesen Sie seinen Alternativtext (der Bericht nennt den Grund, warum er verdächtig wirkte, falls es einen gibt).
  2. Betrachten Sie das Bild und seinen Kontext und fragen Sie sich, was es zeigt, das für die Seite wichtig ist.
  3. Nennt die Textalternative das Bild nur, wie bei Diagrammen und Schaubildern üblich, können die Details anderswo stehen: in einer Bildunterschrift, einem Text oder einer Tabelle daneben oder hinter einem Link daneben. Das zählt nur, wenn Screenreader-Nutzer sie von dem Bild aus finden und sie alles wiedergeben, was dem Bild zeigt.
  4. Entscheiden Sie, ob der alt-Text das Wichtige sagt oder das Bild benennt, während diese Beschreibung den Rest liefert; ein Dateiname, eine Webadresse oder ein allgemeines Wort wie „Bild“ tut keines von beidem.

Bestanden. Der alt-Text vermittelt, was das Bild zeigt und der Nutzer braucht, oder er benennt das Bild und eine Beschreibung, die Screenreader-Nutzer von ihm aus erreichen, liefert den Rest.

Nicht bestanden. Weder der alt-Text noch eine vom Bild aus erreichbare Beschreibung vermittelt seinen Inhalt (etwa ist der alt-Text ein Dateiname, eine Adresse oder ein allgemeines Wort); das verstößt gegen WCAG 1.1.1 (F30).

Verwandte Regeln

Quellcode ansehen