Die 6 häufigsten Fehler in der Barrierefreiheit

Einführung

Barrierefreiheit im Web ist entscheidend, damit Websites für alle Menschen nutzbar sind – auch für Menschen mit Behinderungen.
Trotzdem enthalten viele Websites Fehler in der Barrierefreiheit, die die Nutzung erschweren oder sogar unmöglich machen.

In diesem Artikel werfen wir einen Blick auf einige der häufigsten Barrierefreiheitsfehler und geben praktische Hinweise, wie man sie beheben kann.

Fehlende Alt Texte

Einer der häufigsten Barrierefreiheitsfehler ist das Fehlen von Alternativtexten (Alt-Text) bei Bildern. Alt-Texte bieten eine textliche Beschreibung des Bildinhalts – unerlässlich für Screenreader-Nutzer*innen, die Bilder nicht sehen können. Ohne Alt-Text geht ihnen wichtige Information verloren, die über das Bild vermittelt wird.

So behebst du das Problem

• Füge zu allen Bildern einen beschreibenden Alternativtext über das alt-Attribut hinzu.
• Achte darauf, dass der Alt-Text den Inhalt und Zweck des Bildes präzise beschreibt.
• Wenn ein Bild rein dekorativ ist, verwende ein leeres alt-Attribut (alt=""), um Screenreadern zu signalisieren, dass es ignoriert werden kann.

Text mit geringem Kontrast

Ein zu geringer Kontrast zwischen Text- und Hintergrundfarbe erschwert das Lesen – besonders für Menschen mit Sehbehinderungen oder Farbenfehlsichtigkeit.

Unzureichender Kontrast kann dazu führen, dass Inhalte schwer oder gar nicht lesbar sind. Achte daher auf ausreichend Farbkontrast, um deine Website für alle zugänglich zu machen.

• Stelle sicher, dass das Kontrastverhältnis zwischen Text und Hintergrund den Anforderungen der WCAG (Web Content Accessibility Guidelines) entspricht.
• Nutze ein Kontrast-Checker-Tool, um zu prüfen, ob dein Text mindestens ein Verhältnis von 4.5:1 bei normalem Text und 3:1 bei großem Text erreicht.
• Vermeide es außerdem, wichtige Informationen ausschließlich über Farbe zu vermitteln – Nutzer*innen mit Farbenfehlsichtigkeit könnten sie sonst nicht wahrnehmen.

Fehlende Tastaturbedienbarkeit

Tastaturbedienbarkeit ist essenziell, weil viele Nutzer – etwa mit motorischen Einschränkungen oder Sehbehinderungen – auf die Tastatur angewiesen sind. Wenn eine Website nur mit der Maus bedienbar ist, werden diese Menschen ausgeschlossen. Eine durchdachte Tastaturnavigation sorgt dafür, dass alle Inhalte und Funktionen erreichbar und nutzbar sind – unabhängig vom Eingabegerät.

So testest du die Tastaturbedienbarkeit deiner Website

1. Nur mit der Tastatur testen:
   Versuche, die Seite nur mit der Tastatur zu steuern (Tab, Shift+Tab, Enter, Pfeiltasten).
2. Alle interaktiven Elemente erreichen:
   Kannst du alle Buttons, Links und Formulare erreichen?
3. Sichtbarer Fokus:
   Siehst du, welches Element gerade ausgewählt ist?
4. Logische Tab-Reihenfolge:
   Springt die Auswahl in der richtigen Reihenfolge?
5. Escape-Funktion:
   Kannst du Popups oder Menüs mit der Esc-Taste schließen?

Falsche Überschriften-Hierarchie

Eine falsche Überschriften-Hierarchie kann die Navigation und das Verständnis einer Website erheblich erschweren – insbesondere für Menschen, die Screenreader verwenden. Überschriften sollten in einer klaren, logischen Reihenfolge strukturiert sein, um den Inhalt zu gliedern und zu verdeutlichen, welche Themen und Abschnitte zusammengehören.

Beispiel für einen Fehler: Wenn eine H2-Überschrift direkt unter einer H1 folgt, aber plötzlich eine H4-Überschrift kommt, ohne dass eine H3 dazwischen steht, verliert der Leser schnell den Überblick. Dies kann dazu führen, dass Screenreader-Nutzer Schwierigkeiten haben, die Struktur zu erfassen und sich durch die Seite zu navigieren.

Um diesen Fehler zu vermeiden, sollte jede Seite mit einer H1 beginnen und dann H2 für Hauptabschnitte und H3, H4 usw. für Unterthemen verwendet werden. Eine saubere und logische Struktur hilft nicht nur der Barrierefreiheit, sondern verbessert auch das SEO und die Benutzererfahrung insgesamt.

Richtige Hierarchie Beispiel

<h1>Haupttitel</h1>
<h2>Abschnitt 1</h2>
<h3>Unterpunkt 1.1</h3>
<h3>Unterpunkt 1.2</h3>
<h2>Abschnitt 2</h2>
<h3>Unterpunkt 2.1</h3>

Nicht-semantisches HTML

Nicht-semantisches HTML entsteht, wenn HTML-Elemente falsch oder unpassend verwendet werden – dadurch fehlt es dem Inhalt an klarer Struktur und Bedeutung.

Für Screenreader-Nutzer*innen wird es so deutlich schwerer, die Gliederung und den Aufbau der Website zu erfassen.

So behebst du das Problem

• Verwende semantische HTML-Elemente wie  <header>, <nav>, <main>, <article>, <aside> und <footer> , um deinem Inhalt Struktur und Bedeutung zu geben.
• Nutze Überschriftenelemente (<h1> bis <h6>), um eine klare und logische Überschriftenhierarchie aufzubauen.
• Setze Listenelemente (<ul>, <ol>, <dl>) ein, um zusammengehörige Inhalte als Liste darzustellen.
• Verwende für Schaltflächen das <button>-Element und für Links das <a>-Element – so bleibt die Funktion auch für assistive Technologien nachvollziehbar.

Richtiges Beispiel für semantisches HTML

<header>Site Header</header>

<nav>Nav Links</nav>

<main>
<h1>Title</h1>
<p>content</p>
</main>

<footer>Footer content</footer>

Pixel sind nicht zugänglich

Wenn du Schriftgrößen und Abstände in px definierst, ignorierst du individuelle Nutzereinstellungen. Viele Menschen vergrößern im Browser die Schrift – doch mit px bleibt alles starr und schlecht lesbar. rem und em passen sich dagegen flexibel an.

/* Problematisch: Fixe Größe */
p {
  font-size: 16px;
}

/* Besser: Relativ zur Root-Größe */
p {
  font-size: 1rem;
}

In jedem modernen Browser – egal ob Chrome, Firefox, Safari oder Edge – kann man die Standard-Schriftgröße einstellen, z. B. auf 18px statt 16px. Das ist besonders wichtig für Menschen mit Sehschwäche oder kognitiven Einschränkungen. Wenn du jedoch px verwendest, ignoriert deine Website diese Einstellung komplett. Das bedeutet: Der Text bleibt klein – selbst wenn der Nutzer bewusst eine größere Schrift eingestellt hat. Mit relativen Einheiten wie rem oder em passt sich die Schrift dagegen automatisch an die gewählte Browsergröße an.

Zusammenfassung zu den Grundlagen