Die fünf Barrieren, die fast jede Website hat | Nethotline

Wenn Websites wegen fehlender Barrierefreiheit beanstandet werden, geht es fast nie um komplizierte Technik. Es geht um Grundlagen, die seit Jahren bekannt sind und die trotzdem auf den meisten Seiten fehlen. Die gute Nachricht: Sie können jede dieser fünf Baustellen selbst finden, heute, ohne ein einziges Werkzeug zu kaufen.

1. Bilder ohne Alternativtext

Wer nicht sieht, lässt sich Websites vorlesen. Ein Bild ohne Alternativtext ist für die Vorlesefunktion ein Loch: Sie sagt dann „Bild" oder liest den Dateinamen vor, „IMG_4711.jpg". Wenn auf dem Bild Ihre Öffnungszeiten oder Ihr Angebot stehen, ist diese Information für einen Teil Ihrer Kundschaft schlicht nicht vorhanden.

Selbsttest: Fahren Sie mit der Maus über Ihre Bilder oder lassen Sie sich die Seite von der Vorlesefunktion Ihres Handys vorlesen. Kommt bei den Bildern etwas Sinnvolles?

Nebeneffekt: Der Alternativtext ist derselbe Text, den auch Google liest. Gepflegte Alt-Texte sind eine der ältesten SEO-Hausaufgaben überhaupt.

2. Zu wenig Kontrast

Hellgraue Schrift auf weißem Grund sieht im Designentwurf elegant aus. Auf dem Handydisplay in der Mittagssonne, mit Lesebrille oder mit sechzigjährigen Augen ist sie unlesbar. Die Anforderung ist messbar: Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5 zu 1 zum Hintergrund.

Selbsttest: Gehen Sie mit dem Handy nach draußen und rufen Sie Ihre Website im Sonnenlicht auf. Oder stellen Sie das Display auf Graustufen. Was Sie dann noch lesen können, können auch Ihre Kunden lesen.

3. Ohne Maus geht nichts

Viele Menschen bedienen den Rechner nur mit der Tastatur: wegen Zittern, Rheuma, einer Sehbehinderung oder schlicht, weil die Maus kaputt ist. Eine barrierefreie Seite lässt sich komplett mit der Tab-Taste durchwandern, und man sieht dabei immer, wo man gerade ist.

Selbsttest: Legen Sie die Maus weg. Drücken Sie auf Ihrer Website wiederholt die Tab-Taste. Springt eine sichtbare Markierung von Link zu Link? Erreichen Sie das Menü, das Formular, den Bestell-Knopf? Wenn Sie irgendwo hängen bleiben oder die Markierung unsichtbar ist, haben Sie Baustelle Nummer drei.

4. Formulare, die nicht sagen, was sie wollen

Ein Eingabefeld ohne dauerhafte Beschriftung, ein rotes Sternchen als einzige Fehlererklärung, eine Meldung „Eingabe ungültig" ohne Hinweis, welches Feld gemeint ist: Für Menschen mit Vorlesefunktion sind solche Formulare unbenutzbar, und alle anderen ärgern sich auch. Jedes Feld braucht eine Beschriftung, die auch beim Ausfüllen sichtbar bleibt, und Fehlermeldungen müssen sagen, wo das Problem liegt und wie es sich beheben lässt.

Selbsttest: Füllen Sie Ihr eigenes Kontakt- oder Bestellformular absichtlich falsch aus. Verstehen Sie aus der Fehlermeldung ohne Nachdenken, was zu tun ist?

Das ist übrigens die Baustelle mit dem direktesten Geldbezug: Jedes abgebrochene Formular ist eine Anfrage, die Sie nie erreicht hat.

5. Die PDF-Falle

Die Speisekarte als eingescanntes PDF, die Preisliste als Foto im Anhang: Für Vorlesefunktionen ist ein Scan ein einziges großes Bild ohne Inhalt. Auf dem Handy ist er außerdem eine Zumutung zum Zoomen. Wo es geht, gehören solche Inhalte als normaler Text auf die Website. Wo es ein PDF sein muss, dann eines mit echtem Text statt eines Fotos.

Selbsttest: Öffnen Sie Ihr PDF und versuchen Sie, eine Textstelle mit der Maus zu markieren. Geht nicht? Dann ist es ein Bild, und niemand kann es sich vorlesen lassen oder durchsuchen.

Was das kostet

Für die meisten kleinen Websites reden wir bei diesen fünf Punkten über Stunden, nicht über Wochen. Alt-Texte pflegen, zwei Farbwerte ändern, Formularbeschriftungen ergänzen: Das ist Handwerk. Teuer wird es erst, wenn ein Baukasten oder ein altes System sich grundsätzlich sperrt. Dann ist das ein guter Anlass, über den Unterbau zu reden, denn eine Seite, die sich gegen Barrierefreiheit wehrt, wehrt sich meist auch gegen alles andere.

Für die, die es genau wissen wollen: Die fünf Baustellen entsprechen den WCAG-Erfolgskriterien 1.1.1 (Nicht-Text-Inhalte), 1.4.3 (Kontrast, Minimum 4,5:1 bei Normaltext, 3:1 bei großem Text), 2.1.1 (Tastaturbedienbarkeit) samt 2.4.7 (sichtbarer Fokus) sowie 3.3.1 bis 3.3.3 (Fehlererkennung, Beschriftungen, Korrekturhinweise). Kostenlose Prüfwerkzeuge: die Lighthouse-Prüfung im Chrome-Browser (Rechtsklick, Untersuchen, Reiter Lighthouse), die Browser-Erweiterung WAVE und axe DevTools; Kontraste rechnet zum Beispiel der Contrast Checker von WebAIM. Automatische Tools finden erfahrungsgemäß nur einen Teil der Probleme, der Tab-Tasten-Test von Hand bleibt durch nichts ersetzt.