Web Accessibility 2025
Der komplette Leitfaden zur digitalen Barrierefreiheit

Digitale Barrierefreiheit ist nicht länger optional - sie wird gesetzliche Pflicht. Mit dem European Accessibility Act und seiner deutschen Umsetzung, dem Barrierefreiheitsstärkungsgesetz (BFSG), müssen Unternehmen ihre digitalen Angebote für alle Menschen zugänglich machen. Dieser umfassende Leitfaden zeigt Ihnen, was Sie wissen müssen und wie Sie Ihre Website WCAG 2.2 konform gestalten.

European Accessibility Act: Was 2025 auf Sie zukommt

Der European Accessibility Act (EAA), auch Europäischer Rechtsakt zur Barrierefreiheit genannt, ist eine EU-Richtlinie, die einheitliche Barrierefreiheitsanforderungen für Produkte und Dienstleistungen in allen Mitgliedstaaten festlegt. In Deutschland wird diese Richtlinie durch das Barrierefreiheitsstärkungsgesetz (BFSG) umgesetzt.

Betroffene digitale Produkte und Dienstleistungen

• E-Commerce - Online-Shops und Buchungsplattformen
• Bankdienstleistungen - Online-Banking, Zahlungsterminals
• Telekommunikation - Websites, Apps, Messenger-Dienste
• Transport - Buchungssysteme, Fahrplaninformationen
• E-Books - Digitale Bücher und Lesegeräte
• Computer & Betriebssysteme - Hardware und Software

Zeitplan und Fristen

WCAG 2.2: Der internationale Standard für Web-Barrierefreiheit

Die Web Content Accessibility Guidelines (WCAG) 2.2 sind der weltweit anerkannte Standard für barrierefreie Webinhalte. Die Richtlinien basieren auf vier Grundprinzipien, bekannt als POUR:

WCAG 2.2 Konformitätsstufen

WCAG definiert drei Konformitätsstufen. Das BFSG fordert mindestens Stufe AA:

• Stufe A - Grundlegende Barrierefreiheit (30 Kriterien)
• Stufe AA - Standard-Barrierefreiheit (20 zusätzliche Kriterien) - Gesetzliche Anforderung
• Stufe AAA - Erweiterte Barrierefreiheit (28 zusätzliche Kriterien)

Neue Kriterien in WCAG 2.2

WCAG 2.2 (veröffentlicht Oktober 2023) führt wichtige neue Kriterien ein:

Rechtliche Anforderungen und Sanktionen

Das BFSG sieht empfindliche Strafen für Verstöße vor. Unternehmen sollten die Umsetzung daher nicht auf die leichte Schulter nehmen.

Mögliche Sanktionen bei Verstößen

Dokumentationspflichten

Unternehmen müssen nachweisen können, dass ihre digitalen Produkte den Anforderungen entsprechen:

• Konformitätserklärung - Formelle Bestätigung der BFSG-Konformität
• Technische Dokumentation - Nachweis der Barrierefreiheitsmaßnahmen
• Barrierefreiheitserklärung - Öffentlich zugängliche Erklärung auf der Website
• Feedback-Mechanismus - Möglichkeit für Nutzer, Barrieren zu melden

WCAG 2.2 Checkliste für Ihre Website

Nutzen Sie diese umfassende Checkliste, um den Barrierefreiheitsstand Ihrer Website zu prüfen:

Wahrnehmbar (Perceivable)

Bedienbar (Operable)

Verständlich (Understandable)

Robust

Technische Umsetzung: Code-Beispiele

Hier finden Sie praktische Code-Beispiele für die wichtigsten Barrierefreiheitsanforderungen:

Semantisches HTML

Verwenden Sie native HTML-Elemente anstelle von generischen divs:

<!-- Falsch -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>

<!-- Richtig -->
<header>
  <nav aria-label="Hauptnavigation">...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Barrierefreie Bilder

<!-- Informatives Bild -->
<img
  src="team-meeting.jpg"
  alt="Fünf Teammitglieder besprechen ein Projekt am Whiteboard"
/>

<!-- Dekoratives Bild -->
<img src="decorative-line.svg" alt="" role="presentation" />

<!-- Komplexes Bild mit ausführlicher Beschreibung -->
<figure>
  <img
    src="sales-chart.png"
    alt="Umsatzentwicklung 2024"
    aria-describedby="chart-description"
  />
  <figcaption id="chart-description">
    Das Diagramm zeigt einen Umsatzanstieg von 2,1 Mio. Euro
    im Q1 auf 3,4 Mio. Euro im Q4, mit dem stärksten Wachstum
    im dritten Quartal (+40%).
  </figcaption>
</figure>

Barrierefreie Formulare

