Ihr habt eure Website mit automatisierten Tools gecheckt, alle Fehler behoben und seht endlich diesen befriedigenden grünen Haken. Die Accessibility-Checkliste ist abgehakt. Die Seite ist barrierefrei – oder? In unserer letzten Live-Session mit Accessibility-Expertin Olivia Richter von der Ideenquelle haben wir einen Blick hinter die Kulissen geworfen. Das ernüchternde Fazit: Eine technisch einwandfreie AXE-Prüfung bedeutet noch lange nicht, dass eure Website für alle Menschen nutzbar ist.
In diesem Blog-Post fassen wir die essenziellen Learnings aus der Session für euch, der Tech- und Developer-Community, zusammen. Es geht nicht um trockene Theorie, sondern um die praktischen Fallstricke, die selbst erfahrene Entwickler:innen übersehen – und warum manuelle Tests der Schlüssel zu echter Inklusion sind.
Die trügerische Sicherheit der Automation
Automatisierte Accessibility-Tools wie das beliebte AX-Plugin sind ein fantastischer erster Schritt. Sie finden strukturelle Probleme, fehlende Alt-Texte oder offensichtliche Kontrastfehler. Olivia betont jedoch: „Wenn AX grün ist, kann die Seite trotzdem in einem katastrophalen Zustand sein.“ Diese Tools können nur etwa 30-40% der möglichen Barrieren überhaupt erkennen. Warum? Weil sie Logik, Kontext und die tatsächliche Nutzererfahrung nicht bewerten können.
Ihr denkt, ein hoher Farbkontrast sei einfach umgesetzt? Ein häufiger Trugschluss. „Farbkontrast ist der erste Punkt, den man lernt“, so Olivia. Die Herausforderung liegt im Detail: Sind nur die Fließtexte geprüft, oder auch die Bedienelemente wie Input-Felder, Buttons und Fokus-Rahmen? Ein unsichtbarer „Animation stoppen“-Button mag technisch korrekt sein, ist für Screenreader-Nutzer:innen aber eine Sackgasse, wenn visuelle und auditive Information nicht übereinstimmen.
Die übersehenen Barrieren: Von Animationen bis zu Formular-Chaos
In einer Live-Demo mit einem eigens präparierten „Barriere-Adventskalender“ zeigte Olivia, wie viele Hürden eine optisch ansprechende Seite enthalten kann.
Nervige Animationen: Weihnachtlicher Schneefall oder Parallax-Effekte sind nicht nur Geschmacksache. Sie können ablenken, Übelkeit verursachen und für Menschen mit vestibulären Störungen unerträglich sein. Die goldene Regel: Wenn schon Animation, dann mit einem gut sichtbaren Kontroll-Button zum Anhalten.
Das Formular-Desaster: Ein Feld, das wie ein ausgefüllter Platzhalter aussieht? Fehlermeldungen, die nicht klar zuordenbar sind? „Platzhalter in Formularen sind ein riesiges Problem“, warnt Olivia. Sie werden von Screenreadern oft ignoriert. Die Folge: Nutzer:innen wissen nicht, was sie wo eintragen sollen. Richtige, verknüpfte HTML-Labels und aussagekräftige, zugeordnete Fehlerhinweise sind non-negotiable.
Der unsichtbare Fokus: Ihr tabbt durch eine Seite und wisst nicht mehr, wo der Fokus ist? Ein zu schwacher Kontrast des Fokus-Rahmens ist ein häufiger Fehler, der vor allem in selbst gestylten Iframes (z.B. von YouTube) oder bei invertierten Farbthemen auftritt. Für Tastaturnutzer:innen ist das wie Blindflug.
Die drei praktischen Schritte für bessere Manuelle Tests
Wie kommt ihr also vom trügerischen AXE-Grün zu einer wirklich zugänglichen Seite? Olivia empfiehlt drei praxisnahe Methoden, die ihr sofort umsetzen könnt:
Durchtabben wie ein Profi: Schließt eure Maus aus. Navigiert nur mit der Tab-Taste durch eure gesamte Seite. Ist die Reihenfolge logisch? Ist immer klar erkennbar, wo der Fokus liegt? Kommt ihr an alle interaktiven Elemente? Diese einfache Übung deckt erstaunlich viele Navigationsprobleme auf.
Screenreader-Simulation nutzen: Extensions wie „Barrierefreiheits-Persona simulieren“ für Chrome blenden die visuelle Wahrnehmung aus oder simulieren verschiedene Sehbehinderungen. Kombiniert das mit einem eingeschalteten Screenreader (z.B. NVDA oder VoiceOver). Versucht, eine konkrete Aufgabe zu lösen – etwa ein Formular auszufüllen. Versteht ihr nur anhand der Ansage, was zu tun ist?
Den Kontext-Check machen: Lasst euch alle Links einer Seite vom Screenreader vorlesen. Hört sich das so an? „Link, Link, weiter, mehr, hier klicken“? Das ist nutzlos. Aussagekräftige Link-Texte („Zum Newsletter anmelden“ statt „hier“) sind nicht nur für Accessibility, sondern auch für SEO ein Gewinn.
Warum ihr euch die Session anschauen solltet
Dieser Blog-Post kann nur an der Oberfläche kratzen. Im vollständigen Video seht ihr die Live-Demos aller genannten Barrieren – vom sich bewegenden Schnee bis zum kaputten Kontaktformular. Ihr bekommt einen ungeschönten Einblick in die Denkweise beim manuellen Testing und wie scheinbar „kleine“ Fehler die Nutzbarkeit für ganze Personengruppen komplett zerstören.
Für uns als Tech-Community ist Barrierefreiheit keine lästige Pflicht, sondern eine handwerklich anspruchsvolle Herausforderung an unsere Entwicklungsqualität. Es geht um sauberes, semantisches HTML, durchdachte UX und das Bewusstsein, dass unsere Nutzer:innen die Welt auf ganz unterschiedliche Weisen wahrnehmen.
„Barrierefreiheit hat viele Vorteile für uns alle.“ Eine barrierefreie Seite ist oft besser strukturiert, performanter, suchmaschinenfreundlicher und für alle Nutzer:innen angenehmer zu bedienen. Sie schließt niemanden aus und erweitert eure potenzielle Zielgruppe.
Fazit: Überwindet den Automation-Blindflug
Die Message ist klar: Verlasst euch nicht allein auf die grüne Ampel eures Accessibility-Plugins. Investiert Zeit in manuelle Tests, schult euer Auge (und eure Ohren) für die unsichtbaren Barrieren und macht Inklusion zu einem integralen Teil eures Entwicklungs-Workflows.
Die technische Umsetzung von Barrierefreiheit erfordert oft spezifisches Know-how – von der richtigen ARIA-Auszeichnung bis zur Integration in komplexe Frameworks. Ihr steckt in einem TYPO3-, React- oder Vue.js-Projekt fest und wisst nicht, wie ihr die theoretischen Guidelines praktisch umsetzen sollt?
Nehmt gerne Kontakt mit uns auf für Unterstützung zu den technischen Themen. Unser Team unterstützt euch dabei, eure Web-Anwendungen nicht nur technisch sauber, sondern wirklich für alle zugänglich zu machen.
