Vielen Dank an alle Beteiligten für eine tolle enterJS 2024! Im Herbst geht es weiter mit Online-Events zu React und Barrierefreiheit im Web

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


Gold-Sponsor

Zalari

Silber-Sponsoren

adesso
Okta
R+V

enterJS-Newsletter

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

 

Anmelden