Zurück

How to a11y: Vom Design zu barrierefreien Webseiten

Workshop, 20. Juni 2023

In diesem Workshop lernen die Teilnehmer:innen die Prinzipien von barrierefreien Webseiten kennen. Beginnend mit einer Einführung über die Wichtigkeit der barrierefreien Webinhalte werden wir die aktuellen Accessibility-Richtlinien vorstellen, ebenso wie ihre praktische Anwendung in verschiedenen Aspekten wie barrierefreies Design, semantisches HTML, Keyboard-Accessibility und weitere.

Die Teilnehmer:innen können ihr neuerworbenes Wissen direkt anwenden: Wir gehen von einigen (echten) Designs aus und entwickeln gemeinsam semantisches HTML und machen uns dann Gedanken darum, wie wir mit aria-Attributen die Barrierefreiheit weiter verbessern können.

Vorkenntnisse

Der Workshop richtet sich sowohl an Webentwickler:innen, die noch wenig oder keine Erfahrung mit Barrierefreiheit haben, als auch an solche, die ihre Kenntnisse erweitern wollen.
Grundkenntnisse in Webentwicklung mit ihren Kerntechnologien: HTML, CSS und JavaScript.
Vor allem aber die Motivation, mehr über Barrierefreiheit im Web zu lernen.

Lernziele

Am Ende des Workshops werdet ihr gewappnet sein für die Welt der Web-Accessibility.
Für eure zukünftigen Projekte werdet ihr die Gründe, Richtlinien und viele praktische Techniken erlernen, um Designvorgaben in barrierefreie Webseiten zu übersetzen.

Agenda

Diese Agenda ist nur ein grober Rahmen. Im Workshop selbst wollen wir euch die Grundlagen von Barrierefreiheit vermitteln, was je nach Vorwissen unterschiedlich lang dauern kann und unterschiedliche Schwerpunkte haben wird. Auch in den Praxisphasen wollen wir auf eure Fragen, Ideen und Wünsche eingehen. Als Orientierung könnte der Tag aber so ablaufen:

ab 09:00 Uhr: Registrierung und Begrüßungskaffee
10:00 Uhr: Gemeinsame Grundlagen schaffen

Wieso eigentlich Barrierefreiheit
Das Allerwichtigste, was du wissen musst, um barrierefreie Webseiten zu bauen, in 10 Minuten
Semantisches HTML
ARIA

In die Praxis: vom Design zu barrierefreien Komponenten
12:30 - 13:30 Uhr: Mittagspause
13:30 - 15:00 Uhr: In die Praxis: Eure eigenen Beispiele
15:00 - 15:15 Uhr: Kaffeepause
15:15 - 16:15 Uhr: Spezialfragen

zum Beispiel Keyboard-Accessibility
eure Fragen

16:15 - 16:30 Uhr: Kaffeepause
16:30 - 17:00 Uhr: Rückblick und Ausblick

Was haben wir gelernt?
Wie können wir das Wissen vertiefen?
Was gibt es noch zu lernen?
Eure weiteren Fragen

ca. 17:00 Uhr: Ende

Technische Anforderungen

Für die Teilnahme an diesem Workshop braucht ihr nicht viel:

einen Laptop
mit einer IDE eurer Wahl, zum Beispiel VS Code oder Webstorm
und einigermaßen aktuellen Installationen von Node (18+) und npm (8+)
und einem aktuellen Browser

Zur Not reicht auch ein Browser, in dem eine Online-IDE wie Code codesandbox.io, stackblitz.com oder auch codepen.io läuft.

Falls ihr ein Gerät eurer Firma verwendet, überprüft vorher bitte, ob eines der folgenden, gelegentlich vorkommenden Probleme bei euch auftreten könnte:

Workshop-Teilnehmer:in hat keine Administrator-Rechte.
Corporate Laptops mit übermäßig penibler Sicherheitssoftware
Gesetzte Corporate-Proxies, über die man in der Firma kommunizieren muss, die aber in einer anderen Umgebung entsprechend nicht erreicht werden.

Speaker

Tanja Ulianova is a software engineer with a passion for solid software architecture and smooth user experience. Since 2017 she has been trying to make the web a more inclusive space by advocating for web a11y. Her other favourite topics are browser rendering and performance. She works at inovex GmbH as a full stack web developer in a technical leadership role, building and optimising high-scale web apps.

Matthias Reuter ist Webentwickler mit dem Fokus auf UX Engineering. Er macht alles, was mit Webfrontend-Entwicklung zu tun hat, von semantischem HTML über wartbares CSS bis zu elegantem JavaScript. Mag sauberen Code und schreibt gerne Tests.

Jetzt Tickets sichern

enterJS-Newsletter

Du möchtest über die enterJS
auf dem Laufenden gehalten werden?

Anmelden