Deutsch
Website-Menü

area-alt-quality

Die Textalternative von <area> muss angemessen sein (manuelle Prüfung)

manualWCAG 1.1.1 (A)Konfidenz: mediumSchweregrad: minorperceivable

Meldet <area>-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 <area>-Elemente, die aus irgendeiner Quelle eine nicht leere Textalternative erhalten: aria-labelledby (zu Text aufgelöst), aria-label, alt oder title. Das <area> muss ein nicht leeres href tragen (sonst ist es laut HTML-Spezifikation überhaupt kein Hyperlink) und zu einer <map> gehören, auf die ein <img usemap> tatsächlich verweist („#“ und die id oder der name der Map, mit Berücksichtigung der Groß-/Kleinschreibung, so wie HTML den Abgleich vornimmt); ein <area> in einer ungenutzten Map liegt außerhalb des Geltungsbereichs. Das verweisende <img> muss tatsächlich gerendert werden (hidden/display:none/visibility schließen es aus; aria-hidden nicht, da <area> kein DOM-Nachfahre von <img> ist), und das <area> selbst muss in Frage kommen: hidden, display:none und inert auf dem <area> oder seiner <map> schließen es nicht aus, da keines davon eine Box erzeugt und die Treffererkennung von Image-Maps in einem echten Browser alle drei dort ignoriert (in Chromium und Firefox geprüft); nur diese Mechanismen auf einem echten Vorfahren des gesamten <img>+<map>-Paars schließen es aus. role="presentation"/"none" nimmt ein Element heraus, sofern es nicht fokussierbar ist.

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: Ein title oder aria-label, das nicht der Name ist, erreicht trotzdem manche Nutzende. 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, die der Bereich letztlich erhält, aus der ersten Quelle in sources.
  • sources: jede Textquelle des Bereichs, in der Reihenfolge, in der sie für den Namen herangezogen werden: aria-labelledby, aria-label, alt, 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 Bereich mit alt-Attribut): 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
<img src="office-map.png" usemap="#floorplan">
<map name="floorplan">
  <area href="/rooms/12" shape="rect" coords="0,0,40,24" alt="Room 12">
</map>

Der Bereich hat eine nicht leere Textalternative in einer genutzten Image-Map; es lohnt sich zu bestätigen, dass „Room 12“ für diesen Bereich zutrifft. Ein aria-label, aria-labelledby oder title wird genauso nachgefragt, und jedes Vorkommen listet die gefundenen Quellen auf.

n/a
<map name="unused">
  <area href="/rooms/12" shape="rect" coords="0,0,40,24" alt="Room 12">
</map>

Kein <img usemap> verweist auf diese Map, daher wird das <area> weder per Hit-Testing erfasst noch gerendert – außerhalb des Geltungsbereichs.

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 den im Bericht genannten Bereich der Imagemap und betrachten Sie den Teil des Bildes, den er abdeckt.
  2. Klicken Sie darauf oder folgen Sie seinem Link und notieren Sie, wohin er führt.
  3. Lesen Sie die Textalternative des Bereichs (und jede andere Quelle, die der Bericht aufführt) und prüfen Sie, ob sie sagt, wohin der Link führt oder was der Bereich ist.

Bestanden. Die Textalternative sagt Nutzenden, wohin der Link führt, in Worten, die zum Bereich passen.

Nicht bestanden. Die Textalternative ist falsch, allgemein, ein Dateiname oder sagt nicht, wohin der Link führt; das verstößt gegen WCAG 1.1.1 (H24).

Verwandte Regeln

Quellcode ansehen