Web-Barrierefreiheit verständlich erklärt für Inhaber kleiner Unternehmen (ohne Spezialisten einzustellen)

Sie haben gehört, dass Ihre Website "barrierefrei" sein sollte, und wahrscheinlich stellten Sie sich sofort ein teures Audit, einen Spezialisten und eine Liste unmöglich zu lesender Anforderungen vor. Die gute Nachricht: Der größte Teil des Gewinns kommt aus ein paar einfachen Entscheidungen, die Sie selbst überprüfen können, an einem Nachmittag, ohne eine einzige Zeile Code zu schreiben.

Barrierefreiheit bedeutet nicht nur "Website für Menschen mit Behinderungen". Es bedeutet eine Website, die jemand auf dem Handy in der Sonne nutzen kann, ein älterer Kunde, der den grauen Text nicht gut sieht, oder jemand, der per Tastatur navigiert. Praktisch gesehen rufen mehr Menschen bei Ihnen an oder füllen Ihr Formular aus. In diesem Artikel zeige ich Ihnen genau, worauf Sie achten und was Sie korrigieren sollten, in der Reihenfolge ihrer Wichtigkeit.

Was Barrierefreiheit wirklich bedeutet (und warum sie Sie betrifft)

Web-Barrierefreiheit bedeutet, dass Ihre Website von möglichst vielen Menschen genutzt werden kann, unabhängig von Sehvermögen, Gehör, Mobilität oder dem Kontext, in dem sie sich befinden (günstiges Handy, schwaches Internet, Bildschirm in praller Sonne).

Es geht nicht um "politische Korrektheit". Es ist sehr pragmatisch: Jede Person, die den Preis nicht lesen, den Button nicht drücken oder die Telefonnummer nicht finden kann, ist ein verlorener Kunde. Die meisten Barrierefreiheitsprobleme sind eigentlich Usability-Probleme, die alle betreffen.

Ein weiterer konkreter Vorteil: Google "liest" eine barrierefreie Website leichter. Klarer Text, korrekt beschriebene Bilder und eine logische Struktur helfen auch bei SEO, nicht nur bei Ihren Lesern. Sie arbeiten also einmal und lösen zwei Probleme gleichzeitig.

Der Textkontrast — der günstigste Gewinn

Das häufigste Problem bei Websites kleiner Unternehmen ist hellgrauer Text auf weißem Hintergrund. Auf dem Laptop des Designers wirkt das "elegant", wird aber auf einem Handy auf der Straße oder für ein müdes Auge unlesbar.

Praktische Regel: dunkler Text auf hellem Hintergrund (oder umgekehrt), ohne "grenzwertige" Abstufungen. Der WCAG-Standard verlangt einen Kontrast von mindestens 4,5:1 für normalen Text — klingt technisch, lässt sich aber kostenlos prüfen.

• Suchen Sie bei Google nach "WebAIM Kontrast Checker", geben Sie den Farbcode von Text und Hintergrund ein, und er sagt Ihnen, ob es besteht.
• Prüfen Sie besonders kleinen Text: Fußzeilen, Preise, Bedingungen, Buttons mit dünner Schrift.
• Verlassen Sie sich nicht nur auf Farbe. Wenn Sie einen Fehler nur mit Rot markieren, sieht das jemand mit eingeschränktem Farbsehen nicht — fügen Sie auch Text hinzu ("Pflichtfeld").

Alternativtext bei Bildern (Alt-Text)

Jedes wichtige Bild sollte eine kurze Textbeschreibung haben — den "Alt-Text". Screenreader für blinde Menschen nutzen ihn, aber er erscheint auch, wenn das Bild nicht lädt (schwaches Internet), und Google liest ihn für den Kontext.

So machen Sie es richtig, ohne Aufwand:

• Beschreiben Sie, was am Bild nützlich ist, kurz und natürlich: "Torte mit Waldbeeren, zwei Etagen" — nicht "IMG_2043".
• Bei rein dekorativen Bildern (eine Hintergrundtextur) lassen Sie die Beschreibung leer, damit der Screenreader nicht gestört wird.
• Stopfen Sie keine SEO-Keywords hinein. Schreiben Sie für einen Menschen, der das Bild nicht sieht.

Auf den meisten Plattformen (WordPress, Wix, jeder Website-Baukasten) gibt es ein Feld "Alternativtext" direkt neben dem Bild. Es dauert nur wenige Sekunden pro Foto.

Buttons, Links und Formulare, die jeder nutzen kann

Hier gehen die meisten Conversions verloren, selbst wenn der Rest der Website gut aussieht.

• Buttons und Links, die mit dem Finger getroffen werden, müssen groß genug und ausreichend beabstandet sein. Wenn Sie selbst auf dem Handy Schwierigkeiten haben, sie zu treffen, geht es dem Kunden genauso.
• Der Linktext sollte sagen, wohin er führt: "Speisekarte ansehen" oder "Jetzt anrufen", nicht "Hier klicken". Wer aus einer Linkliste navigiert, muss ohne den umgebenden Kontext verstehen, worum es geht.
• Bei Formularen braucht jedes Feld eine sichtbare Beschriftung (Name, Telefon), nicht nur einen grauen Text, der beim Tippen verschwindet.
• Telefonnummer und Adresse sollten echter Text sein, kein Bild. So können sie direkt angetippt und von jedem Gerät vorgelesen werden.

Ein schneller Test: Versuchen Sie, die Seite nur mit der Tab-Taste zu durchlaufen. Wenn Sie den Button erreichen können und klar sehen, wo Sie sich befinden, sind Sie auf dem richtigen Weg.

Häufige Fallen und wie Sie wissen, ob Sie gut aufgestellt sind (ohne bezahltes Audit)

Einige Fehler, die ich häufig sehe:

• "Barrierefreiheits-Widgets" (diese Leiste mit Icons, die verspricht, die Website mit einem Klick barrierefrei zu machen). Meist lösen sie die eigentlichen Probleme nicht und verschlimmern sie manchmal sogar. Das ist keine magische Lösung — besser ist es, an der Quelle zu korrigieren.
• Text über überladenen Bildern ohne Kontrast.
• Zu kleine Schrift. Unter 16px für den Haupttext wird auf dem Handy schwer lesbar.
• Video, das automatisch mit Ton startet.

So prüfen Sie selbst, kostenlos: Öffnen Sie die Website auf dem Handy, bei Licht; vergrößern Sie den Text im Browser und sehen Sie, ob etwas kaputtgeht; durchlaufen Sie die Seite mit der Tab-Taste; führen Sie einen automatischen Test durch (suchen Sie "WAVE accessibility" oder nutzen Sie den "Accessibility"-Bericht in Lighthouse, in Chrome). Das erfasst nicht alles, zeigt Ihnen aber die einfachen Gewinne.

Wenn Sie möchten, bauen wir bei MPO Web Studio eine kostenlose Demo Ihrer Website, bereits korrekt gedacht in Bezug auf Kontrast, Struktur und Mobilgeräte — Sie sehen sie, bevor Sie etwas bezahlen, wir arbeiten remote im ganzen Land und sagen Ihnen transparent, was es kostet. Schreiben Sie uns auf WhatsApp, und wir machen eine schnelle Prüfung dessen, was Sie aktuell haben.