<form>
  <div class="form-group">
    <label for="email">
      E-Mail-Adresse
      <span aria-hidden="true" class="required">*</span>
    </label>
    <input
      type="email"
      id="email"
      name="email"
      required
      aria-required="true"
      aria-describedby="email-hint email-error"
      aria-invalid="false"
    />
    <p id="email-hint" class="hint">
      Wir verwenden Ihre E-Mail nur für diese Anfrage.
    </p>
    <p id="email-error" class="error" role="alert" hidden>
      Bitte geben Sie eine gültige E-Mail-Adresse ein.
    </p>
  </div>

  <button type="submit">
    Absenden
    <span class="visually-hidden">des Kontaktformulars</span>
  </button>
</form>

Skip-Link für Tastaturnutzer

<body>
  <a href="#main-content" class="skip-link">
    Zum Hauptinhalt springen
  </a>
  <header>...</header>
  <main id="main-content" tabindex="-1">
    ...
  </main>
</body>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}
</style>

Barrierefreie Buttons und Links

<!-- Button mit Icon -->
<button
  type="button"
  aria-label="Menü öffnen"
  aria-expanded="false"
  aria-controls="main-menu"
>
  <svg aria-hidden="true">...</svg>
</button>

<!-- Link, der in neuem Tab öffnet -->
<a
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
>
  Externe Ressource
  <span class="visually-hidden">(öffnet in neuem Tab)</span>
</a>

<!-- Mindest-Klickgröße sicherstellen -->
<style>
button, a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>

ARIA Live Regions für dynamische Inhalte

<!-- Höfliche Ankündigung (wartet auf Pause) -->
<div aria-live="polite" aria-atomic="true">
  Ihre Suche ergab 42 Ergebnisse.
</div>

<!-- Sofortige Ankündigung (unterbricht) -->
<div role="alert" aria-live="assertive">
  Fehler: Die Verbindung wurde unterbrochen.
</div>

<!-- Statusmeldung -->
<div role="status" aria-live="polite">
  Artikel wurde zum Warenkorb hinzugefügt.
</div>

Testing-Tools und Ressourcen

Nutzen Sie diese Tools, um die Barrierefreiheit Ihrer Website zu testen:

Automatisierte Testing-Tools

Screenreader für manuelle Tests

• NVDA (Windows) - Kostenloser, weit verbreiteter Screenreader
• VoiceOver (macOS/iOS) - In Apple-Geräten integriert
• JAWS (Windows) - Professioneller Screenreader (kostenpflichtig)
• TalkBack (Android) - In Android integriert

Kontrast-Checker

• WebAIM Contrast Checker - Online-Tool für Farbkontrastprüfung
• Colour Contrast Analyser - Desktop-App mit Pipette-Funktion
• Stark - Figma/Sketch-Plugin für Designer

Best Practices für nachhaltige Barrierefreiheit

1. Barrierefreiheit von Anfang an einplanen

Integrieren Sie Accessibility in jeden Schritt Ihres Entwicklungsprozesses - von der Konzeption über das Design bis zur Implementierung. Nachträgliche Anpassungen sind oft teurer und aufwändiger.

2. Design-System mit Accessibility-Komponenten

Erstellen Sie wiederverwendbare Komponenten, die bereits barrierefrei sind. So stellen Sie konsistente Accessibility über alle Seiten sicher.

3. Automatisierte Tests in CI/CD integrieren

Fügen Sie Tools wie axe-core oder Pa11y in Ihre Build-Pipeline ein, um Regressionen frühzeitig zu erkennen.

4. Regelmäßige manuelle Audits durchführen

Automatisierte Tools finden nur etwa 30-40% aller Barrierefreiheitsprobleme. Ergänzen Sie diese durch regelmäßige manuelle Tests mit Screenreadern und Tastatur.

5. Echte Nutzer einbeziehen

Führen Sie User-Tests mit Menschen mit Behinderungen durch. Ihre Erfahrungen sind unersetzlich für eine wirklich zugängliche Website.

6. Schulungen für das Team

Stellen Sie sicher, dass Designer, Entwickler und Content-Ersteller die Grundlagen der Barrierefreiheit verstehen. Bieten Sie regelmäßige Schulungen an.

Schritt-für-Schritt: Website barrierefrei machen

Folgen Sie dieser bewährten Vorgehensweise, um Ihre Website WCAG 2.2 konform zu gestalten:

Häufig gestellte Fragen (FAQ)

Fazit: Barrierefreiheit ist Chance und Pflicht

Die Umsetzung von Web Accessibility ist mehr als eine gesetzliche Pflicht - sie ist eine Chance, Ihre digitalen Angebote für alle Menschen zugänglich zu machen. Mit über 10 Millionen Menschen mit Behinderungen allein in Deutschland und einer alternden Bevölkerung erschließen Sie sich eine bedeutende Zielgruppe.

Beginnen Sie jetzt mit der Umsetzung. Die Frist 28. Juni 2025 ist näher als Sie denken, und eine gründliche Anpassung benötigt Zeit. Mit den Informationen und Ressourcen aus diesem Leitfaden haben Sie alle Werkzeuge, um loszulegen.

Benötigen Sie Unterstützung? Unsere zertifizierten Accessibility-Experten helfen Ihnen gerne - von der Erstanalyse über die technische Umsetzung bis zur Dokumentation für das BFSG.