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.
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>
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">
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>
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;
}
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">
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>
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.