Zehn Ansatzpunkte für eine besser bedienbare Website
Kurz gesagt: Wir prüfen viele Websites, und die Befunde ähneln sich verblüffend. Zehn Fehler tauchen fast immer auf. Die folgenden Punkte helfen dir, die Bedienbarkeit deiner Seite gezielt zu prüfen und Verbesserungen zu planen.
1. Zu wenig Kontrast
Hellgraue Schrift auf Weiß sieht in der Designvorlage edel aus und ist am Küchentisch bei Sonnenlicht unlesbar. Nötig sind 4,5:1 für Fließtext und 3:1 für große Schrift. Betroffen sind fast immer Fußzeilen, Formular-Hilfetexte und Bildunterschriften.
2. Bilder ohne Alternativtext
Jedes Bild, das Information trägt, braucht eine Beschreibung. Reine Dekoration bekommt einen leeren Alternativtext, damit Screenreader sie überspringen. Was nicht geht: der Dateiname als Alternativtext — „IMG_4417″ hilft niemandem.
3. Formularfelder ohne Label
Ein Platzhalter im Feld verschwindet beim Tippen. Wer dann kurz abgelenkt wird, weiß nicht mehr, was in das Feld gehört. Jedes Feld braucht ein echtes, dauerhaft sichtbares Label.
4. Der unsichtbare Fokus
Wer mit der Tastatur navigiert, muss sehen, wo er ist. In sehr vielen Designs wird der Fokusrahmen bewusst entfernt, weil er als störend empfunden wird. Damit ist die Seite für Tastaturnutzer praktisch blind bedienbar. Der Rahmen darf gestaltet werden — entfernt werden darf er nicht.
5. Menüs, die nur mit der Maus funktionieren
Aufklappmenüs, die sich beim Überfahren öffnen und bei Tastaturbedienung gar nicht reagieren, sperren einen Teil der Besucher komplett aus. Das gilt besonders für Mobilmenüs, deren Schließen-Button nicht erreichbar ist.
6. Videos ohne Untertitel
Untertitel helfen nicht nur Gehörlosen. Der weit größere Teil der Nutzung findet ohne Ton statt — im Zug, im Wartezimmer, im Büro. Ein Video ohne Untertitel verliert die meisten Zuschauer in den ersten Sekunden.
7. Die PDF-Falle
Speisekarte als PDF. Preisliste als PDF. Anfahrt als gescanntes PDF. Gescannte Dokumente sind für Vorlesewerkzeuge reine Bilder — also gar nichts. Und für Google übrigens auch fast nichts. Solche Inhalte gehören als HTML auf die Seite.
8. Kaputte Überschriftenstruktur
Überschriften sind kein Schriftgrößen-Werkzeug, sondern das Inhaltsverzeichnis der Seite. Wer H3 wählt, weil H2 zu groß aussieht, zerstört die Navigation für alle, die sich per Überschriftenliste durch die Seite bewegen.
9. Slider ohne Pause
Automatisch wechselnde Inhalte ohne Stopp-Möglichkeit sind für Menschen mit Konzentrations- oder Leseschwierigkeiten eine Zumutung. Wenn der Slider bleiben soll, braucht er einen Pausenknopf.
10. Fehlermeldungen, die nichts sagen
„Bitte überprüfen Sie Ihre Eingabe“ ist keine Fehlermeldung, sondern ein Rätsel. Nötig ist: welches Feld, was ist falsch, wie sieht richtig aus — als Text, nicht nur als rote Umrandung. Farbe allein darf nie der einzige Träger einer Information sein.
Und was das mit Geld zu tun hat
Alle zehn Punkte betreffen nicht nur Menschen mit Behinderung. Schlechte Kontraste stören jeden über fünfzig. Unklare Fehlermeldungen brechen Bestellungen ab. Fehlende Untertitel kosten Reichweite. Barrierefreiheit ist an dieser Stelle einfach ein anderes Wort für „funktioniert“.
Du willst das nicht selbst bauen? Wir übernehmen das — von der Analyse bis zur Umsetzung. Meld dich bei uns, wir schauen gemeinsam auf deine Seite.
Häufige Fragen
Welche Barrieren findet ein automatischer Scanner?
Vor allem zu schwache Kontraste (Fließtext braucht mindestens 4,5:1, große Schrift 3:1), fehlende Alternativtexte, Formularfelder ohne Label, fehlende Sprachauszeichnung im HTML, eine kaputte Überschriftenhierarchie und Schaltflächen ohne erkennbaren Namen.
Welche Barrieren findet ein Scanner nicht?
Ob die Seite wirklich mit der Tastatur bedienbar ist, ob der Fokus sichtbar wandert und ob ein Screenreader die Reihenfolge versteht. Diese Punkte werden von Hand geprüft — und genau dort stecken die schweren Fehler.
Wie prüfe ich meine Website in fünf Minuten selbst?
Startseite öffnen und nur die Tabulatortaste drücken. Kommst du durch die Navigation, ins Formular und wieder heraus? Siehst du dabei jederzeit, wo du gerade bist? Wenn nein, ist das ein echter Fehler, kein theoretischer.
Mehr zum Thema Barrierefreiheit und BFSG
- BFSG-Kontrollen: So bereitest du deine Website vor
- BFSG: So prüfst du die Ausnahme für Kleinstunternehmen
- Barrierefreiheit verbessern: Was Widgets leisten und wo ihre Grenzen liegen
- Barrierefreiheit: Abmahnrisiken verstehen und rechtzeitig handeln
Du möchtest Unterstützung bei der Umsetzung? Webdesign und Websites bei B12 MEDIA — wir sind in Fürth, arbeiten für Betriebe in Nürnberg, Fürth, Erlangen und Bamberg und besprechen deine Ausgangslage, bevor wir ein passendes Angebot erstellen.