area-alt-present

<area> muss einen zugänglichen Namen haben

automaticWCAG 1.1.1 (A)Konfidenz: highSchweregrad: seriousperceivable

Prüft, dass <area>-Elemente über alt, aria-label/aria-labelledby oder title einen nicht leeren zugänglichen Namen haben.

Anwendbarkeit. Gilt für <area>-Elemente, die: 1) in einer <map> liegen, auf die ein <img usemap> verweist (so, wie HTML den Abgleich vornimmt: „#“ und die id oder der name der Map, mit Berücksichtigung der Groß-/Kleinschreibung), UND 2) ein nicht leeres href tragen (ein <area> ohne href ist laut HTML-Spezifikation überhaupt kein Hyperlink und hat nichts, was diese Regel benennen müsste), UND 3) deren verweisendes <img> tatsächlich gerendert wird (hidden/display:none/ visibility schließen es aus; aria-hidden nicht, da <area> kein DOM-Nachfahre von <img> ist), UND 4) das <area> selbst im Accessibility Tree berücksichtigt wird. hidden, display:none und inert auf dem <area> oder seiner <map> schließen es nicht aus: Keines der beiden Elemente erzeugt eine Box, daher ignoriert das Hit-Testing von Image-Maps in einem echten Browser alle drei an dieser Stelle (geprüft mit Chromium und Firefox); nur dieselben Mechanismen auf einem echten Vorfahren des gesamten <img>+<map>-Paars schließen es aus.

Erwartung. Jedes anwendbare <area>-Element hat einen nicht leeren zugänglichen Namen aus alt, aria-label/aria-labelledby oder title. Ein <area> in einer verwendeten Map ist immer ein Link, daher ist alt="" hier nicht dekorativ wie bei <img>: Ein leeres alt ist genauso ein Verstoß wie ein fehlendes, sofern kein anderer Mechanismus einen Namen liefert.

Beispiele

pass
<img src="image.png" alt="" usemap="#nav">
<map name="nav">
<area href="/x" shape="rect" coords="0,0,40,24" alt="Go to green">
</map>

Das <area> ist ein Link in einer verwendeten Map und hat ein nicht leeres alt.

fail
<img src="image.png" alt="" usemap="#nav">
<map name="nav">
<area href="/x" shape="rect" coords="0,0,40,24">
</map>

Das <area> ist ein Link (hat href) in einer verwendeten Map, hat aber kein alt.

Verwandte Regeln

Quellcode ansehen