Del denne artikkelenLinkedInXWhatsApp

Ein praktischer Leitfaden für HR-Teams zur Überprüfung und Verbesserung der Barrierefreiheit von Karrierewebsites, Bewerbungsformularen, ATS-Plattformen, Onboarding-Dokumenten und interner Kommunikation gemäß WCAG 2.2 AA-Standards.

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 über for/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 Sie aria-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

E-Mail

  • 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

ToolTypKostenBest für
axe DevToolsBrowser-ErweiterungKostenlose Erweiterung / Bezahlte TarifeAutomatisierte Überprüfung auf WCAG-Verstöße
WAVEBrowser-Erweiterung (WebAIM)Siehe WebAIMVisuelle Barrierefreiheitsbewertung
LighthouseIntegriert in Chrome DevToolsKostenlos (Open Source)Leistungs- und Barrierefreiheitsprüfung
NVDAScreenreaderKostenlosManuelles Testen unter Windows
VoiceOverScreenreaderKostenlos (macOS/iOS)Manuelles Testen auf Apple-Geräten
Pa11yCLI / CI-ToolKostenlos (Open Source)Automatisiertes Testen in CI/CD-Pipelines
SortSiteDesktop-AnwendungBezahltUnternehmensweites Site-Scanning

Test-Prozess

  1. Automatisierte Überprüfung mit axe oder Lighthouse – findet nur einen Teil der Probleme, daher niemals allein darauf verlassen
  2. Manuelle Tastaturprüfung – navigieren Sie jede Seite nur mit Tab, Enter, Space und Pfeiltasten
  3. Screenreader-Test – testen Sie mit NVDA (Windows) oder VoiceOver (macOS) mindestens
  4. Benutzer-Test – rekrutieren Sie Benutzer mit Behinderungen zum Testen echter Anwendungsabläufe

Häufige Fehler und Lösungen

Häufiger FehlerWCAG-KriteriumLösung
Fehlende Formbeschriftungen1.3.1, 4.1.2Fügen Sie `<label>-Elemente mit for`-Attributen hinzu
Unzureichender Farbkontrast1.4.3Erhöhen Sie den Kontrast auf mindestens 4,5:1
Kein sichtbarer Tastatur-Fokusindikator2.4.7Fügen Sie sichtbare `:focus`-Stile in CSS hinzu
Bilder ohne Alternativtext1.1.1Fügen Sie beschreibende `alt`-Attribute hinzu
Automatisch abgespieltes Audio (länger als 3 Sekunden)1.4.2Entfernen Sie Autoplay oder stellen Sie eine Pause/Stop- oder Lautstärkeregelung bereit
Fehlende Seitentitel2.4.2Fügen Sie eindeutige `<title>`-Elemente hinzu
Unzugängliche benutzerdefinierte Widgets4.1.2Verwenden Sie ARIA-Rollen und Tastatur-Handler
Text kann nicht auf 200% vergrößert werden1.4.4Verwenden Sie relative Einheiten und flexible Container
Inhalte reflowieren nicht bei 320 CSS px Breite (400% Zoom)1.4.10Verwenden 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.

Del denne artikkelenLinkedInXWhatsApp