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

Einige Füllstandsanzeigen haben keinen Namen

Einige Elemente, die als Messanzeige (meter) gekennzeichnet sind, etwa für Passwortstärke, Lagerbestand oder Bewertung, haben keinen Text, der sagt, was sie messen.

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 einen Wert wie „60 %“ und wissen nicht, ob es um Passwortstärke, Restbestand oder eine Bewertung geht. Ihnen fehlen womöglich Informationen für ihre Entscheidung.

Wen es betrifft

blinde Kundinnen und Kunden
Screenreader-Nutzer

So beheben Sie es

Geben Sie jedem Element mit role="meter" einen Namen: aria-label (zum Beispiel aria-label="Passwortstärke") oder aria-labelledby mit Verweis auf eine sichtbare Überschrift oder Beschriftung. Ist die Zahl allein unklar, ergänzen Sie einen verständlichen Wert mit aria-valuetext.

Bei Shopify

Eher selten. Meist ein Lagerbestands-, Bewertungs- oder Fortschritts-Widget aus einer App oder einer eigenen Theme-Section. Ergänzen Sie eine Beschriftung im Liquid des Themes oder wenden Sie sich an den App-Entwickler.

Bei Shoptet (CZ)

In Shoptet-Templates selten. Falls es vorkommt, melden Sie es Shoptet oder einer Partneragentur.

Bei PrestaShop

Eher selten. Meist ein Modul-Widget wie Lagerbestand oder Bewertungen. Ergänzen Sie aria-label im überschriebenen Modul-Template.

Bei WooCommerce

Eher selten. Meist ein Widget für Passwortstärke, Bewertung oder Lagerbestand aus dem Theme oder einem Plugin. Ergänzen Sie eine Beschriftung 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-meter-name. dequeuniversity.com, github.com, www.w3.org

Barrierefreiheits-Attribute werden in der falschen Situation verwendet
WCAG 4.1.2 A
Ein Auswahlmenü hat keine Beschriftung
WCAG 4.1.2 A
Große Tabellen haben Zellen ohne Überschriften
WCAG 1.3.1 A
Manche Texte laufen durch und lassen sich nicht anhalten
WCAG 2.2.2 A

Alle Regeln, die wir prüfen