Entsperren Sie die Barrierefreiheit der Schaltflächen: : 6 inklusive Schritte

Unabhängig von der Größe Ihrer Website ist die Barrierefreiheit von Schaltflächen ein zentraler Aspekt.

Auch wenn sie zu den kleineren Elementen auf Ihrer Website zählen, sind Schaltflächen  entscheidend dafür, dass Besucher aktiv werden.

Haben Sie sich schon einmal gefragt, ob wirklich alle Nutzer mit den Schaltflächen auf Ihrer Website interagieren können – auch jene, die auf assistive Technologien angewiesen sind?

Was ist Schaltflächen-Barrierefreiheit?

Schaltflächen-Barrierefreiheit bedeutet, Schaltflächen so zu gestalten und zu programmieren, dass alle Nutzer diese leicht wahrnehmen, verstehen und bedienen können – einschließlich Menschen mit Behinderungen.

Dazu gehört, dass Schaltflächen mit assistiven Technologien wie Screenreadern kompatibel sind und sich per Tastatur navigieren lassen.

Um das Nutzererlebnis für alle Besucher Ihrer Website zu verbessern, sollten Ihre Schaltflächen außerdem die Anforderungen der Web Content Accessibility Guidelines (WCAG) erfüllen.

Warum ist die Barrierefreiheit von Schaltflächen wichtig?

Die WCAG sowie internationale Gesetze zur Barrierefreiheit – wie das ADA (USA) oder das AODA (Kanada) – schreiben vor, dass Websites für alle Menschen zugänglich sein müssen, unabhängig von deren Fähigkeiten. Auch wenn Schaltflächen eine einfache Funktion erfüllen, müssen alle Besucher in der Lage sein, sie zu erreichen und zu nutzen.

Ist der Zugriff auf grundlegende Funktionen nicht gewährleistet, kann Ihre Website als nicht konform gelten – was zu hohen Strafen oder Klagen führen kann.

Darüber hinaus leidet das gesamte Nutzererlebnis. Überlegen Sie, wie viele potenzielle Kunden Sie verlieren könnten, nur weil sie keine wichtigen Informationen abrufen oder keine Aktionen ausführen können.

Die Gewährleistung barrierefreier Schaltflächen ist eine schnelle, aber äußerst wirkungsvolle Maßnahme, um eine inklusivere Online-Erfahrung zu schaffen.

Die Grundprinzipien barrierefreier Schaltflächen

Sehen wir uns nun einige der wichtigsten Anforderungen an, die Ihre Schaltflächen gemäß den WCAG erfüllen sollten.

Tastaturbedienbarkeit

Schaltflächen müssen vollständig per Tastatur bedienbar sein, um auch Nutzer ohne Maus zu unterstützen. Besucher sollten mithilfe der Tabulatortaste zur Schaltfläche navigieren und sie mit der Eingabetaste oder der Leertaste aktivieren können.

Klar beschriftete und beschreibende Labels

Jede Schaltfläche auf Ihrer Website sollte einen aussagekräftigen, beschreibenden Text enthalten. Formulierungen wie „Hier klicken“ oder „Formular absenden“ sind zu ungenau. Wenn der Text nicht beschreibend ist, kann ein Screenreader die Funktion der Schaltfläche nicht korrekt wiedergeben.

Ausreichende Größe und Abstand

Schaltflächen sollten groß genug sein, um leicht angeklickt zu werden (mindestens 44×44 Pixel) und ausreichend voneinander entfernt sein, um versehentliche Klicks zu vermeiden.

Menschen mit eingeschränkter Feinmotorik oder zittrigen Bewegungen können kleine oder eng platzierte Schaltflächen nur schwer bedienen. Auch Nutzer, die Bildschirmvergrößerungen verwenden, haben Schwierigkeiten, kleine oder zu dicht beieinanderliegende Schaltflächen zu erkennen.

Ausreichender Farbkontrast

Laut WCAG sollte der Text auf Schaltflächen einen ausreichenden Kontrast zum Hintergrund haben. Der Farbkontrast muss mindestens 4,5:1 für normalen Text und 3:1 für großen Text betragen. Andernfalls können Nutzer mit Sehbehinderungen wie Farbenblindheit Ihre Schaltflächen möglicherweise nicht erkennen.

