ARIA und Barrierefreiheit: Was wir bei unserem Accessibility Audit gelernt haben

Barrierefreiheit ist mit dem BFSG (Barrierefreiheitsstärkungsgesetz) seit Juni 2025 keine Kür mehr, sondern Pflicht. In diesem Artikel teile ich, was wir bei unserem Accessibility Audit auf onpage-optimierung.de gelernt haben.

Warum Barrierefreiheit SEO-relevant ist

Google bewertet User Experience immer stärker. Barrierefreie Websites bieten:

• Bessere Struktur (Headings, Landmarks)
• Semantisches HTML (gut für Crawler)
• Schnellere Ladezeiten (weniger JS)
• Mobile-Optimierung (Touch-friendly)

Die häufigsten ARIA-Fehler

Bei unserem Audit haben wir folgende Probleme gefunden und behoben:

1. Dekorative Icons ohne aria-hidden

Problem: Screenreader lesen SVG-Icons vor, obwohl sie keine Information tragen.

Lösung:

<!-- Vorher: Icon wird vorgelesen -->
<svg viewBox="0 0 24 24">...</svg>

<!-- Nachher: Icon wird ignoriert -->
<svg aria-hidden="true" viewBox="0 0 24 24">...</svg>

2. Fehlende Labels bei interaktiven Elementen

Problem: Buttons ohne Text haben keine Beschreibung.

Lösung:

<!-- Vorher: Keine Beschreibung -->
<button><svg>...</svg></button>

<!-- Nachher: Screenreader liest "Menü öffnen" -->
<button aria-label="Menü öffnen"><svg aria-hidden="true">...</svg></button>

3. Falsche Heading-Hierarchie

Problem: H1 → H3 → H2 statt H1 → H2 → H3

Lösung: Headings immer in der richtigen Reihenfolge verwenden, nicht nach visuellem Styling.

4. Focus-States nicht sichtbar

Problem: Keyboard-User sehen nicht, welches Element fokussiert ist.

Lösung:

/* Sichtbarer Focus Ring */
:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

Keyboard-Navigation richtig umsetzen

Skip Link implementieren

<!-- Erster Link auf der Seite -->
<a href="#main-content" class="sr-only focus:not-sr-only">
  Zum Hauptinhalt springen
</a>

<!-- Hauptinhalt -->
<main id="main-content" tabindex="-1">
  ...
</main>

WCAG 2.2 Checkliste

Testing Tools

1. WAVE: Browser Extension für schnelle Checks
2. axe DevTools: Detaillierte Accessibility-Analyse
3. Lighthouse: Accessibility Score in Chrome
4. NVDA/VoiceOver: Echte Screenreader-Tests

BFSG: Was Sie wissen müssen

Das Barrierefreiheitsstärkungsgesetz betrifft:

• E-Commerce-Websites
• Banking-Dienste
• E-Books und E-Reader
• Messenger und Kommunikationsdienste
• Streaming-Dienste

Ausnahmen: Kleinstunternehmen (< 10 Mitarbeiter, < 2 Mio € Umsatz)

Fazit

Barrierefreiheit ist kein Hindernis, sondern eine Chance. Accessible Websites sind:

• Besser für SEO
• Schneller
• Für alle nutzbar
• Rechtlich abgesichert

Starten Sie heute mit einem Audit Ihrer wichtigsten Seiten. Die Investition zahlt sich aus.