Die Schwachstellen von Tools zur Prüfung der Barrierefreiheit – Schaltflächen
Schaltflächen.
Ja, Schaltflächen. Hast du schon mal drauf geachtet, wie oft du auf eine klickst? Es sieht wahrscheinlich ganz einfach aus – schließlich kannst du die Schaltfläche sehen, eine Maus benutzen oder auf einen Bildschirm tippen. Aber hast du dir schon mal überlegt, was nötig ist, damit eine einfache Schaltfläche für alle nutzbar ist?
Als ich mit dem Schreiben dieses Artikels begann, wollte ich mich mit der Prüfung der Barrierefreiheit von Formularen beschäftigen. Ich war total motiviert – bis mir klar wurde, dass dafür nicht 500 Wörter, sondern eher 50.000 nötig sein würden.
Beginnen wir also mit einem der häufigsten interaktiven Elemente auf Websites oder in Apps: dem Button.
Auf den ersten Blick scheint das einfach zu sein. Um barrierefrei zu sein, muss ein Button:
- als Button erkennbar sein,
- seinen Zweck klar vermitteln
- und für Nutzer funktionieren, die mit einer Tastatur oder einem Screenreader navigieren.
Die zum Testen verwendeten Tools sind wie üblich für alle kostenlos und ohne Registrierung nutzbar.
WAVE, IBM Equal Accessibility Checker, Lighthouse, Joomlas integrierter Checker Jooa11y, Web Developer Tools.
Buttons sollten Buttons sein
Fangen wir mit einem echt schlechten Beispiel an und schauen mal, was uns automatische Testtools sagen können, wenn wir Bilder als Schaltflächen verwenden.
<div role="button"><img src="/images/buttons/green-balloon.jpg" alt=""></div>
<div role="button"><img src="/images/buttons/red-balloon.jpg" alt=""></div>Es gibt mehrere Verstöße gegen die Barrierefreiheit, am schlimmsten ist die Verwendung von <div role=”button” anstelle des korrekten <button> und die Verwendung von Bildern mit leerem Alt-Text.
Ein großes Lob an unser Jooa11y-Plugin. Es ist das einzige Tool, das fragwürdige Alt-Texte erkennt.
Jooa11y und der IBM Accessibility Checker haben den Fehler „Button hat keinen barrierefreien Namen“ gefunden.
Kein Tool findet die Fehler:
- Menschen mit Farbenblindheit können nicht erkennen, welcher Knopf rot oder grün ist.
- Benutzer von Tastaturen können die Schaltflächen nicht erreichen.
- Der Screenreader NVDA ignoriert diese Schaltflächen komplett, weil alt=""
Die Schaltflächengröße sollte mindestens 44px x 44px betragen.
Versuch mal, auf einen winzigen 8px x 8px großen Button zu klicken, wenn du dicke Finger hast oder zitterst und deine Hand nicht ruhig halten kannst.
Die WCAG empfiehlt eine Mindestgröße von 44px x 44px für Buttons. Wenn zum Beispiel das Symbol in einem Button kleiner ist, kann der klickbare Bereich mit einem Padding vergrößert werden.
In diesem Beispiel haben wir einen normalen Bootstrap-Button mit einer Höhe von 44px und einen ganz kleinen roten Button. Klar, niemand würde so einen winzigen Button auf einer Website wirklich benutzen, das ist nur zur Demo.
Kein automatisiertes Tool checkt die Größe von Buttons, also liegt es komplett am menschlichen Tester, dieses Problem zu erkennen.
Fokusring
In diesem Artikel über den Fokus werden schon ein paar Probleme angesprochen. Hier ist noch eins: Der dunkle Button im Bild oben zeigt einen Fokusring, wenn man mit der Maus drüberfährt. Aber man sieht ihn nicht. Der Fokusring hat die gleiche Farbe wie der Button selbst. Das ist ein häufiges Problem auf vielen Websites. Testtools können dieses Problem nicht erkennen.
Sinnvolle und korrekte Beschreibung
Jeder Button muss einen Text haben, der auf einer Seite einzigartig ist. Wenn kein Text zu sehen ist, kann das aria-label von Hilfstechnologien genutzt werden.
In diesem Beispiel zeigt kein Testtool das Problem an: Es gibt zwei Schaltflächen mit dem gleichen Text. Stell dir vor, ein Nutzer navigiert per Spracheingabe und sagt: „Klicke auf die Schaltfläche ‚Klicke mich‘“ – welche wird dann ausgelöst?
Es gibt auch keine Information darüber, was passiert, wenn man auf die Schaltfläche klickt – geht es zu einer anderen Seite? Oder wird Geld auf dein Konto überwiesen? Wird ein Krankenwagen gerufen? Das ist nicht nur eine Frage der Barrierefreiheit, sondern auch der Benutzererfahrung und wichtig für alle.
Auch hier lautet die Zusammenfassung:
Die Entscheidung, ob der Text einer Schaltfläche und die ARIA-Beschriftung sinnvoll und angemessen sind, liegt allein in der Verantwortung des menschlichen Testers.
Viel Spaß beim Testen! Wie oben erwähnt, verwenden wir in diesen Artikeln nur kostenlose Tools. Es gibt unzählige andere kostenlose und kostenpflichtige Tools, die wahrscheinlich zu anderen Ergebnissen führen. Wenn du andere Testtools verwendest, teile deine Erfahrungen mit der Community und meld dich bei der Redaktion!
Originalartikel im Joomla! Magazin: https://magazine.joomla.org/all-issues/october-2025/the-blind-spots-of-accessibility-testing-tools-buttons