Komplexe und barrierefreie Web-Komponenten (mit simplem HTML)
Softwareentwicklung mit Open Source
07.09.2022
9:00 â 17:00 Uhr
BFH - Berner Fachhochschule
Max. Teilnehmer:Â 30
Einleitung
Der Standard fĂŒr barrierefreie Rich-Internet-Anwendungen (ARIA) enthĂ€lt prĂ€zise Anforderungen an die barrierefreie Umsetzung zahlreicher interaktiver User Interface (UI) Patterns. Die KompatibilitĂ€t derselben ist jedoch je nach Browser und Screenreader sehr unterschiedlich. Daher ist es damit oft frustrierend, barrierefreie browser-, plattform- und gerĂ€teĂŒbergreifende Web-Komponenten zu erstellen.
Statt ARIA zu verwenden, ist es auch möglich, die meisten UI Patterns zu erstellen, indem man sie in traditionelle HTML-Formular-Steuerelemente aufteilt, diese mit etwas JavaScript miteinander verknĂŒpft, sie wie gewĂŒnscht visuell gestaltet und nur hier und da ein kleines bisschen ARIA zum Aufpolieren hinzufĂŒgt. Das Ergebnis sind Komponenten, die bei ihrer FunktionalitĂ€t auf grundsolides Browser-Standardverhalten bauen, und deshalb inhĂ€rent barrierefrei sind.
In meinem Vortrag zeige ich, wie man mit einfachem HTML, CSS und JavaScript anspruchsvolle Komponenten erstellt (etwa durchsuchbare Single- und Multi-Selects, Tablisten, Datepicker oder Akkordeons), die mit allen Browsern und assistiven GerĂ€ten vollstĂ€ndig kompatibel sind (z.B. Screenreader). Als solche funktionieren sie wirklich fĂŒr alle – und sind extrem effizient in Bezug auf Performance und Wartung.
Egal ob Sie barrierefreie Web-Komponenten erstellen wollen oder einfach nur an schnellen und soliden Lösungen interessiert sind: Ich bin ĂŒberzeugt, dass diese einfache Idee einen bemerkenswerten Einfluss darauf haben wird, wie Sie in Zukunft interaktives HTML schreiben.
Programm
In der ersten HĂ€lfte des Workshops werde ich die oft mangelhafte Barrierefreiheit vieler bekannter Single- und Multi-Select-Komponenten aufzeigen (z.B. Material UI, Tom-Select oder Select2); dies unter Verwendung eines Desktop Screenreaders (NVDA). AnschlieĂend zeige ich die bahnbrechende Idee auf hinter der Verwendung von traditionellem HTML fĂŒr die Erstellung von nicht-standardmĂ€Ăigen interaktiven Nutzungsmustern, indem ich z.B. ein Akkordeon, einen Datepicker, eine Tabliste oder ein Karussell vorfĂŒhre – alle implementiert mit einfachen HTML-Formular-Steuerelementen.
In der zweiten HÀlfte erklÀre ich dem Publikum, wie man eines der komplexesten UI Patterns barrierefrei umsetzt, nÀmlich ein durchsuchbares Single- und Multi-Select, eben indem man dieses zunÀchst in seine grundlegenden HTML-Formular-Steuerelemente zerlegt und diese dann mit JavaScript (und ein wenig ARIA, falls erforderlich) verbindet. Anhand von vier vordefinierten Meilensteinen erarbeiten wir dazu in Kleingruppen am Computer eigene Lösungen. Der weitere Einsatz von Screenreadern wird die geleistete Arbeit unter Beweis stellen. Zudem können die Teilnehmenden ihre Lösungen selber mit dem Screenreader auf ihrem Smartphone testen.
Kursziel
Am Ende des Workshops werden die Teilnehmenden verstanden haben, dass viele interaktive Website-Elemente auf sehr einfache Weise mit traditionellen HTML-Formular-Steuerelementen implementiert werden können. Dies fĂŒhrt zu groĂartiger Benutzerfreundlichkeit, ZugĂ€nglichkeit, Performance und saubererem, schlankem Code, welcher wiederum leicht verstĂ€ndlich und entsprechend zu warten ist.
Die Teilnehmenden werden zudem erste Schritte machen in der Benutzung von Screenreadern, was ihnen den Zutritt in diese oftmals fremd erscheinende Welt von Menschen mit visuellen BeeintrÀchtigungen ermöglicht. Sie werden daraufhin Barrierefreiheit nicht mehr als etwas rein Technisches begreifen, sondern es wird sich ihnen eine komplett neue Wahrnehmung von digitaler Information eröffnen. Dies fördert nicht nur Empathie mit den Betroffenen, sondern ermöglicht erst eine ganzheitliche Sichtweise auf moderne Telekommunikation.
Adressaten
User Experience (UX) Leute, Frontend-Cracks, Accessibility-Interessierte… Eigentlich alle, denen die Erstellung von sauberen funktionierenden Webseiten am Herzen liegt – ein wichtiger Schritt Richtung Inklusion!
Voraussetzungen
Grundlegendes VerstÀndnis von HTML, CSS und JavaScript.
Keine Vorkenntnisse zu Barrierefreiheit notwendig.
Infrastruktur
Am besten Laptop mitbringen, um an der eigenen Implementierung einer barrierefreien Web-Komponente arbeiten zu können (Kleingruppen). Zudem ein Smartphone (iOS oder Android), um den integrierten Screenreader auszuprobieren.
Referenten
Josua Muheim
Nothing, BernIch bin ein erfahrener Full-Stack-Webentwickler und gestalte seit ~15 Jahren professionelle Websites. Im Jahr 2014 begann ich bei "Access for all" (http://access-for-all.ch/), der Schweizer Stiftung fĂŒr die Nutzung von Technologie fĂŒr Menschen mit Behinderungen, zu arbeiten, wo ich Teil eines inklusiven Teams war, wo ich u.a. den "Accessibility Developer Guide" (https://www.accessibility-developer-guide.com/) initiierte. Seit 2021 bin ich Teil der Nothing AG (http://nothing.ch/) in der NĂ€he von Bern, wo ich den Auftrag habe, die Barrierefreiheit sowohl innerhalb unserer Organisation als auch in unseren Projekten vorantreiben.