Digitale Barrierefreiheit für HR-Teams: Recruiting- und Workplace-Systeme WCAG-konform gestalten
Einführung
Wenn Ihre Karrierewebseite, Bewerbungsformulare oder interne Systeme nicht barrierefrei sind, schließen Sie qualifizierte Kandidatinnen und Kandidaten sowie Arbeitnehmerinnen und Arbeitnehmer mit Behinderungen aus – und verstoßen möglicherweise gegen gesetzliche Bestimmungen. Die Web Content Accessibility Guidelines (WCAG) 2.2, veröffentlicht vom W3C, sind die aktuelle Version des Standards, und Level AA ist der Maßstab, auf den die meisten Organisationen hinarbeiten. Dies wird zunehmend in Regelwerken verankert: UK-Behörden des öffentlichen Sektors müssen WCAG 2.2 AA erfüllen, und die Rule Title II der ADA des US-amerikanischen Department of Justice von 2024 macht WCAG 2.1 Level AA zum technischen Standard für Web-Inhalte und mobile Apps von Bundes- und Kommunalbehörden.
Diese Anleitung bietet HR-Teams einen konkreten, umsetzbaren Fahrplan zur Barrierefreiheit von Recruiting- und Workplace-Systemen.
Schritt 1: Audit Ihrer Karrierewebseite
Ihre Karrierewebseite ist die Eingangstür zu Ihrer Organisation für jeden Kandidaten und jede Kandidatin. Eine barrierefreie Karrierewebseite sendet eine klare Botschaft an Bewerbende mit Behinderungen: Ihr seid hier nicht willkommen.
WCAG 2.2 AA Checkliste für Karrierewebseiten
Wahrnehmbar
- Alle Bilder haben aussagekräftigen Alternativtext (dekorative Bilder verwenden leere Alt-Attribute)
- Videos haben Untertitel und Audiodeskriptionen
- Farbkontrast erfüllt Mindestverhältnisse (4,5:1 für normalen Text, 3:1 für großen Text)
- Text kann auf bis zu 200% vergrößert werden, ohne dass Inhalte oder Funktionen verloren gehen, und Inhalte werden ohne zweidimensionales Scrollen bei einer Breite von 320 CSS-Pixeln umgebrochen (entspricht 400% Zoom auf einem 1280px breiten Bildschirm)
- Informationen werden nicht allein durch Farbe vermittelt
Bedienbar
- Alle Funktionen sind über Tastatur verfügbar (Tab, Enter, Space, Pfeiltasten)
- Fokusindikatoren sind sichtbar und deutlich
- Es gibt keine Tastatur-Fallen (Benutzer können sich immer mit Tab von einem Element wegbewegen)
- Seiten haben Skip-Navigation-Links
- Benutzer haben ausreichend Zeit, um Aufgaben abzuschließen (oder können Zeitlimits verlängern)
- Inhalte blinken nicht mehr als dreimal pro Sekunde
Verständlich
- Die Seitensprache ist in der HTML deklariert
- Formular-Label sind programmatisch mit Eingabefeldern verknüpft
- Fehlermeldungen sind klar und spezifisch (z.B. „E-Mail-Adresse muss ein @-Symbol enthalten" statt „Ungültige Eingabe")
- Navigation ist über alle Seiten konsistent
Robust
- Seiten verwenden wohlgeformtes, semantisches HTML (WCAG 2.2 kennzeichnet das alte Kriterium 4.1.1 als veraltet und hat es entfernt, aber sauberes Markup hilft weiterhin der Unterstützungstechnologie)
- Benutzerdefinierte Widgets verwenden ARIA-Rollen, -Zustände und -Eigenschaften korrekt
- Inhalte funktionieren mit aktueller Unterstützungstechnologie (Screenreader, Lupe, Sprachsteuerung)
Schritt 2: Bewerbungsformulare barrierefrei gestalten
Bewerbungsformulare sind der Ort, wo die meisten Barrierefreiheitsfehler auftreten. Häufige Probleme und deren Lösungen:
Beschriftungen und Anweisungen
- Fehler: Placeholder-Text wird als einzige Beschriftung verwendet. Screenreader kündigen Placeholder-Text möglicherweise nicht konsistent an.
- Lösung: Verwenden Sie sichtbare `
<label>-Elemente, die überfor/id`-Attribute mit jedem Eingabefeld verknüpft sind.
Fehlerbehandlung
- Fehler: Fehler werden nur in rotem Text neben dem Feld angezeigt, ohne programmatische Verknüpfung.
- Lösung: Verwenden Sie `
aria-describedby, um Fehlermeldungen mit Feldern zu verknüpfen. Stellen Sie eine Fehler-Zusammenfassung oben im Formular bereit. Verwenden Siearia-invalid="true"` auf Feldern mit Fehlern.
Tastaturnavigation
- Fehler: Benutzerdefinierte Dropdown-Menüs und Datumswähler, die nur mit der Maus funktionieren.
- Lösung: Verwenden Sie native HTML-`
<select>`-Elemente, wo möglich. Für benutzerdefinierte Widgets implementieren Sie vollständige Tastaturunterstützung nach den WAI-ARIA Authoring Practices.
Datei-Uploads
- Fehler: Nur Drag-and-Drop-Resume-Upload ohne Alternative.
- Lösung: Bieten Sie immer ein Standard-Eingabefeld (`
<input type="file">`) zusammen mit einer Drag-and-Drop-Schnittstelle an.
Fortschrittsanzeigen
- Fehler: Mehrstufige Formulare, die die aktuelle Position nicht anzeigen oder die Rückwärtsnavigation nicht ermöglichen.
- Lösung: Verwenden Sie `
aria-current="step"` und geben Sie klare Schrittanzahlen an (z.B. „Schritt 2 von 4"). Ermöglichen Sie Benutzern, zu vorherigen Schritten zurückzukehren, ohne dass Daten verloren gehen.
Schritt 3: Konfigurieren Sie Ihr ATS für Barrierefreiheit
Applicant Tracking Systems (ATS) generieren viele der Seiten, mit denen Kandidatinnen und Kandidaten interagieren. Häufige ATS-Barrierefreiheitsprobleme:
- Automatisch generierte Job-Listenseiten können Überschriftenstruktur fehlen. Arbeiten Sie mit Ihrem ATS-Anbieter zusammen, um sicherzustellen, dass H1/H2/H3-Tags korrekt verwendet werden.
- Apply-with-LinkedIn oder ähnliche One-Click-Funktionen sind möglicherweise nicht über Tastatur zugänglich. Testen Sie gründlich oder stellen Sie eine manuelle Alternative bereit.
- CAPTCHA in Bewerbungsformularen kann Screenreader-Benutzer und Menschen mit kognitiven Beeinträchtigungen blockieren. Verwenden Sie Verifizierungsmethoden, die sich nicht auf ein visuelles oder kognitives Rätsel verlassen, und beachten Sie, dass WCAG 2.2 Success Criterion 3.3.8 (Accessible Authentication) kognitive Funktionstests in Login-Schritten einschränkt.
- Session-Timeouts während langer Bewerbungen benachteiligen Benutzer, die langsam tippen. Verlängern oder entfernen Sie Timeouts, oder warnen Sie Benutzer vor dem Timeout und ermöglichen Sie eine Verlängerung.
Aktionspunkt: Fordern Sie einen Accessibility Conformance Report (ACR) – einen ausgefüllten VPAT (Voluntary Product Accessibility Template) – von Ihrem ATS-Anbieter an. Wenn dieser nicht bereitgestellt werden kann, erwägen Sie den Wechsel zu einem Anbieter, der Barrierefreiheit ernst nimmt.
Schritt 4: Erstellen Sie barrierefreie Onboarding-Dokumente
Neue Mitarbeiter und Mitarbeiterinnen erhalten viele Dokumente: Verträge, Handbooks, Leistungsübersichtungen, Schulungsmaterialien. Alle diese müssen barrierefrei sein.
PDF-Barrierefreiheit
- Verwenden Sie getaggte PDFs mit logischer Lesefolge
- Stellen Sie sicher, dass alle Bilder Alternativtext haben
- Verwenden Sie echten Text (nicht gescannte Bilder von Text)
- Definieren Sie Dokumentsprache und Titel
- Testen Sie mit einem Screenreader (Adobe Acrobat's Barrierefreiheitsprüfer ist ein Anfang, aber manuelles Testen ist unverzichtbar)
Foliendecks und Schulungsmaterialien
- Verwenden Sie Folienlayouts (nicht freiformige Textfelder), damit Screenreader einer logischen Lesefolge folgen
- Fügen Sie Alternativtext zu allen visuellen Elementen hinzu
- Stellen Sie ausreichenden Farbkontrast sicher
- Stellen Sie Sprechernotizen als alternative Texterzählung bereit
- Zeichnen Sie Audio/Video mit Untertiteln auf
Formulare und Umfragen
- Verwenden Sie barrierefreie Formularersteller (Microsoft Forms, Google Forms sind angemessen barrierefrei; testen Sie andere vor der Bereitstellung)
- Verwenden Sie niemals PDF-Formulare, die vom Benutzer erfordern, zu drucken, von Hand zu schreiben und zu scannen
Schritt 5: Machen Sie interne Kommunikation barrierefrei
- Verwenden Sie semantisches HTML in E-Mail-Vorlagen (Überschriften, Listen, Alternativtext für Bilder)
- Vermeiden Sie es, kritische Informationen nur als Bild-Anhänge zu versenden
- Stellen Sie Nur-Text-Alternativen bereit
Intranet
- Wenden Sie die gleichen WCAG 2.2 AA Standards wie auf Ihrer Karrierewebseite an
- Stellen Sie sicher, dass die Suchfunktion mit Screenreadern funktioniert
- Machen Sie Dokumentenrepositorys über Tastatur navigierbar
Slack, Teams und Chat-Plattformen
- Fördern Sie die Verwendung von Alternativtext auf Bildern, die in Kanälen geteilt werden, wo Ihre Plattform dies unterstützt
- Verwenden Sie Threads anstelle von langen unstrukturierten Gesprächen (leichter für kognitive Barrierefreiheit)
- Aktivieren und fördern Sie Untertitelung in Videoanrufen
- Stellen Sie sicher, dass kritische Ankündigungen auch im Textformat gepostet werden, nicht nur als Video oder Audio
Test-Tools
| Tool | Typ | Kosten | Best für |
|---|---|---|---|
| axe DevTools | Browser-Erweiterung | Kostenlose Erweiterung / Bezahlte Tarife | Automatisierte Überprüfung auf WCAG-Verstöße |
| WAVE | Browser-Erweiterung (WebAIM) | Siehe WebAIM | Visuelle Barrierefreiheitsbewertung |
| Lighthouse | Integriert in Chrome DevTools | Kostenlos (Open Source) | Leistungs- und Barrierefreiheitsprüfung |
| NVDA | Screenreader | Kostenlos | Manuelles Testen unter Windows |
| VoiceOver | Screenreader | Kostenlos (macOS/iOS) | Manuelles Testen auf Apple-Geräten |
| Pa11y | CLI / CI-Tool | Kostenlos (Open Source) | Automatisiertes Testen in CI/CD-Pipelines |
| SortSite | Desktop-Anwendung | Bezahlt | Unternehmensweites Site-Scanning |
Test-Prozess
- Automatisierte Überprüfung mit axe oder Lighthouse – findet nur einen Teil der Probleme, daher niemals allein darauf verlassen
- Manuelle Tastaturprüfung – navigieren Sie jede Seite nur mit Tab, Enter, Space und Pfeiltasten
- Screenreader-Test – testen Sie mit NVDA (Windows) oder VoiceOver (macOS) mindestens
- Benutzer-Test – rekrutieren Sie Benutzer mit Behinderungen zum Testen echter Anwendungsabläufe
Häufige Fehler und Lösungen
| Häufiger Fehler | WCAG-Kriterium | Lösung |
|---|---|---|
| Fehlende Formbeschriftungen | 1.3.1, 4.1.2 | Fügen Sie `<label>-Elemente mit for`-Attributen hinzu |
| Unzureichender Farbkontrast | 1.4.3 | Erhöhen Sie den Kontrast auf mindestens 4,5:1 |
| Kein sichtbarer Tastatur-Fokusindikator | 2.4.7 | Fügen Sie sichtbare `:focus`-Stile in CSS hinzu |
| Bilder ohne Alternativtext | 1.1.1 | Fügen Sie beschreibende `alt`-Attribute hinzu |
| Automatisch abgespieltes Audio (länger als 3 Sekunden) | 1.4.2 | Entfernen Sie Autoplay oder stellen Sie eine Pause/Stop- oder Lautstärkeregelung bereit |
| Fehlende Seitentitel | 2.4.2 | Fügen Sie eindeutige `<title>`-Elemente hinzu |
| Unzugängliche benutzerdefinierte Widgets | 4.1.2 | Verwenden Sie ARIA-Rollen und Tastatur-Handler |
| Text kann nicht auf 200% vergrößert werden | 1.4.4 | Verwenden Sie relative Einheiten und flexible Container |
| Inhalte reflowieren nicht bei 320 CSS px Breite (400% Zoom) | 1.4.10 | Verwenden Sie responsive CSS-Layouts |
Fazit
Digitale Barrierefreiheit für HR-Systeme ist kein einmaliges Projekt – es ist ein fortwährendes Engagement. Überprüfen Sie Ihre derzeitigen Systeme, beheben Sie zunächst die kritischsten Barrieren, testen Sie regelmäßig mit echter Unterstützungstechnologie, und halten Sie Ihre Anbieter rechenschaftspflichtig. Jede Verbesserung macht Ihren Arbeitsplatz inklusiver und Ihren Talentpool größer.