Zum Inhalt springen
Pandus
de Sprache ändern
Menü

WCAG-A/AA-Anforderung Priorität: Mittel

Einige Vektorgrafiken haben keine Textbeschreibung

Einige SVG-Grafiken wie Logos, Icons oder Badges sind als Bild ausgezeichnet, haben aber keine Textalternative.

Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.

Warum das für Ihre Kunden wichtig ist

Screenreader-Nutzer hören zur Grafik nichts Hilfreiches. Sie verpassen so womöglich ein Badge, ein Zahlungslogo oder die Bedeutung eines Icons.

Wen es betrifft

  • blinde Kundinnen und Kunden
  • Screenreader-Nutzer

So beheben Sie es

Ergänzen Sie bei einem <svg> mit role="img" ein <title> als erstes Kindelement oder verwenden Sie aria-label bzw. aria-labelledby. Ist die Grafik dekorativ, entfernen Sie role="img" und ergänzen Sie aria-hidden="true".

Bei Shopify

Meist Icon-Snippets im Theme oder App-Widgets. Ergänzen Sie einen title oder aria-label in den SVG-Snippets des Themes; App-Icons melden Sie dem App-Entwickler.

Bei Shoptet (CZ)

Meist Icons oder Logos des Templates. Melden Sie es Shoptet oder einer Partneragentur.

Bei PrestaShop

Meist Theme-Icons oder Module. Ergänzen Sie Namen in den .tpl-Templates des Themes oder in den SVG-Dateien.

Bei WooCommerce

Meist Theme-Icons, hochgeladene Logos oder Icon-Plugins. Ergänzen Sie Namen in Child-Theme-Templates oder in den Plugin-Einstellungen.

Standards

Standards
StandardAbschnitt
WCAG 2.2 1.1.1 (A) Non-text Content
WCAG 2.1 1.1.1 (A) Non-text Content
WCAG 2.0 1.1.1 (A) Non-text Content
EN 301 549 4.1.1 9.1.1.1
EN 301 549 3.2.1 9.1.1.1
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.1.1.1

Automatische Prüfung: axe-core-Regel svg-img-alt. dequeuniversity.com, github.com, www.w3.org

Ähnliche Prüfungen

Alle Regeln, die wir prüfen