Barrierefreiheit für Schaltflächen: Ein umfassender Leitfaden

Denken Sie an Ihr Online-Surfverhalten und daran, wie oft Sie auf Schaltflächen klicken. Ob es nun 'Jetzt kaufen' oder 'Absenden' ist – wahrscheinlich nutzen Sie beim Surfen häufig Schaltflächen.

Stellen Sie sich nun vor, alle Schaltflächen wären plötzlich deaktiviert oder nicht auffindbar. Wie störend – und frustrierend – wäre das? In dieser Situation haben Sie zwei Möglichkeiten: Sie versuchen, einen cleveren Umweg zu finden, oder Sie geben Ihre Aufgabe ganz auf.

Leider ist die oben beschriebene Situation für viele Nutzer nicht ungewöhnlich. Für Menschen mit Behinderungen ist das Klicken auf Schaltflächen auf den meisten Websites eine unnötig komplizierte Aufgabe. Verständlicherweise führt das dazu, dass Nutzer eine Seite verlassen und sich für eine barrierefreiere Alternative entscheiden.

Wenn Ihre Website keine barrierefreien Schaltflächen hat, vertreiben Sie Kunden – und potenzielle Umsätze. Wie erstellt man also barrierefreie Schaltflächen? Und wie sorgen diese interaktiven Elemente für ein inklusiveres Erlebnis für alle Nutzer? Das und mehr besprechen wir im Folgenden.

Verständnis von Schaltflächen-Barrierefreiheit

Da Schaltflächen ein integraler Bestandteil der Benutzeroberfläche sind, müssen sie mit Web-Barrierefreiheit im Hinterkopf gestaltet werden. Das bedeutet, dass Merkmale wie ausreichender Farbkontrast und Größe, klare Beschriftungen und eine gute Schriftgröße von Anfang an berücksichtigt werden müssen. So wird sichergestellt, dass Schaltflächen von Menschen mit unterschiedlichen Behinderungen genutzt werden können, darunter:

• Sehbeeinträchtigungen: Nutzer mit Sehbehinderungen, einschließlich Blindheit, Sehschwäche oder Katarakten, sind auf Screenreader angewiesen, um digitale Inhalte zu erfassen. Damit diese Technologien Schaltflächen erkennen, müssen diese klar beschriftet und mit aussagekräftigem Linktext versehen sein.

• Kognitive Unterschiede: Für Nutzer mit Legasthenie oder anderen kognitiven Beeinträchtigungen ist es wichtig, Schaltflächen einfach und konsistent zu halten. Einfache Schaltflächen wie „Jetzt kaufen“ oder „Mehr erfahren“ geben diesen Nutzern eine Vorstellung davon, was beim Klicken passiert, und reduzieren so Angst und Verwirrung.

• Einschränkungen der Motorik: Nutzer mit eingeschränkter Mobilität oder Tremor benötigen mehr Flexibilität bei Schaltflächen. Dazu gehört, das Touch-Ziel für Schaltflächen zu vergrößern und zusätzliche Tastaturnavigationsoptionen bereitzustellen.

Barrierefreiheitsanforderungen für Schaltflächen

Barrierefreiheit von Schaltflächen ist nicht nur gutes Webdesign – sie ist auch gesetzlich vorgeschrieben. Die Web Content Accessibility Guidelines (WCAG)(opens in a new tab) gelten als Standard für digitale Barrierefreiheit und werden im Equality Act 2010 sowie in den Accessibility Regulations 2018 für öffentliche Stellen (Websites und mobile Anwendungen) referenziert.

Laut der neuesten WCAG-Version (WCAG 2.2) müssen Schaltflächen wahrnehmbar, bedienbar und verständlich sein. Einfacher gesagt: Schaltflächen sollten leicht sichtbar sein, und Nutzer sollten sofort verstehen, wie sie die Schaltfläche verwenden und welche Aktion beim Klicken ausgelöst wird.

Hier sind einige der in den WCAG enthaltenen Richtlinien, die verdeutlichen, welche Eigenschaften Schaltflächen haben müssen, um barrierefrei zu sein:

• Der Farbkontrast zwischen einer Schaltfläche und ihrem Text sollte mindestens 4,5:1 betragen, der Kontrast zwischen Schaltfläche und Hintergrund mindestens 3:1.

• Schaltflächen sollten eine Mindestzielgröße von 24 x 24 CSS-Pixeln haben, um sie besser anklickbar zu machen.

• Nutzer sollten den Zweck der Schaltfläche allein am Schaltflächentext erkennen können.

• Schaltflächen müssen auf mehr als eine Weise nutzbar sein, d. h. Nutzer sollten sie auch nur mit Tastaturnavigation oder unterstützenden Technologien erreichen und aktivieren können.

Dies sind nur einige der WCAG-Empfehlungen für Schaltflächen. Eine umfassendere Liste finden Sie in den Richtlinien des World Wide Web Consortiums (W3C) hier(opens in a new tab).

Ein Barrierefreiheitssymbol in einem Herz mit Regenbogenverlauf.

So gestalten Sie für Inklusion

Mit den rechtlichen und ethischen Anforderungen im Hinterkopf schauen wir uns nun an, wie man barrierefreie Schaltflächen gestaltet.

Form und Struktur

Schaltflächen sind dafür gemacht, genutzt zu werden – daher sind große, einfache Schaltflächen immer besser. Denken Sie daran: Nicht jeder kann einfach auf eine Schaltfläche klicken. Deshalb ist es wichtig, dass sie eine große Touch-Zielgröße haben und mit Tastaturbefehlen aktiviert werden können. Vermeiden Sie zu komplexe Designs, da diese auf der Seite untergehen und das Nutzererlebnis negativ beeinflussen können.

Farbe und Kontrast

