Ein Interview mit Dr.in Susanne Buchner-Sabathy
Sie ist Beraterin für Web Accessibility und blind. Wichtig für sie ist, Brücken zwischen Menschen zu bauen. Daher unterstützt sie beim Abbau von Hürden von Webauftritten.
Was es für die digitale Barrierefreiheit bei Design, Navigation, Fotos/Videos, Formularen zu beachten gibt, erklärt sie in anschaulichen Beispielen:
Digitale Barrierefreiheit im Design
Welche Art von Website wirkt auf den ersten Eindruck hochwertig oder aus Sicht einer blinden Person?
Wichtige Qualitätsmerkmale sind eine klare Struktur (HTML-Tags für Seitenbereiche, Überschriften, Listen), gut verständliche Texte, klare Linktexte und Beschriftungen für Schalter und Formularfelder. Bei Letzteren sollte die sichtbare Beschriftung durch das <label>-Tag mit dem Formularfeld verbunden sein. Weiters kurze, prägnante Alternativtexte für Bilder, die eine Information vermitteln, die sich aus dem Text nicht erschließen lässt.
Gab es Websites, die formal den Richtlinien für barrierefreie Webinhalte (WCAG) entsprachen, sich aber trotzdem anstrengend zum Durchgehen angefühlt haben? Wenn ja, warum?
Ich glaube, da ähneln sich die Erfahrungen von sehenden und nicht-sehenden Personen stark. Eine chaotisch aufgebaute Webseite, eine von außerhalb des Unternehmens nicht nachvollziehbare Menüstruktur oder ein unübersichtlicher mehrstufiger Kaufprozess – z. B., um eine Versicherung abzuschließen – machen niemandem Freude.
Ein Beispiel: Bei finanzonline.at ist es ärgerlich, dass man bei Aufruf der Seite mit dem Cursor im Eingabefeld für die Anmeldung mit Teilnehmeridentifikation steht. Ich möchte mich aber mit der ID Austria anmelden. Die Schaltfläche dafür steht – wenn man die TAB-Taste zum Navigieren auf der Webseite verwendet – vor diesem Eingabefeld. Deshalb kann es sein, dass man viel wertvolle Zeit verliert, bis man sie nicht-sehend findet.
Ausreichend Kontrast ist ein Thema, gerade für seheingeschränkte Personen. Welche Tipps haben Sie für Webdesigner und Programmierer?
Hier würde ich empfehlen, die Kontrastanforderungen der Stufe AAA zu erfüllen bzw. darauf zu achten, dass auch größere Schrift einen ausreichenden Kontrast zum Hintergrund besitzt. Das erleichtert allen das Lesen, ob mit oder ohne Sehbehinderung. Es gibt da viele hilfreiche Tools, z.B. den Colour Contrast Analyser. Mehr Infos dazu unter https://accessibility.ruhr-uni-bochum.de/colour-contrast-analyser/.
Sehr wichtig ist auch, dass man bei Schaltern gut erkennen kann, wie groß der Klickbereich ist. D. h. auch Schalter brauchen einen ausreichenden Kontrast zum Hintergrund. Bei im Text integrierten Links ist zu beachten, dass sich die Linkfarbe gut von der Farbe des restlichen Texts abhebt und dass sie zusätzlich zur Linkfarbe noch ein anderes optisches Merkmal haben. Dadurch stellt man sicher, dass auch Menschen mit Farbfehlsichtigkeit einen Link erkennen können. Und natürlich ist für sehende Tastaturnutzer ganz wichtig, dass erkennbar ist, ob ein Link oder ein Schalter den Fokus hat, sonst weiß man ja nicht, welchen Link/Schalter man aktiviert.
Navigation: einfache Menüführung
Welche Seitenstruktur würden Sie Webdesignern und Programmierern verbieten, obwohl sie beliebt ist? Wann wird eine Navigation zu verschachtelt – nicht technisch, sondern mental?
In Chatbots erscheinen die Antworten des Bots meist oberhalb des Eingabefeldes für die Fragen. Das ist aus Sicht von Screenreader-Nutzern widersinnig. Zudem ist es oft so, dass man, wenn man mit Screenreader den Link „Frag unseren Chatbot“ öffnet, oft gar nicht mitbekommt, dass sich am Bildschirm etwas verändert. Denn der Chatbot ist meist ganz am Ende der Seite in den Code eingebunden. Der Cursor bleibt aber bei dem gerade angeklickten Link.
Ich finde sogenannte Inhaltslider oder Karusselle äußerst mühsam. Sie bewirken bei mir gerade das Gegenteil von dem, was sie bewirken wollen: Sie stoßen mich ab, statt Interesse zu erregen. Übrigens ist all das im Sinne der Barrierefreiheit nicht erlaubt, aber es sind Features, die immer noch beliebt und sehr verbreitet sind.
Zur Navigation: Ich finde ein Menü mit mehr als zwei Ebenen ist auf jeden Fall schwer zu verstehen. Ebenso ist es mit manchen Beschriftungen in mehrstufigen Formularen – da gibt es z. B. zwei Schalter („weiter“ und „Daten sichern“). Heißt das dann, dass meine Daten nicht gesichert werden, wenn ich jetzt „weiter“ anklicke?
Wenn Sie eine Website per Tabulator und Screenreader erkunden: Woran erkennen Sie eine gute Informationsarchitektur im Sinne einer digitalen Barrierefreiheit?
- Ich muss die Seitenstruktur erkennen könne. Dafür braucht es Seitenbereiche (Menü, Inhaltsbereich, Fußbereich …) und Überschriften mit den passenden HTML-Tags.
- Die Reihenfolge, mit der ich Links und Schalter erreiche, muss Sinn machen. Z. B. ist es verwirrend, wenn man im Menü zuerst das Untermenü zum Servicebereich erreicht, bevor man den Hauptmenüpunkt „Servicebereich“ erreicht. Oder es macht keinen Sinn, wenn ich den Hilfetext zu einem Formularfeld erst nach dem Formularfeld erreiche.
Fotos und Videos: Alt-Texte und Untertitel
Bildbeschreibungen und Untertitel in Videos sind Vorgaben für die digitale Barrierefreiheit. Wie sollten diese Texte formuliert sein, damit sie tatsächlich ein Bild im Kopf vermitteln? Eine Formulierung wie „Person steht vor Gebäude“ greift zu kurz. Gelten diese Tipps auch für Bildbeschreibungen auf Social Media – manche stellen diese in den Textbeitrag?
Bilder sollten kurz, also mit max. 80–100 Zeichen, beschrieben werden. Wichtig ist, dass die Beschreibung mit dem Kontext zu tun hat. Ob eine „Person“ vor einem „Gebäude“ steht oder ein Mädchen vor einer Schule oder ein Mädchen in roter Regenjacke vor einer Schule oder Mia vor ihrer Volksschule – das hat mit dem Kontext zu tun, in dem das Bild gezeigt wird.
Hilfreich ist, die Frage: „Welche visuellen Merkmale haben mich bewogen, genau dieses Bild hier zu verwenden?“ Was auch noch wichtig ist: es muss eine sachliche Beschreibung sein, keine Interpretation. Z. B. „Hände des Teams liegen am Tisch, Finger zur Tischmitte gerichtet, die Fingerspitzen berühren sich.“ Und nicht: „Hände des Teams symbolisieren die Verbundenheit und gemeinsame Stärke.“
Wie schätzen Sie die derzeitige Qualität der Texte betreffend digitaler Barrierefreiheit ein? Auf was kommt es an bzw. welcher Irrtum sollte ausgeräumt werden?
Ich finde, dass gut verständliche, klare, konkrete Sprache, sprich kurze Sätze, möglichst keine Passivkonstruktionen, allen das Lesen erleichtert. Und ich glaube, dass diese Qualitäten des Texts sehr unterschätzt werden. Wir wissen, dass große Teile der Bevölkerung Probleme mit komplexeren Texten haben. Trotzdem nehmen wir allzu oft in Kauf, dass wir viele, viele Menschen „abhängen“ und frustrieren.
Eine Webseite beinhaltet mitunter stimmungsvolle Bilder. Gibt es Inhalte, die Sie lieber gar nicht beschrieben haben möchten?
Ich persönlich mag gern ausführliche Bildbeschreibungen – auch solche, die viel länger sind als 100 Zeichen. Aber da Bildbeschreibungen ja kurz sein sollen, sollte man möglichst versuchen, die Botschaft, die vermittelt werden soll, auf mehr als einem Sinneskanal zu vermitteln.
Dieses sogenannte „Mehr-Sinne-Prinzip“ ist überhaupt eine ganz wesentliche Grundlage für Barrierefreiheit. D. h. im konkreten Beispiel könnte man vielleicht auch im begleitenden Text versuchen, die Stimmung zu vermitteln.
Ein anderes Beispiel: In der aktuellen Anni-Albers-Ausstellung im Unteren Belvedere in Wien gibt es ein einleitendes Video mit Fotos der Künstlerin, das ein Gefühl für ihre Persönlichkeit schaffen will. Bei einer „Anders-sehen“-Führung mit Julia Haimburger hat die Kunstvermittlerin auf eine Bildbeschreibung verzichtet und stattdessen einige Zitate der Künstlerin vorgelesen. Damit war, meiner Meinung nach, der Zweck sehr gut erreicht.
Für mich persönlich gibt es keine Inhalte, z. B. Farbbeschreibungen, wo ich sagen würde: „Das will ich eigentlich gar nicht wissen“. Aber das ist natürlich individuell unterschiedlich. Eine gute Sache ist es, wenn man den Kontakt zu blinden Personen sucht und ihnen die Bildbeschreibungen vorlegt. Sie können normalerweise sehr gut beurteilen, ob das für sie eine sinnvolle Beschreibung ist.
Und ja: Bildbeschreibungen kann und sollte man auch auf Social Media machen.
Digitale Barrierefreiheit bei Formularen
An welcher Stelle verlieren Unternehmen die meisten blinden Nutzer – ohne es zu merken? Wie ist Ihre Meinung dazu?
Da gibt es viele Möglichkeiten. Ein Beispiel: Auf der Webseite der ÖBB gibt es ein Formular für eine Fahrplanabfrage. Dieses Formular steht nach einem – für Screenreader-Nutzer ärgerlichen und nicht bedienbarem – Karussell und vor der ersten mit Screenreader erkennbaren Überschrift. Wenn man nicht weiß, dass es da dieses Formular gibt, würde man es weder suchen noch finden. Wenn man es weiß, ist es extrem mühsam, es zu finden. Ich weiß es zwar, bin aber nicht so oft auf dieser Webseite, sodass ich mir die Platzierung nicht gemerkt habe, und war, als ich es vor ein paar Tagen wieder gesucht habe, nach entnervenden Bemühungen schon überzeugt, dass man es entfernt hätte.
- Man muss also wissen, dass es auf dieser Webseite ein bestimmtes Formular gibt und es muss einfach sein, es zu finden. Das ist z. B. der Fall, wenn es vor dem oben genannten Formular eine Überschrift „Fahrplanabfrage“ gibt. Das kostet das Unternehmen genau gar nichts und würde die Nutzung extrem erleichtern.
- Die Eingabefelder und Schalter müssen sinnvoll beschriftet sein. Wenn es Hilfetexte zu den Eingabefeldern gibt, sollten diese am besten mit aria-describedby mit den jeweiligen Eingabefeldern verbunden sein, weil man sonst mit TAB von Eingabefeld zu Eingabefeld springt und den Text dazwischen nicht lesen kann.
- Die Reihenfolge, mit der man die Felder erreicht, muss sinnvoll sein. Wenn ich den Schalter „zahlungspflichtig bestellen“ erreiche, bevor ich das Kontrollfeld „Ich akzeptiere die AGB“ klicken kann, wird das nie was mit meinem Einkauf.
- Wenn es Pflichtfelder gibt, so muss das auch für Screenreader erkennbar sein, also nicht nur ein Sternchen vor dem Feld.
- Eine hervorragende Möglichkeit, potenzielle Käufer zu vergraulen, ist es, bei fehlerhafter Eingabe (z. B. einem falschen Datumsformat) keine verständlichen Fehlermeldungen zu geben. Da schmeissen sehr viele Leute die Nerven weg.
- Selbstverständlich müssen alle Formularelemente mit Tastatur erreichbar und bedienbar sein und die Anforderungen an visuelle Barrierefreiheit erfüllen.
Welcher kleine Eingriff hätte aus Ihrer Sicht bei den meisten Websites den größten „Return of Invest (ROI)“ betreffend digitaler Barrierefreiheit?
Karussell und Datums-Widget rausnehmen. 😉
Wie erkennt man, dass ein Formular für blinde Nutzer gebaut wurde?
Eine Sache, die das Ausfüllen von Formularen – vor allem für Menschen mit Lernschwierigkeiten – sehr erleichtert: Man kann Eingabefelder, mit denen persönliche Daten (Vorname, Nachname, E-Mail-Adresse, Postadresse, …) abgefragt werden, mit einem autocomplete-Attribut versehen. Wenn man diesem autocomplete-Attribut den richtigen Wert gibt, können die Felder automatisch ausgefüllt werden, unter der Voraussetzung, dass die Benutzer diese Daten in einem Browser-Profil hinterlegt haben. Das kann allen Nutzenden einige Mühe beim Ausfüllen ersparen.
Ausblick: Verbesserungen für alle Nutzer
Sind Sie auf sogenannte moderne Designtrends gestoßen, die aus Ihrer Sicht die digitale Kultur verschlechtern?
Wahrscheinlich bin ich zu wenig auf ganz modernen Webseiten oder auf Social Media unterwegs, um das gut beantworten zu können. Karusselle und „schwebende Inhalte“ (Overlays) empfinde ich eindeutig als Verschlechterung der digitalen Kultur.
Erwähnen möchte ich hier auch den Trend, der Herausforderung der barrierefreien Gestaltung dadurch zu begegnen, dass man einfach ein Accessibility-Overlay oder -Plugin installiert. Diese Tools beheben bestehende Probleme nur in geringem Ausmaß. Sehr oft schaffen sie neue, weil es auf unerwünschte Weise mit der unterstützenden Software wie Screenreader oder Vergrößerungssoftware zu Überlagerungen kommt.
Ich rate dringend von dieser vermeintlich einfachen Lösung ab, die zudem keinerlei rechtliche Sicherheit für die Unternehmen gibt.
Die gesetzliche Vorgabe gilt für bestimmte Unternehmen seit Juni 2025. Was hat sich aus Ihrer Sicht verändert? Wo sehen Sie Nachholbedarf?
Ich glaube, die Aufmerksamkeit und Sensibilität für dieses Thema ist doch deutlich gestiegen. Es gibt noch immer viele Barrieren, von denen viele mit geringem Aufwand zu beheben wären.
Nachholbedarf sehe ich bei der Einbeziehung von Menschen mit Behinderungen in die Testung, sowohl als Mitarbeitende in Unternehmen wie auch z. B. als externe Screenreader-Testende. Beim Blinden- und Sehbehindertenverband Österreich gibt es die Koordinationsstelle für Barrierefreiheit, die hier weiterhelfen kann: barrierefrei@blindenverband.at
Glauben Sie, dass die digitale Barrierefreiheit bald stärker als Qualitätsmerkmal bewertet wird? Sollten auch gesetzlich ausgenommene Unternehmen sich mit dem Thema beschäftigen?
Ja, das glaube ich. Denn sehr viele Merkmale einer Webseite, die für Menschen mit Behinderungen gut nutzbar ist, nützen allen Besucher dieser Webseite. Tatsächlich denke ich, dass klare, gut strukturierte Webseiten sich als Wettbewerbsvorteil erweisen.
Welche Benefits ergeben sich aus deren Einhaltung bzw. Annäherung für sehende Menschen?
Alle Menschen schätzen es, wenn sie die Infos, die sie suchen, rasch finden, wenn sie Formulare, egal ob bei Behörden oder im Rahmen eines Kaufprozesses in einem Webshop, ausfüllen können, ohne Zeit zu verlieren und sich die Haare raufen zu müssen vor lauter Frust. Es gibt nichts, was sehende Menschen an der Barrierefreiheit behindert. Barrierefreiheit hat nur Gewinner.
Das ist wie bei der Treppe und der Rampe. Eine Treppe können Menschen mit Kinderwagen, Menschen mit Rollator, Menschen im Rollstuhl nicht bewältigen. Eine Rampe können alle verwenden.
Weiterführender Artikel:
Barrierefrei schreiben – vier Schreibroutinen für Webseiten und Onlineshops