Barrierefreie Webseiten entwickeln, prüfen und optimieren

Digitale Barrierefreiheit beginnt nicht bei einem Prüfwerkzeug und endet nicht beim Alt-Text eines Bildes. Struktur, HTML, Navigation, Tastaturbedienung, Formulare, Kontraste, responsive Darstellung, dynamische Komponenten und die Zusammenarbeit mit Screenreadern müssen zusammenspielen.

Wir betrachten Barrierefreiheit deshalb ganzheitlich: von Inhalt und UX über Frontend-Entwicklung bis zur technischen Prüfung und kontinuierlichen Qualitätssicherung. Wir prüfen nicht nur den sichtbaren Inhalt, sondern auch dessen technische Bedeutung. Ein Text kann optisch wie eine Überschrift aussehen und für einen Screenreader trotzdem nur ein bedeutungsloses <div> sein.

Digitale Barrierefreiheit: Standards & Umsetzung

  • WCAG 2.2

    Internationale Richtlinien für digitale Barrierefreiheit

  • BFSG

    Gesetzliche Anforderungen an Produkte & Dienstleistungen

  • BFSGV

    Konkrete Anforderungen zur Umsetzung des BFSG

  • BITV 2.0

    Barrierefreie Informationstechnik für öffentliche Stellen

  • Semantisches HTML

    Klare Strukturen für Browser & assistive Technologien

  • ARIA

    Zusätzliche Semantik für komplexe Bedienelemente

  • Tastaturnavigation

    Alle Funktionen auch ohne Maus erreichbar

  • Screenreader

    Inhalte strukturiert und verständlich zugänglich

  • Manuelle und Autom. Tests

    Technische Barrieren systematisch erkennen
seit 28.06.2025 in Kraft

Fallbeispiel: IfBQ – Befragungs- und Online-Test-Portale

Für das IfBQ entwickeln und modernisieren wir Befragungs- und Online-Test-Portale für unterschiedliche Einsatzbereiche. Dabei optimieren wir bestehende Anwendungen, erweitern Funktionen und verbessern Bedienbarkeit, Barrierefreiheit sowie Rollen- und Rechtekonzepte. So entstehen nachhaltige digitale Lösungen, die sich flexibel an neue fachliche und technische Anforderungen anpassen lassen.

Durchgehende Verbesserungen zur besseren Bedienbarkeit für Menschen mit Einschränkungen: korrekte Tastatursteuerung, verständliche Beschriftungen für Screenreader sowie konsistente Fokus-Führung in Dialogen.

60+ Templates und Subtemplates angepasst.

4000+ Zeilen Codeanpassungen

PROJEKT: LAUFEND

Barrierefreie Webseiten entwickeln - unsere 4 Stufen

01 – Barrierefreie Inhalte & Struktur

Barrierefreiheit beginnt vor CSS und JavaScript. Klare Inhalte und semantische Strukturen schaffen dafür die Grundlage. Sie ermöglichen Orientierung und machen Informationen für alle Menschen zugänglich.

  • logische Überschriftenhierarchie H1–H6
  • verständliche Seitenstruktur
  • aussagekräftige Linktexte
  • Alternativtexte für relevante Bilder
  • dekorative Bilder korrekt behandeln
  • verständliche Fehlermeldungen und Hilfetexte
  • Tabellen korrekt strukturieren
  • Videos/Audio und Untertitel
  • Dokumente und PDFs
  • verständliche Sprache
  • Seitentitel und Orientierung
  • CMS-Redaktionsprozesse

02 – Barrierefreie Frontend-Entwicklung

Wo native HTML-Elemente die benötigte Semantik bereits mitbringen, bevorzugen wir diese gegenüber nachgebildeten JavaScript-Komponenten. Konkrete Tastaturbedienung :

  • sinnvolle Tab-Reihenfolge
  • sichtbare Focus
  • States keine Keyboard
  • Traps Skip
  • Links Menüs per Tastatur
  • Modals/Dialogs
  • Accordions Tabs
  • Slider Dropdowns
  • Autocomplete
  • Escape-Verhalten
  • Focus Management nach dynamischen Aktionen

header, nav, main, section, article, aside, footer, button, label, fieldset, legend

03 – Barrierefreies Webdesign & UX

Kontraste
  • Textkontraste
  • große Texte
  • UI-Komponenten
  • Icons
  • Focus-Indikatoren
  • Hover/Active/Disabled States
Typografie
  • ausreichend große Schrift
  • Zoom Textabstände
  • Zeilenhöhe
  • keine abgeschnittenen Inhalte
  • keine Überlagerungen bei Vergrößerung

