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

Einige Fortschrittsbalken haben keinen Namen

Einige Elemente, die als Fortschrittsbalken gekennzeichnet sind, haben keinen Text, der sagt, was sie zeigen, zum Beispiel „Noch 20 € bis zum kostenlosen Versand“, Checkout-Schritte oder eine Ladeanzeige.

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

Warum das für Ihre Kunden wichtig ist

Screenreader-Nutzer hören nur „Fortschrittsbalken, 60 %“ und wissen nicht, ob es um die Versandkostenfrei-Grenze, den Checkout-Schritt oder eine noch ladende Seite geht. Sie verpassen womöglich ein Angebot oder warten, ohne zu wissen, worauf.

Wen es betrifft

blinde Kundinnen und Kunden
Screenreader-Nutzer

So beheben Sie es

Geben Sie jedem Element mit role="progressbar" einen Namen: aria-label (zum Beispiel aria-label="Fortschritt bis zum kostenlosen Versand") oder aria-labelledby mit Verweis auf den sichtbaren Text daneben. Wo sinnvoll, ergänzen Sie aria-valuetext mit einem verständlichen Wert wie „noch 20 €“.

Bei Shopify

Meist eine App für Versandkostenfrei-Balken, Upselling oder Warenkorb oder eine Ladeanzeige im Theme. Bitten Sie den App-Entwickler um eine Beschriftung oder ergänzen Sie aria-label im Liquid-Snippet des Themes.

Bei Shoptet (CZ)

Meist eine Versandkostenfrei- oder Ladeanzeige im Template oder in einem Add-on. Melden Sie es Shoptet oder einer Partneragentur.

Bei PrestaShop

Meist ein Modul für kostenlosen Versand, Checkout oder Ladeanzeigen. Ergänzen Sie aria-label im überschriebenen Modul-Template oder melden Sie es dem Modul-Entwickler.

Bei WooCommerce

Meist ein Plugin für Versandkostenfrei-Balken, Checkout-Schritte oder Uploads oder das Fortschritts-Widget eines Page-Builders. Füllen Sie das Beschriftungsfeld des Widgets aus, falls vorhanden; sonst korrigieren Sie es im Child-Theme oder melden Sie es dem Plugin-Entwickler.

Standards

Standards
Standard	Abschnitt
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 aria-progressbar-name. dequeuniversity.com, github.com, www.w3.org

Eingebettete Inhalte haben keinen Namen
WCAG 4.1.2 A
Die Seite lädt sich selbst neu oder leitet weiter
WCAG 2.2.1 A
Bilder haben keine Textbeschreibung
WCAG 1.1.1 A
Einige Vektorgrafiken haben keine Textbeschreibung
WCAG 1.1.1 A

Alle Regeln, die wir prüfen