
Bitte wählen Sie die Bereiche, die Sie exportieren möchten:
Schulung Barrierefreiheit für Webentwickler - zugängliche UI umsetzen und testen
Schulungsformen
Offene Schulung
- 2 Tage oder 4 halbe Tage
- 8 gesicherte Termine
- Köln / Online
- 1.440,00 p. P. zzgl. MwSt.
- Dritter Mitarbeitende kostenfrei
- Learning & Networking in einem. Garantierte Durchführung ab 1 Teilnehmenden.
Inhouse-/Firmenschulung
- 2 Tage - anpassbar
- Termin nach Wunsch
- In Ihrem Hause oder bei der GFU
- Preis nach Angebot
- Lernumgebung in der Cloud
- Inhalte werden auf Wunsch an die Anforderungen Ihres Teams angepasst.
Individualschulung
- 2 Tage - anpassbar
- Termin nach Wunsch
- In Ihrem Hause oder bei der GFU
- Preis nach Angebot
- Lernumgebung in der Cloud
- 1 Teilnehmender = Fokus aufs Fachliche und maximaler Raum für individuelle Fragen.
Beschreibung
An einer vorbereiteten kleinen Weboberfläche bearbeiten Sie in Visual Studio Code zusammenhängende Praxisaufgaben mit HTML, CSS und JavaScript. Sie kombinieren automatische Prüfungen mit Tastatur-, Zoom- und angeleiteten Screenreader-Tests. Die Umsetzungsmuster bleiben frameworkneutral und lassen sich fachlich auf Ihre vorhandenen Oberflächen übertragen; eine konkrete Integration in Ihre Unternehmensarchitektur ist nicht Bestandteil des Seminars.
Von der Anforderung bis zum Review üben Sie, Barrierefreiheit als gemeinsame Produktqualität in Backlog, Akzeptanzkriterien und Definition of Done zu verankern. WCAG 2.2 dient als technische Orientierung; gesetzliche und normative Anforderungen werden eingeordnet.
Erweitern Sie Ihr Wissen mit einem weiteren Barrierefreie Gestaltung & Kommunikation Seminar.
Schulungsziel
Nach dem Seminar können Sie häufige Barrieren in einem überschaubaren UI-Nutzungsablauf erkennen und ihre Auswirkungen erklären. Sie setzen typische Navigationselemente und Formulare mit nativen HTML-Elementen, verständlichen Beschriftungen und nachvollziehbarer Struktur um bzw. korrigieren diese. Tastaturbedienung, Fokusführung und dynamische Rückmeldungen implementieren und prüfen Sie an ausgewählten UI-Bausteinen.
Sie setzen ARIA gezielt für notwendige Namen, Beziehungen und Zustände ein und erkennen unnötige oder widersprüchliche Verwendung. Sie beurteilen Kontrast, Textvergrößerung und Reflow am Beispiel und beheben häufige Darstellungsprobleme. Automatische Prüfbefunde ordnen Sie fachlich ein und ergänzen diese durch manuelle Tastatur-, Zoom- und grundlegende Screenreader-Prüfungen.
Sie dokumentieren Barrierefreiheitsfehler reproduzierbar und formulieren prüfbare Akzeptanzkriterien sowie Beiträge zur Definition of Done. Offene Fragen und Abhängigkeiten stimmen Sie mit Product Owner, UX/Design, Qualitätssicherung und anderen beteiligten Teams ab.
Das Seminar vermittelt einen Einstieg in die Umsetzung und entwicklungsbegleitende Prüfung. Es ersetzt weder eine vollständige Konformitätsbewertung noch die projektbezogene Klärung rechtlicher Pflichten.
Details
Inhalt
- Ziele und Erwartungen der Teilnehmenden
- Klärung individueller Lernziele und Erwartungen für ein praxisnahes und relevantes Seminar
- Tag 1: Einführung
- Teil 1: Barrieren verstehen, Anforderungen klären, Struktur verbessern
- Orientierung und gemeinsamer Praxisstart
- Vorbereitetes Beispielprojekt in Visual Studio Code öffnen und im Browser ausführen
- Einen konkreten Ablauf betrachten: Formular erreichen, Informationen eingeben und Ergebnis verstehen
- Erste Barrieren ohne Maus, mit Vergrößerung und anhand einer kurzen Screenreader-Demonstration erkennen
- Übung: beobachtete Probleme als kleine, nachvollziehbare Backlog-Einträge festhalten
- Anforderungen für Entwickler einordnen
- Wahrnehmbar, bedienbar, verständlich und robust: die vier WCAG-Prinzipien an Codebeispielen
- WCAG 2.2 und Konformitätsstufen A/AA; technische Zielsetzung und verbindliche Projektanforderungen unterscheiden
- BITV 2.0, BFSG/BFSGV und EN 301 549: Geltungsbereiche und Zuständigkeiten im Überblick
- Barrierefreiheit als Teamaufgabe: Entwicklung, UX/Design, Inhalte, Qualitätssicherung und Product Owner
- Übung: aus einer Nutzungshürde ein konkretes Akzeptanzkriterium ableiten
- Semantisches HTML und zugängliche Namen
- Seitenstruktur mit Seitentitel, Sprache, Überschriften und Landmarken nachvollziehbar aufbauen
- Links für Navigation, Buttons für Aktionen; native Elemente statt unnötiger Eigenbauten
- Sichtbare Beschriftung und zugänglicher Name; Icon-Buttons und Sprachsteuerung berücksichtigen
- Informative und dekorative Bilder unterscheiden und passende Textalternativen vorsehen
- DOM, sichtbare Oberfläche und Accessibility Tree miteinander vergleichen
- Übung: Struktur und Navigation des Beispielprojekts korrigieren und erneut prüfen
- Ergebnis: Eine nachvollziehbar strukturierte Oberfläche und ein kleines priorisiertes Fehler-Backlog mit ersten Akzeptanzkriterien.
- Teil 2: Tastaturbedienung, Darstellung und Formulare
- Tastatur und Fokus als grundlegende Bedienwege
- Logische Fokusreihenfolge und sichtbare Fokusindikatoren umsetzen
- Sprunglink, native Aktivierung mit Tastatur und Vermeidung von Tastaturfallen
- tabindex gezielt einsetzen; keine positiven Werte zur Reparatur einer falschen Reihenfolge
- Verdecken des Fokus durch fixe Kopfzeilen oder Banner erkennen und korrigieren
- Übung: den Beispielablauf vollständig ohne Maus bedienen und Fehler beheben
- Darstellung bei unterschiedlicher Wahrnehmung
- Text- und Nichttextkontraste prüfen; Zustände nicht ausschließlich über Farbe vermitteln
- Textvergrößerung und Reflow prüfen: bis 200 Prozent Textvergrößerung sowie Reflow bei einer Breite von 320 CSS-Pixeln, typischerweise entsprechend 400 Prozent Zoom bei 1280 Pixeln Ausgangsbreite
- Textabstände, Lesereihenfolge und abgeschnittene Inhalte berücksichtigen; inhaltsbedingte Ausnahmen einordnen
- Zielgrößen und Abstände an häufig genutzten Bedienelementen beurteilen
- Übung: das Beispiel mit vergrößerter Darstellung prüfen und ausgewählte CSS-Probleme korrigieren
- Formulare verständlich und technisch zugänglich gestalten
- Labels, Hinweise, Pflichtfeldkennzeichnung und Gruppen mit fieldset/legend
- Geeignete Eingabetypen und autocomplete nutzen
- Fehler verständlich beschreiben und dem jeweiligen Eingabefeld zuordnen
- aria-describedby und aria-invalid gezielt einsetzen; Eingaben bei Fehlern erhalten
- Übung: ein kurzes Formular verbessern und einen fehlerhaften Eingabeversuch prüfen
- Ergebnis: Eine per Tastatur nutzbare Navigation und ein beschriftetes, verständlich validierbares Formular; dokumentierte Prüfungen für Fokus und vergrößerte Darstellung.
- Tag 2: Fortgeschritten
- Dieser Block vertieft die am ersten Tag gelegten Grundlagen.
- Teil 3: Dynamische UI und gezielter ARIA-Einsatz
- Projektabgleich und dynamische Zustände
- Semantik, zugängliche Namen und Tastaturverhalten am vorbereiteten Stand kurz überprüfen
- Unterschiede zwischen statischer Struktur, wechselnden Zuständen und vollständigem Nutzungsablauf
- Lade-, Leer-, Fehler- und Erfolgszustände verständlich darstellen
- Asynchrone Vorgänge mit vorbereiteten lokalen Beispielen simulieren - ohne Backend- oder Serviceintegration
- ARIA als Ergänzung, nicht als Reparaturversprechen
- Namen, Rollen, Zustände und Beziehungen an wenigen konkreten Fällen verstehen
- Statusmeldungen über geeignete Live-Regionen, etwa role="status", bereitstellen; unnötige oder doppelte Ansagen vermeiden
- aria-hidden nicht auf fokussierbare Inhalte anwenden
- Einfache aufklappbare Inhalte bevorzugt mit nativen Elementen oder einem klaren Button-Muster realisieren
- Übung: Rückmeldungen zu einer simulierten Formularverarbeitung umsetzen und angeleitet mit einem Screenreader prüfen
- Dialog und Fokusführung an einem überschaubaren Muster
- Einen vorhandenen Dialog auf Basis des nativen dialog-Elements anpassen
- Zugängliche Beschriftung, sinnvollen Anfangsfokus, Schließen und Rückkehr zum auslösenden Element prüfen
- Zusammenspiel von Modalität, Hintergrund und Tastaturbedienung nachvollziehen
- Übung: Bestätigungsdialog korrigieren und den Ablauf Öffnen -> Bedienen -> Schließen testen
- Aktuelle Anforderungen an Interaktionen
- Drag-and-drop-Alternativen, konsistente Hilfe, Vermeidung redundanter Eingaben und zugängliche Authentifizierung an kurzen Vorher-/Nachher-Beispielen beurteilen
- Passwortmanager und Einfügen nicht unnötig behindern; keine eigene Authentifizierungsinfrastruktur entwickeln
- Bewegung reduzieren, automatisch laufende Inhalte kontrollierbar halten und Zeitbegrenzungen als mögliche Barriere erkennen
- Ergebnis: Eine überschaubare dynamische Interaktion mit zugänglichen Rückmeldungen und überprüfter Fokusführung; begründete Entscheidungen zu nativen Elementen und ARIA.
- Teil 4: Wiederholbar testen und im Scrum-Team liefern
- Entwicklungsbegleitende Prüfungen kombinieren
- Automatischen Browsercheck, beispielsweise mit einem axe-basierten Werkzeug, ausführen und Befunde beurteilen
- Manuelle Prüfroutine: Tastatur, Fokus, zugängliche Namen, Formularfehler, Zoom/Reflow und zentrale Screenreader-Rückmeldungen
- Auch geöffnete Dialoge, Validierungsfehler und andere relevante Zustände prüfen, nicht nur die Startansicht
- Befunde mit Reproduktionsschritten, Soll-/Ist-Verhalten, betroffener Nutzung und Testumgebung dokumentieren
- Übung: in Paaren prüfen, ausgewählte Fehler beheben und die Korrektur erneut testen
- Wiederholbare Tests und Reviews in bestehende Abläufe einordnen; keine neue CI/CD-Infrastruktur aufbauen
- Barrierefreiheit in agile Teamarbeit integrieren
- Refinement: Nutzungshürden, Anforderungen und Abhängigkeiten vor der Umsetzung klären
- Planung: kleine, überprüfbare Änderungen an einem vollständigen Nutzungsablauf zuschneiden
- Akzeptanzkriterien und Definition of Done unterscheiden: konkrete Story-Anforderungen versus wiederkehrende Produktqualität
- Code-Review: Semantik, Namen, Tastaturverhalten, Fokus und dynamische Zustände mitprüfen
- Sprint Review: geprüfte Nutzbarkeit demonstrieren; das Review ersetzt nicht die vorherige Qualitätssicherung
- Retrospektive: wiederkehrende Fehlerursachen, fehlende Testmöglichkeiten und Verbesserungen der Zusammenarbeit betrachten
- Teamübergreifende oder externe Abhängigkeiten transparent festhalten und bearbeiten; gemeinsame Bausteine und den gesamten Ablauf prüfen
- Übung: eine Beispielanforderung mit Akzeptanzkriterien, Testnachweisen und einer passenden Definition-of-Done-Ergänzung bearbeiten
- Praxisabschluss und Transfer
- Den durchgängigen Beispielablauf erneut mit den vereinbarten Prüfungen durchlaufen
- Behobene und verbleibende Barrieren sowie Grenzen der eigenen Prüfung benennen
- Individuelle Lernziele abgleichen, Fragen klären und nächste Schritte für das eigene Team festhalten
- Ergebnis: Ein geprüftes kleines UI-Inkrement, ein nachvollziehbares Prüfprotokoll und ein Vorschlag für entwicklungsbegleitende Qualitätskriterien im Team.
- Optionale Vertiefungen als Ersatz für einzelne Vertiefungsbeispiele bei Gruppenbedarf
- Tabellen mit geeigneten Überschriften und einfachen Zuordnungen
- Untertitel, Transkripte und Audiodeskription: technische Einbindung und Zuständigkeiten
- prefers-reduced-motion und Forced-Colors-Modus an einem ergänzenden CSS-Beispiel
- Eine einfache automatisierte Regression an einem vorbereiteten Testskript
- Vertiefte Bewertung eines vorhandenen UI-Bausteins anhand der WAI-ARIA Authoring Practices
Zielgruppe & Vorkenntnisse
Das Seminar richtet sich an Frontend- und Webentwickler sowie Full-Stack-Entwickler, die an Webseiten oder Browserapplikationen arbeiten und Barrierefreiheit gemeinsam mit UX/Design, Product Owner, Qualitätssicherung und weiteren Beteiligten umsetzen sollen. Der Kurs eignet sich für Teams, die vorhandene Oberflächen und Arbeitsabläufe schrittweise verbessern möchten.
Teilnahmevoraussetzungen
Vorkenntnisse in digitaler Barrierefreiheit sind nicht erforderlich.
Sie benötigen Grundkenntnisse in HTML und CSS sowie grundlegende JavaScript-Kenntnisse zu Ereignissen und DOM-Manipulation.
Sie sollten einfache Weboberflächen lesen, bearbeiten und im Browser ausführen können.
Eine grundlegende Orientierung in Visual Studio Code oder einem vergleichbaren Editor wird vorausgesetzt.
Scrum-Kenntnisse sind hilfreich, aber nicht erforderlich; die verwendeten Begriffe werden kurz eingeordnet.
Arbeitsumgebung für die Übungen:
Für die geplanten Übungen werden Visual Studio Code, ein aktueller Browser mit Entwicklertools und eine geeignete Screenreader-/Browser-Kombination benötigt, beispielsweise NVDA unter Windows oder VoiceOver unter macOS. Die konkrete Auswahl und Nutzungsmöglichkeit sind vorab abzustimmen. Die Pflichtübungen benötigen keine Anbindung an Unternehmenssysteme und keinen Aufbau einer eigenen Service- oder Framework-Architektur.
Ihre Schulung
In Präsenz | Online |
|---|---|
| Lernmethode | |
Neu aufgesetzte Systeme für jeden Kurs in Abstimmung mit dem Seminarleiter. | Wie auch bei unseren Präsenz-Seminaren: Ausgewogene Mischung aus Theorie und praktischen Übungen. Trainer durchgehend präsent. |
| Unterlagen | |
Neu aufgesetzte Systeme für jeden Kurs in Abstimmung mit dem Seminarleiter. | Seminarunterlagen oder Fachbuch inklusive (via DHL). Das Fachbuch wählt der Trainer passend zum Seminar aus - Ihren individuellen Buch-Wunsch berücksichtigen wir auf Nachfrage gerne. |
| Arbeitsplatz | |
| PC/VMs für jeden Teilnehmer Hochwertige und performante Hardware Große, höhenverstellbare Bildschirme Zugang zu Ihrem Firmennetz erlaubt |
|
| Lernumgebung | |
Neu aufgesetzte Systeme für jeden Kurs in Abstimmung mit dem Seminarleiter. | |
| Arbeitsmaterialien | |
DIN A4 Block, Notizblock, Kugelschreiber, USB-Stick, Textmarker, Post-its | |
| Teilnahmezertifikat | |
Nach Abschluss des Seminars erhalten Sie das Teilnahmezertifikat inkl. Inhaltsverzeichnis per E-Mail als PDF. | |
| Digitales Badge | |
Mit dem Abschluss der Schulung erhalten Sie ein digitales Badge, das Ihre Teilnahme und Ihren Lernerfolg bescheinigt. | |
Organisation
In Präsenz | Online | ||||
|---|---|---|---|---|---|
| Teilnehmendenzahl | |||||
min. 1, max. 8 Personen | |||||
| Garantierte Durchführung | |||||
Ab 1 Teilnehmenden* | |||||
| Schulungszeiten | |||||
| |||||
| Ort der Schulung | |||||
GFU SchulungszentrumAm Grauen Stein 27 51105 Köln-Deutz oder online im Virtual Classroom oder europaweit bei Ihnen als Inhouse-Schulung Um ein optimales Raumklima zu gewährleisten, haben wir das Schulungszentrum mit 17 hochmodernen Trotec TAC V+ Luftreinigern ausgestattet. Diese innovative Filtertechnologie (H14 zertifiziert nach DIN EN1822) sorgt dafür, dass die Raumluft mehrfach pro Stunde umgewälzt wird und Schadstoffe zu 99.995% im HEPA-Filter abgeschieden und infektiöse Aerosole abgetötet werden. Zusätzlich sind alle Räume mit CO2-Ampeln ausgestattet, um jederzeit eine hervorragende Luftqualität sicherzustellen. | |||||
| Räumlichkeiten | |||||
Helle und modern ausgestattete Räume mit perfekter Infrastruktur | Bequem aus dem Homeoffice von überall | ||||
| Preisvorteil | |||||
Dritter Mitarbeitende nimmt kostenfrei teil. Eventuell anfallende Prüfungskosten für den dritten Teilnehmenden werden zusätzlich berechnet - auch bei Seminaren inkl. Prüfungsgebühr. Hinweis: Um den Erfolg der Schulung zu gewährleisten, sollte auch der dritte Teilnehmende die erwarteten Vorkenntnisse mitbringen. | |||||
| All-Inclusive | |||||
Gebäck, Snacks und Getränke ganztägig, Mittagessen im eigenen Restaurant, täglich 6 Menüs, auch vegetarisch | Eine Auswahl unserer Frühstücks-Snacks und Nervennahrungs-Highlights senden wir Ihnen mit den Seminarunterlagen via DHL zu. | ||||
| Barrierefreiheit | |||||
Das GFU-Schulungszentrum (Am Grauen Stein 27) ist barrierefrei | - | ||||
Buchen ohne Risiko
| Rechnungsstellung |
Erst nach dem erfolgreichen Seminar. Keine Vorkasse. |
| Stornierung |
Kostenfrei bis zum Vortag des Seminars |
| Vormerken statt buchen |
Sichern Sie sich unverbindlich Ihren Seminarplatz schon vor der Buchung - auch wenn Sie selbst nicht berechtigt sind zu buchen |
Kostenfreie Services
In Präsenz | Online |
|---|---|
|
|
Buchungsmöglichkeiten
Online oder in Präsenz teilnehmen
Sie können sowohl Online als auch in Präsenz am Seminar teilnehmen. Klicken Sie bei Ihrer Buchung oder Anfrage einfach die entsprechende Option an.
Gesicherte offene Termine
| Termin | Ort | Preis | ||
|---|---|---|---|---|
26.11.-27.11.2026 Plätze vorhanden Online 1.440,00 | Online | 1.440,00 | Buchen Vormerken | |
| 2027 | ||||
09.02.-12.02.2027 Plätze vorhanden Online 1.440,00 | Online | 1.440,00 | Buchen Vormerken | |
04.03.-05.03.2027 Plätze vorhanden Online 1.440,00 | Online | 1.440,00 | Buchen Vormerken | |
18.05.-21.05.2027 Plätze vorhanden Online 1.440,00 | Online | 1.440,00 | Buchen Vormerken | |
03.06.-04.06.2027 Plätze vorhanden Köln / Online 1.440,00 | Köln / Online | 1.440,00 | Buchen Vormerken | |
30.08.-02.09.2027 Plätze vorhanden Online 1.440,00 | Online | 1.440,00 | Buchen Vormerken | |
02.09.-03.09.2027 Plätze vorhanden Köln / Online 1.440,00 | Köln / Online | 1.440,00 | Buchen Vormerken | |
02.12.-03.12.2027 Plätze vorhanden Köln / Online 1.440,00 | Köln / Online | 1.440,00 | Buchen Vormerken | |
2 Tage, 09:00 - 16:00
4 halbe Tage, 09:00 - 12:30
- Lernumgebung in der Cloud
- Inhalte werden auf Wunsch an die Anforderungen Ihres Teams angepasst.
- Lernumgebung in der Cloud
- 1 Teilnehmender = Fokus aufs Fachliche und maximaler Raum für individuelle Fragen.
- Alle folgenden Schulungsformen können auch Online als Virtual Classroom durchgeführt werden.
- Eine Offene Schulung findet zu einem festgelegten Zeitpunkt im voll ausgestatteten Schulungszentrum oder Online/Remote statt. Sie treffen auf Teilnehmende anderer Unternehmen und profitieren vom direkten Wissensaustausch.
- Eine Inhouse-/Firmen-Schulung geht auf die individuellen Bedürfnisse Ihres Unternehmens ein. Sie erhalten eine kostenfreie Beratung von Ihrem Seminarleiter und können Inhalte und Dauer auf Ihren Schulungsbedarf anpassen. Inhouse-Schulungen können Europaweit durchgeführt werden.
- Bei einer Individual-Schulung erhalten Sie eine 1-zu-1 Betreuung und bestimmen Inhalt, Zeit und Lerntempo. Der Dozent passt sich Ihren Wünschen und Bedürfnissen an.
Sie können unsere Schulungen auch als Remote Schulung im Virtual Classroom anfragen.
In drei Schritten zum Online Seminar im Virtual Classroom:
- Seminar auswählen und auf "Buchen" klicken
- Wählen Sie bei "Wie möchten Sie teilnehmen?" einfach "Online" aus.
- Formular ausfüllen und über den Button "Jetzt buchen" absenden.
Unser Kundenservice meldet sich bei Ihnen mit der Buchungsbestätigung.
Unsere Online Schulungen finden im Virtual Classroom statt. Ein Virtual Classroom bündelt mehrere Werkzeuge, wie Audio-Konferenz, Text-Chat, Interaktives Whiteboard, oder Application Sharing.
Vorteile von Virtual Classroom:
- Sie erhalten 1 zu 1 die gleiche Lernumgebung, die Sie auch vor Ort bei uns vorfinden
- Die technische Vorbereitung wird von den GFU-Technikern vorgenommen
- Sie erhalten remote Zugriff auf Ihren persönlichen Schulungs-PC im GFU-Seminarraum
- Die Virtual Classroom Lösung lässt sich auch im Browser betreiben
- Die GFU-Technik leistet wie gewohnt Soforthilfe bei Problemen
- Die Schulungsunterlagen bekommen Sie via DHL zugeschickt
- Sie sparen Reisekosten und Zeit
- 26. Nov. - 27. Nov. ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- 09. Feb. - 12. Feb. ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- 04. Mär. - 05. Mär. ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- 18. Mai - 21. Mai ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- 03. Jun. - 04. Jun. ✓ Noch einige Plätze frei ▶ Köln + Online/Remote
- Auch als Inhouse-Schulung, bundesweit mit Termin nach Wunsch und individuellen Inhalten
- Buchen ohne Risiko! Kostenfreie Stornierung bis zum Vortag des Seminars
Die Seminare der GFU finden in angenehmer Atmosphäre statt und sind perfekt organisiert. Profitieren Sie von dem Rundum-Service der GFU!
Machen Sie sich keinen Kopf um die Anreise! Unser Shuttle fährt Sie. Oder Sie parken einfach auf einem extra für Sie reservierten Parkplatz.
Hotelzimmer gesucht? Wir organisieren Ihnen eins. Ihr Vorteil: Sie sparen Zeit und Geld!
Stornierung bei offenen Seminaren kostenfrei bis einen Tag vor Schulungsbeginn.
Unsere Techniker sind immer zur Stelle, egal ob online oder vor Ort.
GFU Schulungszentrum