Ansicht von oben: linke Hand auf der Tastatur, rechte Hand auf dem Touchpad des MacBook

Top 7 Barrierefreiheitsprobleme auf Websites – und wie man sie schnell behebt

Barrierefreiheit ist mehr als nur eine rechtliche Verpflichtung - sie ist eine Voraussetzung für eine inklusive und benutzerfreundliche Website. Viele Probleme können mit wenig Aufwand gelöst werden, wenn man weiß, wo man ansetzen muss. Hier sind die 7 häufigsten Probleme - und wie man sie direkt verbessern kann.

Inhaltsverzeichnis:

  1. Unzureichender Farbkontrast
  2. Fehlende alt-Texte bei Bildern
  3. Fehlende semantische HTML-Struktur
  4. Kein sichtbarer Tastaturfokus
  5. Nicht verknüpfte Labels und Formularelemente
  6. Falsche oder fehlende Überschriftenstruktur
  7. Falscher Einsatz von ARIA-Attributen

Unzureichender Farbkontrast

Problem: Texte sind auf dem Hintergrund schlecht lesbar – z. B. hellgrauer Text auf weißem Hintergrund.

Warum das wichtig ist: Menschen mit eingeschränktem Sehvermögen oder Farbenblindheit können den Text nicht erkennen.

Beispiel (falsch):

<p style="color: #aaa;">Schlecht lesbarer Text</p>

Lösung: Stelle sicher, dass der Kontrast mindestens 4,5:1 beträgt (für normalen Text). Tools wie der WebAIM Contrast Checker helfen bei der Prüfung.

Beispiel (richtig):

<p style="color: #333;">Gut lesbarer Text</p>

Fehlende alt-Texte bei Bildern

Problem: Screenreader-Nutzende erhalten keine Beschreibung des Bildinhalts.

Warum das wichtig ist: Bilder transportieren oft wichtige Informationen. Ohne alt-Text bleiben diese verborgen.

Beispiel (falsch):

<img src="produktfoto.jpg">

Lösung: Beschreibe den Bildinhalt sinnvoll im alt-Attribut. Bei rein dekorativen Bildern verwende alt="".

Beispiel (richtig):

<img src="produktfoto.jpg" alt="Rotes T-Shirt mit weißem Logo">

Fehlende semantische HTML-Struktur

Problem: Es werden nur <div> oder <span> verwendet, obwohl semantische Elemente wie <button>, <nav>, <header> besser geeignet wären.

Warum das wichtig ist: Screenreader und andere Hilfsmittel können die Struktur und Bedeutung der Inhalte nicht richtig erfassen.

Beispiel (falsch):

<div onclick="kaufen()">Kaufen</div>

Lösung: Verwende passende HTML-Elemente mit ihrer vollen Funktionalität.

Beispiel (richtig):

<button onclick="kaufen()">Kaufen</button>

Kein sichtbarer Tastaturfokus

Problem: Der Fokus ist mit der Tabulatortaste erreichbar, aber nicht sichtbar.

Warum das wichtig ist: Menschen, die mit Tastatur navigieren (z. B. wegen motorischer Einschränkungen), verlieren die Orientierung.

Beispiel (falsch):

*:focus {
  outline: none;
}

Lösung: Entweder das Standard-Outline belassen oder ein deutlich sichtbares Fokus-Styling hinzufügen.

Beispiel (richtig):

button:focus {
  outline: 2px solid #005fcc;
  outline-offset: 3px;
}

Nicht verknüpfte Labels und Formularelemente

Problem: Screenreader können nicht erkennen, welches Label zu welchem Feld gehört.

Warum das wichtig ist: Die Benutzer:innen wissen nicht, was in ein Feld eingegeben werden soll.

Beispiel (falsch):

<label>Vorname</label>
<input type="text">

Lösung: Verwende for im Label und id im Input.

Beispiel (richtig):

<label for="vorname">Vorname</label>
<input id="vorname" type="text">

Falsche oder fehlende Überschriftenstruktur

Problem: Überschriften springen in der Hierarchie – z. B. von <h1> direkt zu <h4> – oder es fehlen ganz.

Warum das wichtig ist: Screenreader-Nutzende verwenden die Überschriftenstruktur zur Navigation.

Beispiel (falsch):

<h1>Unsere Produkte</h1>
<h4>Neuheiten</h4>

Lösung: Überschriften logisch und hierarchisch strukturieren: <h1><h2><h3> usw.

Beispiel (richtig):

<h1>Unsere Produkte</h1>

<h2>Neuheiten</h2>

Falscher Einsatz von ARIA-Attributen

Problem: ARIA wird verwendet, obwohl native HTML-Elemente besser wären – oder es wird falsch eingesetzt.

Warum das wichtig ist: ARIA kann die Zugänglichkeit verbessern – aber nur, wenn es korrekt angewendet wird. Falsch eingesetztes ARIA verwirrt assistive Technologien.

Beispiel (falsch):

<div role="button" onclick="öffnen()">Menü</div>

Lösung: Verwende native Elemente wie <button>. Falls du unbedingt ein <div> brauchst, dann richtig mit ARIA und Tastatursteuerung:

Beispiel (akzeptabel):

<div role="button" tabindex="0" onclick="öffnen()" onkeydown="if(event.key==='Enter'){ öffnen(); }">
  Menü
</div>

Barrierefreiheit beginnt mit den Basics: Kontrast, Struktur, Alternativtexte, Fokus. Die meisten Probleme lassen sich mit wenig Aufwand lösen – und das macht deinen Webauftritt nicht nur gesetzeskonform, sondern auch inklusiver und professioneller.