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, Bern


Ich 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.