A: Schaltflächen müssen wahrnehmbaren Text enthalten (WCAG 4.1.2)

• Bedeutung
• Auswirkung
• Empfehlung
• Beispiele

Stellt sicher, dass Schaltflächen wahrnehmbaren Text enthalten.

Das bedeutet

Die Schaltfläche hat keinen zugänglichen Namen, zum Beispiel nur ein Icon ohne Text oder leerer Inhalt. Screenreader können Zweck und Ziel nicht ansagen; Tastaturnutzende hören nur „Schaltfläche“ ohne Kontext.

Auswirkung

Nutzerinnen und Nutzer finden oder verstehen Funktionen nicht. Vorgänge werden abgebrochen, die Seite verstößt gegen WCAG A und Conversion sowie Compliance leiden.

Empfehlung

• Sichtbaren, kurzen Linktext im <button> verwenden.

• Wenn kein sichtbarer Text möglich ist: aria-label oder aria-labelledby setzen.

• Bei Icon Schaltflächen versteckten Text ergänzen (<span class="sr-only">…</span>).

• Dekoratives nicht als Schaltfläche auszeichnen oder für assistive Technik verbergen.

Beispiel

Problematisch

<button><svg aria-hidden="true"></svg></button>

Besser sichtbar

<button>Suche starten</button>

Besser mit aria-label

<button aria-label="Suche öffnen"><svg aria-hidden="true"></svg></button>

Verknüpfte WCAG-Kriterien:
WCAG 4.1.2 - Name, Rolle, Wert