Bedeutungstragendes SVG-Symbol ohne Namen

WCAG 1.1.1 (A) · EN 301 549 9.1.1.1

Es gibt ein SVG, das als Grafik ausgezeichnet ist (role="img") oder auf andere Weise einen Namen haben sollte, aber keinen zugänglichen Namen hat.

Warum das zählt

Ein SVG, das eine Information transportiert und keinen Namen hat, ist für einen Screenreader unsichtbar. Rein dekorative Symbole sind nicht das Problem; das Problem ist das Symbol, das etwas bedeutet — das Schloss für sichere Zahlung, das Siegel für nachhaltige Herstellung.

So wird es behoben

Trägt das Symbol eine Information, ergänzen Sie ein <title> im SVG oder ein aria-label. Ist es dekorativ, kennzeichnen Sie es mit aria-hidden="true" und stellen Sie sicher, dass der sichtbare Text bereits alles Nötige sagt.

<svg role="img" viewBox="0 0 24 24"><path d="…"/></svg>

<svg role="img" aria-label="Sichere Zahlung" viewBox="0 0 24 24"><path d="…"/></svg>

<!-- Dekorativ, neben Text, der es ohnehin erklärt -->
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="…"/></svg> Versandkostenfrei

Verwandte Themen

• Bilder ohne Alternativtext
• Alternativtext ohne Informationsgehalt
• Grafische Schaltfläche ohne Alternativtext
• Bereich einer Bildkarte ohne Namen