svg-image-text-alternative-present

SVG-<image> muss eine Textalternative haben

automaticWCAG 1.1.1 (A)Konfidenz: mediumSchweregrad: seriousperceivable

Prüft, dass SVG-<image>-Elemente über ein <title>-Element oder einen zugänglichen ARIA-Namen eine Textalternative bereitstellen (ein <desc>-Element allein zählt nicht).

Anwendbarkeit. Gilt für SVG-<image>-Elemente, die assistiven Technologien bereitgestellt werden. Elemente, die ansonsten aus dem Accessibility Tree ausgeblendet sind, bleiben betroffen, wenn sie per Tab erreichbar sind oder über IDREF-Beziehungen referenziert werden (gemäß den Eignungsprüfungen der Engine). SVG-<image>-Elemente, deren role-Attribut zu presentation oder none aufgelöst wird (das erste bekannte Rollen-Token, ohne Berücksichtigung der Groß-/Kleinschreibung), sind nur ausgeschlossen, wenn sie nicht fokussierbar sind.

Erwartung. Jedes betroffene SVG-<image>-Element hat eine Textalternative über:

  • ein nicht leeres direktes <title>-Kind, ODER
  • einen zugänglichen Namen (aria-label / aria-labelledby / title-Attribut).

Das erste <title>-Kind zählt, an beliebiger Stelle unter den Kindern, so wie SVG-AAM es liest. Ein <desc>-Kind zählt nicht: SVG-AAM bildet es auf die zugängliche Beschreibung ab, nie auf den Namen, so sieht es auch svg-text-alternative-present.

Beispiele

pass
<svg width="40" height="24">
<image href="logo.png"><title>Logo</title></image>
</svg>

Ein <title> innerhalb des SVG-<image> liefert die Alternative.

fail
<svg width="40" height="24" aria-label="container">
<image href="logo.png"></image>
</svg>

Das <image> selbst hat kein <title> und keinen ARIA-Namen (die Beschriftung des äußeren <svg> wird nicht darauf übertragen, und ein <desc> würde es beschreiben, nicht benennen).

Quellcode ansehen