Das Landesportal Frau und Beruf BW zeigt, wie digitale Barrierefreiheit richtig geht

Ministerium für Wirtschaft, Arbeit und Tourismus Baden-Württemberg

Screenshot der Startseite des Landesportal Frau und Beruf

Das Landesportal „Frau und Beruf Baden-Württemberg“ ist die zentrale Anlaufstelle für Frauen, die berufliche Orientierung und Weiterbildungsangebote suchen. Doch was, wenn Nutzerinnen mit Einschränkungen wie visuellen, akustischen, kognitiven oder motorischen Beeinträchtigungen zu dieser wertvollen Plattform kommen? Unsere Antwort: Eine barrierefreie TYPO3-Website, die mit den höchsten Standards der Barrierefreiheit glänzt. Durch die Optimierung nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) und den WCAG 2.1 AAA-Richtlinien stellen wir sicher, dass alle Menschen – unabhängig von ihren physischen oder kognitiven Fähigkeiten – problemlos auf alle Inhalte zugreifen können.

Doch Barrierefreiheit ist nicht nur eine gesetzliche Pflicht, sie ist ein Schritt in Richtung einer inklusiveren digitalen Zukunft. Unsere technischen Lösungen gewährleisten, dass das mit TYPO3 erstellte Portal problemlos mit assistiven Technologien wie Screenreadern, Braillezeilen und alternativen Eingabegeräten genutzt werden kann.

Und das Beste? Die Deutsche Rentenversicherung hat das Projekt auf Herz und Nieren geprüft und uns bestätigt, dass das Landesportal alle Anforderungen der Barrierefreiheit perfekt erfüllt. Diese Bescheinigung zeigt, wie Barrierefreiheit wirklich gelebt wird!

Unsere Maßnahmen für maximale Barrierefreiheit

1. Durchdachte Struktur für intuitive Navigation

Eine klare Struktur ist der Schlüssel, damit sich jede Nutzerin ohne Hindernisse auf der Website zurechtfindet. Hier sind die wichtigsten Features, die wir umgesetzt haben:

✅ ARIA-Rollen & Landmarken
Die Nutzung von role="navigation", role="main" und weiteren Landmarken verbessert die Struktur für Screenreader.

✅ Überspringbare Inhalte („Skip Links“)
Direkte Sprungmarken ermöglichen es, lange Navigationsbereiche zu überspringen und direkt zum Hauptinhalt zu gelangen.

✅ Semantisch korrektes HTML
Klare Überschriften-Hierarchien (H1–H6) erleichtern die Inhaltsstruktur und ermöglichen eine präzise Navigation für assistive Technologien.

2. Optimale Bedienbarkeit für verschiedene Eingabemethoden

Nicht jeder nutzt eine Maus, und das ist auch gut so! Die Website wurde für die Steuerung per Tastatur und alternative Eingabegeräte optimiert:

✅ Tastaturfreundliche Navigation
Alle interaktiven Elemente (Menüs, Formulare, Buttons) sind mit der Tab-Taste erreichbar.

✅ Sichtbare Fokus-Indikatoren
Ein gut sichtbarer Fokus sorgt dafür, dass Nutzer immer erkennen, wo sie sich auf der Seite befinden.

✅ ARIA-Attribute & tabindex
Die Steuerung der Fokus-Reihenfolge stellt sicher, dass Nutzer logisch durch komplexe Formulare oder modale Dialoge navigieren können.

Screenshot der Startseite von Frau und Beruf mit Ansicht der Tab-Navigation — Gute Orientierung bei der Navigation per Tab

3. Verbesserte Lesbarkeit durch optimale Farb- und Kontrastgestaltung

Eine Website sollte für alle sichtbar und lesbar sein, und genau das haben wir erreicht:

✅ Hoher Farbkontrast
Farbwerte erfüllen das 7:1 Kontrastverhältnis (WCAG AAA) für optimale Lesbarkeit.

✅ Flexible Schriftgrößen
Nutzer können die Schriftgröße individuell anpassen, ohne dass Inhalte oder Funktionen verloren gehen.

✅ Keine reine Farbcodierung
Alle wichtigen Informationen werden zusätzlich über Symbole, Muster oder Text dargestellt.

Screenshot der kompletten Startseite von Frau und Beruf mit normaler Ansicht — Normale Ansicht der Startseite

Screenshot der kompletten Startseite von Frau und Beruf mit hohem Kontrast — Zum Vergleich mit hohem Kontrast

4. Screenreader-Optimierung und Alternativtexte

Für die Nutzerinnen, die auf Screenreader angewiesen sind, haben wir dafür gesorgt, dass ihre Erfahrungen nahtlos sind:

✅ Klare Link- und Button-Beschriftungen
Keine vagen Begriffe wie „Hier klicken“, sondern aussagekräftige Beschreibungen.

✅ Alt-Texte für Bilder und Icons
Alle nicht-dekorativen Bilder sind mit präzisen alt-Attributen versehen.

✅ Live-Regionen für dynamische Inhalte
Wichtige Änderungen (z. B. Fehlerhinweise in Formularen) werden per aria-live für Screenreader ausgegeben.

Dieses Projekt hat uns einmal mehr gezeigt: Barrierefreiheit macht das Web für alle besser. Eine barrierefreie Website optimiert nicht nur das Nutzererlebnis, sondern erhöht gleichzeitig die Reichweite und sorgt dafür, dass die Inhalte von jedem wahrgenommen werden.

Apropos: Das Thema könnte auch Dich betreffen!

Denn ab 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft. Unternehmen, die digitale Dienstleistungen oder Produkte anbieten, müssen dann sicherstellen, dass ihre Online-Angebote barrierefrei zugänglich sind.