Best Practices für barrierefreie Schaltflächen

Damit alle Schaltflächen auf Ihrer Website vollständig funktional und barrierefrei sind, sollten Sie folgende bewährte Methoden berücksichtigen:

Verwenden Sie semantisches HTML

Nutzen Sie beim Einfügen von Schaltflächen das HTML-Element <button> anstelle von <div> oder <span>.

Das <button>-Element unterstützt von Haus aus Tastaturinteraktionen und wird von Screenreadern erkannt, ohne dass zusätzliche ARIA-Attribute notwendig sind. Nicht-semantische Elemente wie <div> oder <span> erfordern zusätzlichen Aufwand und erreichen möglicherweise nicht die gleiche Nutzbarkeit.

Fokusindikatoren aktivieren

Schaltflächen sollten einen sichtbaren Fokuszustand aufweisen – etwa durch eine Umrandung oder farbliche Hervorhebung.

So erkennen Nutzer, die per Tastatur navigieren, welche Schaltfläche gerade ausgewählt ist. Entfernen Sie niemals standardmäßige Fokusstile, ohne eine klare Alternative anzubieten – sonst wird die Navigation für viele Nutzer erschwert.

Barrierefreie Zustände und Rückmeldungen umsetzen

Stellen Sie visuelles und/oder akustisches Feedback bereit, wenn eine Schaltfläche fokussiert, überfahren oder geklickt wird. Dazu gehören Farbänderungen, Größenveränderungen oder Animationen, die Interaktivität anzeigen.

Für Nutzer mit Sehbehinderungen sollten Screenreader auch Statusänderungen ansagen, z. B. wenn eine Schaltfläche deaktiviert wird oder eine Aktion erfolgreich abgeschlossen wurde.

Kontext mit ARIA-Labels bereitstellen

ARIA-Labels sind besonders hilfreich. Verwenden Sie aria-label, aria-labelledby oder aria-disabled, um Screenreadern zusätzlichen Kontext zu liefern.

Beispiel: Hat eine Schaltfläche nur ein Symbol, kann ein aria-label den Zweck beschreiben (z. B. aria-label=”Suche” bei einer Lupe). Mit aria-disabled=”true” wissen Nutzer unterstützender Technologien, dass die Schaltfläche nicht verfügbar ist – auch wenn sie visuell bereits als deaktiviert dargestellt ist.

Nicht nur mit Farbe arbeiten

Nutzen Sie zusätzlich zu Farben auch Text, Symbole oder Muster, um den Status von Schaltflächen darzustellen (z. B. aktiv, deaktiviert, Fehlerzustand).

Dies ist besonders hilfreich für farbenblinde Nutzer, die z. B. Rot und Grün nicht unterscheiden können. Statt nur Rot zu verwenden, um einen Fehler zu kennzeichnen, sollte z. B. auch ein Warnsymbol oder der Text „Ungültige Eingabe“ angezeigt werden.

Konsistentes Verhalten sicherstellen

Schaltflächen sollten sich auf allen Geräten und in allen Browsern vorhersehbar verhalten. Achten Sie auf standardisierte Interaktionen, z. B. dass Schaltflächen immer durch Enter oder Leertaste ausgelöst werden können. Vermeiden Sie unerwartetes Verhalten wie Doppelklick-Anforderungen, wenn ein einfacher Klick genügt.

Testen Sie Ihre Schaltflächen regelmäßig in verschiedenen Bildschirmgrößen, Browsern und assistiven Technologien, um Konsistenz und Nutzbarkeit zu gewährleisten.

So bleiben Ihre Schaltflächen barrierefrei

Sobald Ihre Website-Schaltflächen barrierefrei gestaltet sind, sollten Sie regelmäßig prüfen, ob es Aktualisierungen der WCAG-Richtlinien gibt. Anforderungen können sich ändern – entsprechend könnten Anpassungen nötig sein.

Und nicht vergessen: Wenn Sie größere Änderungen an Ihrer Website vornehmen, etwa neue Funktionen oder Seiten hinzufügen, überprüfen Sie auch alle neuen Schaltflächen auf Barrierefreiheit.