Zum Inhalt springen
Pandus
de Sprache ändern
Menü

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

Einige Tooltips sind leer

Einige Elemente, die als Tooltip ausgezeichnet sind (role="tooltip"), enthalten keinen lesbaren Text.

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

Warum das für Ihre Kunden wichtig ist

Screenreader-Nutzer bekommen keinen Hinweis, wo andere Kunden einen sehen, etwa zu Größen, Versandkosten, Mehrwertsteuer oder Passwortregeln.

Wen es betrifft

  • blinde Kundinnen und Kunden
  • Screenreader-Nutzer

So beheben Sie es

Stellen Sie sicher, dass jedes Element mit role="tooltip" Text enthält oder aria-label bzw. aria-labelledby hat. Verbinden Sie den Tooltip per aria-describedby mit dem Element, das er erklärt. Wird der Text erst beim Hovern geladen, binden Sie ihn von Anfang an in die Seite ein und blenden ihn nur bei Hover und Tastaturfokus ein.

Bei Shopify

Meist Tooltips des Themes oder App-Widgets (Größentabellen, Versandinfos). Korrigieren Sie das Markup in den Liquid-Snippets des Themes oder wenden Sie sich an den App-Entwickler.

Bei Shoptet (CZ)

In Standard-Templates selten; eher in eigenem Code oder Add-ons. Bitten Sie Shoptet oder eine Partneragentur um eine Prüfung.

Bei PrestaShop

Meist in Theme-Templates oder Modulen mit Info-Icons. Korrigieren Sie das Tooltip-Markup in den .tpl-Dateien oder in überschriebenen Modul-Templates.

Bei WooCommerce

Meist in Tooltip-, Produktoptions- oder Page-Builder-Plugins. Prüfen Sie die Plugin-Einstellungen; sonst korrigieren Sie es im Child-Theme oder melden es dem Plugin-Entwickler.

Standards

Standards
StandardAbschnitt
WCAG 2.2 4.1.2 (A) Name, Role, Value
WCAG 2.1 4.1.2 (A) Name, Role, Value
WCAG 2.0 4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1 9.4.1.2
EN 301 549 3.2.1 9.4.1.2
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.4.1.2

Automatische Prüfung: axe-core-Regel aria-tooltip-name. dequeuniversity.com, github.com, www.w3.org

Ähnliche Prüfungen

Alle Regeln, die wir prüfen