A presentation at Technikum Wien UX Summit in in Vienna, Austria by Manuel Matuzovic
Das U in UX Manuel Matuzović, Technikum Wien UX Summit, 9. Mai 25
Hallo, mein Name ist Manuel Matuzovic. Ich bin Frontend Developer, Berater, Auditor, und Lehrer aus Wien, lebe aber aktuell in Graz.
accessibility-cookbook.com, matuzo.social, htmhell.dev, matuzo.at, manuel@matuzo.at
Ich arbeite für unterschiedlichste Firmen als Berater mit der Spezialisierung Web Barrierefreiheit. Ich unterrichte auch an verschiedenen Instituten, wie aktuell an der FH Joanneum in Graz oder der Johannes Kepler Universität in Linz. Ich spreche auch gerne auf Konferenzen und Meetups.
Ich habe auch ein Buch geschrieben, das sich mit diesem Thema beschäftigt. Es heißt Web Accessibility Cookbook und ist im O’Reilly Verlag erschienen.
accessibility-cookbook.com
EAA Ich habe momentan sehr viel zu tun, was hauptsächlich an drei Buchstaben liegt: EAA. Bevor ich erkläre, wofür das Akronym EAA steht, sowohl buchstäblich als auch gesellschaftlich, möchte ich kurz die Gesetzeslage in Österreich hinsichtlich der Barrierefreiheit skizzieren.
In Österreich haben wir eine Reihe von Gesetzen, die Barrierefreiheit vorschreiben beziehungsweise Diskriminierung verbieten.
Artikel 7 Bundes-Verfassungsgesetz: ”Alle Staatsbürger sind vor dem Gesetz gleich. Vorrechte der Geburt, des Geschlechtes, des Standes, der Klasse und des Bekenntnisses sind ausgeschlossen. Niemand darf wegen seiner Behinderung benachteiligt werden.
Bundes-Behindertengleichstellungsgesetz: Dieses Gesetz beschreibt unter anderem die Anforderungen an Barrierefreiheit in Bezug auf Systeme der Informationsverarbeitung. Als barrierefrei gelten diese dann, wenn sie für Menschen mit Behinderung in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne Hilfe nutzbar sind. Da sich das BGStG nicht speziell mit dem Internet beschäftigt, gibt es auch keine rechtlich verbindlichen Standards vor.
Das E-Government-Gesetz regelt unter anderem, dass der barrierefreie Zugang für behinderte Menschen zu Informationen und Dienstleistungsangeboten der öffentlichen Verwaltung durch die Einhaltung von internationalen Standards gegeben sein muss. Als Vorgabe für barrierefreies Webdesign verweist es auf die Richtlinie WCAG (Web Content Accessibility Guidelines) des World Wide Web Consortium.
4.Die Richtlinie (EU) 2016/2102 des Europäischen Parlaments und des Rates vom 26. Oktober 2016 über den barrierefreien Zugang zu den Websites und Apps öffentlicher Stellen schreibt die barrierefreie Gestaltung von digitalen Angeboten der öffentlichen Hand in den Mitgliedstaaten der EU vor. In Österreich wurde die Richtlinie auf Bundesebene in Form des Web-Zugänglichkeits-Gesetzes und auf Bundesländer-Ebene in Form von neun entsprechenden Landesgesetzen übernommen. In Wien zum Beispiel in Form des Wiener Antidiskriminierungsgesetz.
EAA steht also für European Accessibility Act.
European Accessibility Act. Harmonisierung der Zugänglichkeitsstandards in den Mitgliedstaaten. Ab 28. Juni 2025 in Kraft.
Davon ist nicht der ganze private Sektor betroffen, sondern nur bestimmte Dienstleistungen und Produkte.
Dienstleistungen • Elektronische Kommunikationsdienste (Telefonie, Messenger, etc.) • Elemente von Personenverkehrsdiensten wie bspw. Websites, Apps, elektronische Tickets und interaktive Selbstbedienungsterminals • Bankdienstleistungen • Software für E-Books • Dienstleistungen im elektronischen Geschäftsverkehr
Dienstleistungen • Web-Shops und Apps im E-Commerce • Hotel- und Reiseportale, auf denen Buchungen getätigt werden können • Online-Termin-Buchungs-Tools • Verlage, die digitale Publikationen anbieten • Webseiten, auf denen digitale Mitgliedschaften und Abonnements abgeschlossen werden können
Hardware • Hardwaresysteme inkl. Betriebssysteme für PCs • Selbstbedienungsterminals wie bspw. Geldautomaten, Fahrkartenautomaten • Verbraucherendgeräte, die für elektronische Kommunikationsdienste verwendet werden (z.B. Mobiltelefone) • Verbraucherendgeräte, die für den Zugang zu audiovisuellen Mediendiensten verwendet werden (z.B. interaktive Fernseher) • E-Book-Lesegeräte
Ausnahmen
• Aufgezeichnete zeitbasierte Medien (z.B. Video- und Audiodateien), die vor dem 28. Juni 2025 veröffentlicht wurden • Dateiformate von Büro-Anwendungen (z.B. PDFs), die vor dem 28. Juni 2025 veröffentlicht wurden; • Digitale Karten, wenn eine zugängliche Alternative verfügbar ist • Inhalte von Dritten, die von dem betreffenden Wirtschaftsakteur weder finanziert oder entwickelt werden noch deren Kontrolle unterliegen • Inhalte von Websites und mobilen Anwendungen, die als Archive gelten und dadurch ihre Inhalte nach dem 28. Juni 2025 weder aktualisiert noch überarbeitet werden. • Unternehmen mit weniger als 10 Mitarbeitern und 2 Millionen Euro Umsatz • B2B Es gibt auch ein paar Ausnahmen:
Viele von uns haben schon Erfahrung mit EU-Richtlinien und meist waren das keine guten. Ich möchte nur an die DSGVO erinnern. Die Situation kann man nur als Shit Show beschreiben, keiner hat sich ausgekannt, es wurde sehr viel gefährliches Halbwissen vermittelt und viel Druck ausgeübt. Was wir bekommen haben sind meist Lösungen, die voller Dark Pattern sind, oft nicht richtig funktionieren und nicht barrierefrei sind. Deswegen kann ich mir vorstellen, dass es einige Firmen gibt, die erst abwarten bevor sie etwas tun.
Viele sind aber nervös. Das hat zwei Gründe:
Die meisten Websites, die ich mir ansehe, bewegen sich irgendwo zwischen uncool und sehr schlecht. Jetzt könnte man natürlich sagen, dass dieser Eindruck beeinflusst ist durch die Tatsache, dass es mein Job ist, schlechte Seiten zu testen. Das stimmt zum Teil, aber jene Websites, die angeben barrierefrei zu sein, sind es meistens auch nicht.
Zum Glück gibt es aber auch objektive Zahlen, die das bestätigen. Die NGO WebAim veröffentlicht jährlich einen Report namens “The WebAim Million”. Sie testen die Barrierefreiheit von den Top 1 Million Websites mit dem automatisierten Testing Tool “Wave”, werten die Daten aus und machen eben den Bericht.
webaim.org/projects/million
In dem Bericht sagen sie uns beispielsweise, dass sie automatisch erkennbare Fehler auf 49.8% der getesteten Websites gefunden haben.
Oh, sorry, ich habs ein bisschen mit den Zahlen. 94,8% sind es natürlich.
Das ist aus zwei Gründen sehr problematisch.
Sie teilen auch die sechs häufigsten Fehler mit uns: mangelnder Kontrast, fehlende Bildbeschreibungen, fehlende Textalternativen für Formularelemente, leere Links, leere Buttons und die fehlende Auszeichnung der natürlichen Sprache. Diese top sechs Fehler sind jedes Jahr gleich, obwohl es sich dabei um Basics handelt, die vermeidbar sind.
webaim.org/projects/million/#errors
Sie teilen diese 1 Million Sites auch in Kategorien ein. Die durchschnittliche Anzahl an Fehlern pro Seite liegt bei circa 50. Sie reihen die Kategorien nach der Differenz zu diesem Durchschnittswert.
Die Kategorie, die am meisten mehr Fehler als die durchschnittliche Seite hatte, mit einem Plus von 39,8%, ist Shopping.
Sie machen außerdem noch eine Umfrage mit Screen Reader Nutzer:innen und dabei fragen sie die problematischsten Elemente in einer Seite für diese Nutzer:innen ab. Mit weitem Abstand ganz oben ist CAPTCHA.
Jegliche Form von visuellem CAPTCHA ist problematisch, weil sie oft eine gute Sehkraft bedingen und kognitiv herausfordernd sind.
Nicht-visuelle Alternativen sind oft noch schlimmer. Hier ein Beispiel einer MathematikAufgabe, die ich auf discord.com bekommen habe: Lucy has six brothers and she also has 11 sisters. What is the number of siblings that lucy’s brother has? Für manche lösbar, für einigen nicht oder zumindest nicht einfach und ganz besonders nicht in stressigen Situationen.
Jetzt könnte man sich fragen „Was hat das mich zu interessieren als UXer? Ich bin nicht für Barrierefreiheit zuständig.“. Da wäre ich mir nicht so sicher. Sehen wir uns mal ein paar Definitionen des Begriffs UX an.
A user experience is the holistic relationship — encompassing perceptions, emotions, and interactions — between a person and a product, service, or company. NN / g
https://www.nngroup.com/articles/what-is-user-experience/
User experience refers to the singular and accumulated experiences that occur for users as a consequence of them interacting with an object in a given context. Irgendein Blogpost auf UX Collective
https://uxdesign.cc/we-have-lost-track-of-what-ux-actually-means-8d55259dacb0
Die User Experience beschreibt einen ganzheitlichen Ansatz bei der Nutzung. Es geht, je nach Anwendungsbereich, nicht nur darum, dass Nutzer*innen sich schnell zurechtfinden und zum Ziel kommen, sondern auch darum, währenddessen positive Gefühle zu erfahren. Technikum Wien
https://academy.technikum-wien.at/ratgeber/was-ist-user-experience/#:~:text=Die User Experience (oder kurz,*innen-Erfahrung“ übersetzt.
In keiner der Definitionen wird Barrierefreiheit explizit erwähnt, aber implizit.
“perceptions, emotions, and interactions between a person and a product”
“users interacting with an object in a given context”
“ganzheitlichen Ansatz - “positive Gefühle zu erfahren”
Und ich frage mich, wie positiv Gefühle sind, wenn ich es nicht schaffe, ein Produkt in den Warenkorb zu legen. Ich frage mich, wie positiv Gefühle sind, wenn ich mich auf einer Seite nicht einloggen kann. Ich frage mich, wie positiv Gefühle sind, wenn ich auf Social Media bin, dort Bilder gepostet werden und es aber keine Tex Alternativen gibt.
Die Gefühle sind vermutlich nicht sehr gut.
Barrierefreiheit ist ein sehr großer Teil der User Experience.
Es heißt immerhin User Experience…
… und nicht Mobile and Desktop User Experience.
In 17 Jahren als Frontend Developer ist es noch nie passiert, dass eine UX:erin zu mir gekommen ist und gemeint hat “Folgendes habe ich mir für die Nutzung mit dem Screen Reader überlegt”. In 17 Jahren ist es noch nie passiert, dass eine UI-Designerin zu mir gekommen ist und gesagt hat “Folgendes habe ich mir für KeyboardNutzerinnen überlegt”.
Wir wissen nicht, dass nicht nur die Gen-Z Smartphones nutzt, sondern auch deutlich ältere Generationen.
youtu.be/Hui87z2Vx8o
Wir wissen nicht, dass es situationsbedingte, temporäre und permanente Einschränkungen gibt.
youtu.be/93UgG72os8M
Wir wissen nicht, dass Keyboard-Nutzung nicht unbedingt heißt, dass jemand ein Keyboard mit seinen Händen benutzt.
youtu.be/93UgG72os8M
Wir wissen nicht, das Nutzer:innen unbedingt eine Computertastatur benutzen müssen, wenn die Rede von Keyboard Accessibility ist.
youtu.be/GQKEE9nI1lk
Wir wissen nicht, dass blinde Menschen Smartphones verwenden.
youtu.be/8Rn5pXCdZWU
Ich wissen nicht, das Screen Reader Nutzer:innen auch Braillezeilen verwenden können.
youtu.be/SlxIEPEC_Qc
Wir wissen nicht, das ein Mauszeiger nicht unbedingt mit der Hand gesteuert werden muss, sondern auch mit dem Kinn oder Mund.
youtu.be/fFi5_ctNFl0
Und das ist kein Diss gegen dieses Studium, ich kenne das Curriculum nicht. Zumindest weiß ich aber, dass das Thema in diesem Haus wichtig ist.
“Ein Kernauftrag der UX ist es, alle Menschen in den Gestaltungsprozess miteinzubeziehen!” Benedikt Salzbrunn
Die Frage ist jetzt, was können wir machen. Diese Frage zu beantworten ist sehr schwierig, weil die Situation schon seit 30 Jahren schlecht ist. Es gibt aber Dinge, die lösbar sind.
Ich unterrichte seit 15 Jahren. Wenn ich irgendwohin eingeladen werde, dann meistens für 1 - 2 Stunden, manchmal vielleicht für einen Tag, um über Barrierefreiheit zu reden. Das reicht nicht. Barrierefreiheit muss in jeden einzelnen Unterricht eingewoben sein. Wenn ich über HTML rede, dann rede ich natürlich über semantisches HTML. Wenn ich über CSS rede, dann rede ich hauptsächlich über Styling und Layout, aber ich thematisiere auch die Eigenschaften, die sich auf Barrierefreiheit auswirken. Wenn ich über JavaScript rede, rede ich nicht vorrangig über Barrierefreiheit, thematisiere aber natürlich Clienseitiges Routing und seine Auswirkungen. An unseren Schulen und Hochschulen muss sich unbedingt etwas tun.
Viele von uns haben sich aber ihr Wissen auto-didakt angeeignet. Da kommen all jene in die Verpflichtung, die Artikel schreiben, Vorträge halten oder sonst irgendwie Wissen teilen. Wir müssen mehr über Barrierefreiheit reden und sicherstellen, dass unsere Beispiele und Demos auch barrierefrei sind. Außerdem müssen Veranstalter:innen von Meetups und Konferenzen sicherstellen, dass es immer wieder auch Vorträge über Barrierefreiheit gibt.
Es geht aber nicht nur um Schulen und Content-Creator, sondern auch um Bewusstseinschaffung im Unternehmen. Dabei spielen jene eine wichtige Rolle, die in einer Productowner oder -Manager-Rolle sind, weil sie oft das Bindeglied zwischen den Umsetzenden und den Entscheider:innen sind. Es gibt eine Reihe von Dingen, die sie machen können.
Sie müssen sich mit dem Thema vertraut machen, wissen was bei Barrierefreiheit ist, welche Richtlinien es gibt, welche Gesetze, über Soft- und Hardware Bescheid wissen, und so weiter.
Mit dem Wissen müssen Sie zu Befürwortern werden und das Thema immer wieder auf den Tisch bringen.
Dann ist Aufklärung wichtig, vor allem auf der Entscheider:innen-Ebene. Barrierefreie digitale Angebote müssen nicht hässlich, einfach und unbezahlbar sein.
Barrierefreiheit muss priorisiert und von Anfang an mitgedacht werden noch bevor eine erste Zeile Code geschrieben worden ist und noch bevor eine erste Linie gezeichnet worden ist.
Dementsprechend muss rechtzeitig geplant werden.
Ich kann 2025 keinen Talk machen ohne über KI zu sprechen. Deswegen die Frage: “Kann das nicht AI für uns übernehmen?”
Die Antwort ist „Nein“.
Hier sieht man beispielsweise ein Schwarz-Weiss Photo, das in den 50-60 Jahren während des Civil Rights Movement in den USA entstanden ist. Es ist ein junger Schwarzer man zu sehen der von einem Polizisten mit einer Hand festgehalten wird. In der anderen Hand hält er eine Hundeleine. Der Hund attackiert den Mann. Daneben steht ein weiterer Mann mit Hund. Im Hintergrund sind weitere schwarze Menschen auf der Strasse zu sehen, die irritiert aussehen. Ich weiß nicht, was da passiert ist. Ich weiß nicht, ob der Polizist den Hund auf dem Mann losgelassen hat oder ob er den Hund zurück hält. Mir fehlt hier Kontext und Hintergrundwissen um ausreichend beschrieben zu können. Meine Beschreibung ist nicht perfekt, aber okay würd ich sagen. MS PowerPoint, das auch ein Bildbeschreibungstool hat, hat das Bild beschrieben mit “Ein Polizist hilft einer person mit einem Hund”. Das passt halt wirklich absolut gar nicht und kann sehr problematisch sein. Zugegeben hat ChatGPT hingegen eine ausgesprochen detaillierte Beschreibung geliefert, aber es konnte mir auch den Namen des Photographen sagen. Es kannte wohl also das Bild. Wichtig ist für uns nur, KI kann uns bei Bildbeschreibungen nicht ablösen sondern nur unterstützen, wenn wir gute Beschreibungen wollen.
Ein Weiteres Beispiel für KI-basierte Tools sind sogenannte Overlays. Widgets, die man auf einer Website einbinden kann, die versprechen die Barrierefreiheit zu verbessern. Zur erkennen sind die an einem Button mit Strichmännchen. Klickt man den Button kann man Kontraste anpassen, Schriftgröße erhöhen, etc. Man kann das Tool auch Dinge automatisch verbessern lassen bzw. machen das auch sehr viele Tools schon automatisch. Ein Beispiel dafür findet man auf der Website des Österreichischen Paralympischen Committees. Diese Website ist nicht barrierefrei, was sehr überraschend war für mich. Jedenfalls kann man mit der Maus auf den Burger-Button klicken. Dann öffnet sich ein Menü. Die Menüpunkte haben Untermenüpunkte, die aufklappen. Wenn ich dasselbe versuche mit dem Keyboard zu machen, ohne dass das Tool eingebunden ist, dann komme ich nicht weit, weil der Button kein Button-Element in HTML ist sondern einfach nur ein generisches Element, ein div. Wenn man dasselbe mit dem Keyboard macht und das Tool aktiviert ist, kickt die KI rein und fügt Skip-Links hinzu, was super ist. Es macht den Button auch zugänglich mit dem Keyboard, was er vorher nicht war, aber aus irgendeinem Grund bekommen die Submenüs die selbe Hintergrundfarbe wie der Text wenn man das Keyboard verwendet.
Vielen Dank! ❤ accessibility-cookbook.com matuzo.social htmhell.dev matuzo.at manuel@matuzo.at
Und damit verabschiede ich mich und bedanke mich und wünsche noch viel Spaß an diesem besonderen Tag. Danke schön.
Manuel Matuzovic nimmt den European Accessibility Act zum Anlass, um über Barrierefreiheit im Web und unsere Verantwortungen als jene, die an Designprozessen beteiligt sind, zu sprechen.
for free. You
can too.