Zum Inhalt springen

Schaltfläche ohne Beschriftung

KritischWCAG-Kriterium 4.1.2BFSG-relevant

Was ist das Problem?

Eine Schaltfläche hat keinen zugänglichen Namen — häufig Icon-Buttons wie Suche, Warenkorb oder Menü. Screenreader-Nutzer hören nur „Schaltfläche" und können die Funktion nicht erkennen. Zentrale Shop-Funktionen werden damit unbenutzbar.

Warum ist das relevant?

WCAG 2.1 Erfolgskriterium 4.1.2 (Name, Rolle, Wert, Stufe A) verlangt für Bedienelemente einen programmatisch bestimmbaren Namen. Ein häufiger, schwerwiegender und zugleich schnell behebbarer Mangel — relevant für die BFSG-Bewertung.

So behebst du es

Gib jedem Button einen zugänglichen Namen: sichtbarer Text im Button, oder bei reinen Icon-Buttons ein aria-label (z. B. <button aria-label="Suche öffnen">). Das title-Attribut allein genügt nicht zuverlässig.

Shopware

Icon-Buttons stammen meist aus dem Theme (Suche, Warenkorb, Menü-Toggle). Im Theme-Child das jeweilige Twig-Template überschreiben und aria-label ergänzen — z. B. in layout/header/actions/*.html.twig.

Shopware gezielt prüfen

WooCommerce

Bei Theme-Buttons (Suche-Lupe, Warenkorb-Icon): Child-Theme anlegen und im jeweiligen Template-Part aria-label ergänzen, oder — wenn vom Theme vorgesehen — die Beschriftungs-Option im Customizer aktivieren. Bei Page-Buildern die Button-Elemente mit Text oder ARIA-Label versehen.

WooCommerce gezielt prüfen

Shopify

Im Code-Editor die betroffene Sektion/Snippet suchen (häufig header.liquid, cart-drawer.liquid) und dem <button> ein aria-label geben. Viele aktuelle Themes haben dafür bereits Locale-Strings — prüfen, ob nur die Übersetzung fehlt.

Shopify gezielt prüfen

WordPress

Block-Editor-Buttons haben Text — betroffen sind meist Theme-Icons (Menü, Suche). Im Child-Theme das Template-Part anpassen (aria-label) oder ein Theme wählen, das beschriftete Bedienelemente mitbringt.

WordPress gezielt prüfen

TYPO3

Im Site-Package das Fluid-Template des betroffenen Buttons anpassen und aria-label ergänzen (z. B. Resources/Private/Partials/Header/…).

TYPO3 gezielt prüfen

Ist deine Website betroffen?

Der kostenlose Schnell-Check prüft bis zu 5 Seiten in wenigen Minuten — ohne Registrierung.

Kostenlosen Schnell-Check starten

Verwandte Regeln

Alle Regeln