04 – Testen, prüfen und dokumentieren

  • Automatisierte Prüfungen.
  • Zum Beispiel: axe / axe DevTools  -> Automatisierte Prüfung vieler typischer WCAG-Probleme.
  • Lighthouse -> Schneller Accessibility-Basischeck und gut für Entwicklungs-/CI-Prozesse.
  • WAVE -> Visualisierung struktureller und semantischer Auffälligkeiten.
  • HTML Validator -> Fehlerhafte oder ungültige Strukturen können Accessibility beeinträchtigen.
  • Manuelle Prüfungen ->  Automatisierte Tests finden nur bestimmte Fehlerklassen. Deshalb zusätzlich:
  • Tastaturtest -> Komplette Website ohne Maus bedienen.
  • Screenreader NVDA / JAWS und je nach Zielsystem weitere Kombinationen.
  • Zoom & Reflow 200 %, 400 %, kleine Viewports.
  • Focus-Prüfung -> Focus-Reihenfolge, Sichtbarkeit und Focus Management.
  • Formulartests -> Labels, Fehlermeldungen, Pflichtfelder, Statusmeldungen.
  • Kontrastprüfung -> Text, Bedienelemente, Zustände und grafische Komponenten.
  • PDF-Prüfung Falls Dokumente Bestandteil des Angebots sind, z. B. PAC plus manuelle Prüfung.

Typische Barrieren, die wir in Projekten finden

Fehlende Tastaturbedienung
Menüs, Slider oder Dialoge funktionieren nur mit Maus oder Touch.
Unsichtbarer Tastaturfokus
Nutzer wissen nicht, welches Element gerade aktiv ist.
Fehlende Formular-Labels
Platzhalter werden fälschlicherweise als Beschriftung verwendet.
Ungeeignete HTML-Struktur
Divs und Spans ersetzen Buttons, Links oder Überschriften.
Problematische Modals
Focus bleibt hinter dem Dialog oder kann diesen nicht verlassen.
Unzureichende Kontraste
Nicht nur Texte, sondern auch Buttons, Icons und Zustände sind betroffen.
Dynamische Inhalte bleiben unbemerkt
AJAX-/JavaScript-Änderungen werden assistiven Technologien nicht mitgeteilt.
Fehlerhafte Alternativtexte
Alt-Texte fehlen – oder beschreiben dekorative Bilder unnötig ausführlich.

Accessibility bereits während der Entwicklung

Design → Komponenten → Entwicklung → automatisierte Tests → manuelle Tests → Abnahme

Barrierefreiheit sollte nicht erst kurz vor dem Launch geprüft werden. Wir berücksichtigen Accessibility bereits bei Komponenten, Templates und Designsystemen. Dadurch werden Probleme nicht auf jeder Unterseite erneut gelöst, sondern zentral an ihrer technischen Ursache.

Wir überprüfen nicht nur Content, sondern:

  • Templates
  • Navigation
  • Formulare
  • Content-Elemente
  • eigene Komponenten
  • Module
  • Accordions
  • Slider
  • Modals
  • Suchfunktionen
  • Backend-/Redaktionsvorgaben
Barrierefreiheit mit Contao, WordPress [&] individuellen Anwendungen

FAQ

Barrierefreiheit im Web bedeutet, dass Websites so gestaltet sind, dass sie für alle Menschen zugänglich und nutzbar sind – unabhängig von körperlichen oder kognitiven Einschränkungen.

Sie stellt sicher, dass niemand ausgeschlossen wird. Außerdem kann sie rechtlichen Anforderungen entsprechen, die Reichweite erhöhen und das Nutzererlebnis für alle verbessern.

Für Menschen mit Behinderungen – z. B. Seh-, Hör- oder Mobilitätseinschränkungen – sowie für ältere Menschen, temporär eingeschränkte Nutzer oder auch für Menschen mit langsamen Internetverbindungen.

Ja. In der EU gilt die Barrierefreiheitsrichtlinie (EAA), und in Deutschland z.B. das Barrierefreiheitsstärkungsgesetz (BFSG) und die BITV 2.0 für öffentliche Stellen.

Sie verbessert die Benutzerfreundlichkeit, erweitert die Zielgruppe, stärkt das Image und kann sich positiv auf SEO und Conversion-Raten auswirken.

Wir nutzen eine Kombination aus automatisierten Tools, manuellen Tests  – basierend auf Standards wie WCAG 2.2.

Nicht unbedingt. Oft können bestehende Seiten angepasst werden. Wir analysieren den aktuellen Stand und schlagen pragmatische Maßnahmen vor.

Die „Web Content Accessibility Guidelines“ sind internationale Standards, die definieren, wie Webinhalte für alle zugänglich gemacht werden sollen.

Das hängt vom Umfang und der Komplexität Ihrer Website ab. Nach einem Erstcheck können wir eine realistische Zeitschätzung geben.