input-image-alt-quality

Die Textalternative von <input type="image"> muss angemessen sein (manuelle Prüfung)

manualWCAG 1.1.1 (A)Konfidenz: mediumSchweregrad: minorperceivable

Meldet <input type="image">-Elemente mit einer nicht leeren Textalternative (alt, aria-label, aria-labelledby oder title) zur manuellen Prüfung, ob sie angemessen ist. Gibt an, wenn der Name wie ein Dateiname, eine Webadresse oder ein Platzhalter aussieht, mit „image of“ beginnt oder sehr lang ist.

Anwendbarkeit. Gilt für <input type="image">-Elemente, die aus irgendeiner Quelle eine nicht leere Textalternative erhalten: aria-labelledby (zu Text aufgelöst), aria-label, alt oder title. Ein Element, dessen alt vorhanden, aber leer ist, bleibt input-image-alt-decorative überlassen, das diesen Fall nachfragt. Das Element muss im Accessibility Tree enthalten sein, und role="presentation"/"none" nimmt es heraus, sofern es nicht fokussierbar ist, was seine Rolle wiederherstellt.

Erwartung. Eine manuelle Prüfung ist nötig, um zu bestätigen, dass die angegebene Textalternative zutreffend und angemessen ist. Jedes Vorkommen listet alle vorhandenen Quellen auf (data.details.sources), damit die prüfende Person jede einzelne kontrolliert. Der Name wird außerdem auf das geprüft, was die Regel img-alt-quality bei einem alt prüft (helpers.getTextAlternativeSignal): einen Dateinamen, eine Webadresse, ausschließlich Symbole, einen Platzhalter oder ein generisches Wort, einen Anfang, der sagt, dass es sich um ein Bild handelt, oder mehr als 150 Zeichen. Ein solcher Name erhält eine eigene Zusammenfassung und einen eigenen Hinweis; der Befund bleibt cantTell.

Was ein Befund meldet.

  • reasonCode: TEXT_ALTERNATIVE_REVIEW, unabhängig vom Signal.
  • name: die Textalternative des Bedienelements, wie sie angesagt wird, aus der ersten Quelle, die eine liefert.
  • sources: jede Quelle, die eine nicht leere Textalternative liefert, in der Reihenfolge, in der sie für den Namen herangezogen werden. Ein Eintrag ist aria-labelledby, aria-label, alt oder title.
  • altSignal sowie bei too-long length und limit: was den Namen nach etwas anderem als einer Beschreibung aussehen ließ, wie bei img-alt-quality. Fehlt, wenn der Name unauffällig ist.
  • alt (ein Bedienelement mit nicht leerem alt): der alt-Text.

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
<input type="image" src="submit.png" alt="Submit order">

Dieser Bild-Button hat ein nicht leeres alt; es lohnt sich zu bestätigen, dass „Submit order“ dem entspricht, was der Button tatsächlich tut. Ein Bild-Button, der nur über aria-label, aria-labelledby oder title benannt ist, wird ebenfalls nachgefragt.

n/a
<input type="image" src="submit.png" alt="" title="Submit order">

Ein leeres alt bei einem funktionalen Steuerelement ist eine Frage für input-image-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.

TEXT_ALTERNATIVE_REVIEW

  1. Suchen Sie die im Bericht genannte Bildschaltfläche und lesen Sie den Namen, den sie ergibt; prüfen Sie jede aufgeführte Quelle (alt, aria-label, aria-labelledby, title).
  2. Drücken Sie die Schaltfläche oder lesen Sie das Formular, um zu erfahren, was sie tut.
  3. Entscheiden Sie, ob der angesagte Name sagt, was die Schaltfläche tut, und ob die anderen Quellen ihm nicht widersprechen.

Bestanden. Der Name nennt die Aktion der Schaltfläche, etwa „Bestellung absenden“ oder „Suchen“.

Nicht bestanden. Der Name sagt nicht, was die Schaltfläche tut, etwa ein Dateiname, eine Adresse, ein allgemeines Wort oder Symbole; das verstößt gegen WCAG 1.1.1 (H36, F30).

Verwandte Regeln

Quellcode ansehen