Schaltflächen sollten für alle Nutzer leicht erkennbar sein – nicht nur für Menschen mit Behinderungen. Farbe spielt dabei eine große Rolle. Achten Sie darauf, dass sowohl die Farbe der Schaltfläche als auch der Text einen ausreichenden Farbkontrast aufweisen. Wie oben erwähnt, sollte der Text einen Mindestkontrast von 4,5:1 und der Kontrast zwischen Schaltfläche und Hintergrund mindestens 3:1 betragen. Ein Farbkontrast-Checker hilft Ihnen, barrierefreiere Farbentscheidungen zu treffen.

Beschriftung für Klarheit

Betrachten Sie Ihre Schaltflächen wie Tore zu anderen Bereichen Ihrer Website. Nutzer zögern, durch eine unbeschriftete, mysteriöse Tür zu gehen; dieselbe Unsicherheit gilt für unklare, mehrdeutige Schaltflächen. Geben Sie jeder Schaltfläche eine klare, eindeutige und verständliche Beschriftung. Gegebenenfalls sollten Sie WAI-ARIA (auch als ARIA-Rollen bekannt) verwenden. Durch die Einbindung von ARIA-Labels in Ihr semantisches HTML vermeiden Sie Verwirrung oder Unsicherheit und schaffen klare Erwartungen an die folgende Aktion. Noch wichtiger: Klare Beschriftungen fördern die Inklusion auf Ihrer Website, denn einfache, klare Anweisungen helfen allen Nutzern – auch denen ohne Behinderung – Ihre Seite zu nutzen.

Verständnis von Schaltflächen-Zuständen

Vielleicht wissen Sie nicht, dass Schaltflächen verschiedene Zustände haben – nicht nur den Standardzustand. Dazu gehören Hover, Klick, Aktiv usw. Jeder dieser Zustände muss deutliche visuelle Hinweise haben, damit Menschen mit Behinderungen und unterstützende Technologien sie nutzen können. Das hilft Nutzern von Hilfstechnologien, schnell zu erkennen, mit welcher Schaltfläche sie interagieren. Die Implementierung von 'tabindex' in Ihrem HTML ist eine einfache Möglichkeit, den Fokus auf Schaltflächen-Widgets oder Dialogfelder zu lenken.

Tastaturnavigation sicherstellen

Nicht alle Nutzer können eine Maus zur Navigation im Web verwenden. Daher müssen Nutzer in der Lage sein, Schaltflächen ausschließlich mit der Tastatur zu erreichen und zu bedienen. Beim Erstellen und Gestalten von Schaltflächen stellen Sie sicher, dass sie auf Tastaturkürzel reagieren. Schaltflächenelemente sollten zudem einen Fokuszustand haben, d. h. wenn eine Schaltfläche den Fokus erhält (z. B. durch Tab oder Hover), sollte ein klarer visueller Hinweis angezeigt werden.

Kompatibilität mit Screenreadern

Ein großer Teil der Menschen mit Sehbehinderungen (87,6 % laut einer WebAIM-Umfrage(opens in a new tab)) ist auf Screenreader angewiesen, um das Web zu nutzen. Diese Geräte lesen die Inhalte einer Webseite laut vor. Testen Sie daher, wie Ihre Schaltflächen von diesen Geräten vorgelesen werden. Überlegen Sie, ob der Text sinnvoll ist und eine klare Aktion vermittelt. Wir empfehlen außerdem, mit verschiedenen Screenreadern wie NVDA, VoiceOver oder JAWS zu testen, um die Kompatibilität und Nutzbarkeit zu erhöhen.

Die Rolle von AudioEye bei der Verbesserung der Schaltflächen-Barrierefreiheit

Schaltflächen sind das Eingangstor zu Ihren Inhalten, Produkten und Dienstleistungen. Wenn sie nicht barrierefrei sind, verhindern Sie, dass ein großer Teil Ihrer Nutzer auf Ihre Website zugreifen kann.

Halten Sie die Eingänge zu verschiedenen Bereichen Ihrer Website mit AudioEye offen. Unsere Automatisierte Barrierefreiheitsplattform und die Suite an Barrierefreiheits-Tools bieten alles, was Sie benötigen, um die Barrierefreiheit von Schaltflächen zu prüfen und zu verbessern. So funktioniert es:

• AudioEyes Experten-Audits scannen Ihre Webseiten nach häufigen Barrierefreiheitsfehlern, einschließlich nicht barrierefreier Schaltflächen, und bieten Echtzeit-Lösungen für einfache Fehler.

• Individuelle Tests durch unser Expertenteam untersuchen Ihre Website auf komplexere Barrierefreiheitsprobleme, wie z. B. unzureichende Schaltflächenbeschreibungen, und geben Empfehlungen zur Behebung.

• Barrierefreiheits-Schulungen und Ressourcen vermitteln Ihrem Team das Wissen und die Fähigkeiten, um barrierefreie Webinhalte zu erstellen und zu entwickeln.

• AudioEyes Anpassungstools ermöglichen es Nutzern, das Aussehen und die Bedienung von Schaltflächen individuell anzupassen, z. B. Größe oder Schriftart zu ändern.

• Aktives Monitoring überwacht Ihre Webseiten in Echtzeit auf neue Barrierefreiheitsprobleme, sodass Fehler gefunden und behoben werden, bevor sie Ihre Kunden beeinträchtigen.

Mit AudioEye ist es einfach, sich für digitale Inklusion zu engagieren und barrierefrei zu gestalten. Unsere Plattform bietet alles, was Sie brauchen, um Barrierefreiheit in Ihren Designprozessen zu priorisieren, und ist Ihr zuverlässiger Partner für digitale Barrierefreiheit und Inklusion zu erreichen.