Technische Barrierefreiheit

Was ist Technische Barrierefreiheit?

Sie klicken auf einen Button – und es passiert scheinbar nichts, obwohl er eigentlich funktionieren sollte. Oder ein Formular zeigt einen Fehler nur farblich an, sie nutzen die Seite aber mit einem Screenreader und verstehen nicht, warum Sie das Formular nicht abschicken können. Genau solche Hürden begegnen vielen Nutzer*innen täglich. Technische Barrierefreiheit sorgt dafür, dass solche Stolperfallen gar nicht erst entstehen.

Die Grundvoraussetzung: ein sauber aufgebautes HTML

Eine Website ist immer nur so gut wie ihr Fundament. Überschriften sollten echte Überschriften sein, Listen echte Listen, Buttons echte Buttons. Screenreader lesen nur, was semantisch korrekt ist. Wer hier nicht sauber arbeitet, baut unsichtbare Hürden ein – die manche Nutzer*innen einfach nicht überwinden können.
Was heißt das für Ihre Seiten: Alle Elemente müssen im HTML, also im Code, richtig formatiert sein. Eine Überschrift kann also nicht einfach Fließtext sein, der fett gemacht wurde und eine größere Schrift bekommen hat, so, wie man beispielsweise auch in Word Überschriften als solche anlegen kann. Nur korrekt formatierte Elemente kann ein Screenreader auch als solche erkennen und sinnvoll ausgeben. Und nur dann ist eine Seite auch mit einem solchen Gerät nutzbar.
Die semantisch korrekte Gliederung einer Seite hat noch einen weiteren Vorteil. Sie strukturiert die Seite optisch. Das sieht schön aus. Und Menschen, die schlecht sehen, kommen wesentlich besser zurecht.

Tastatur vor Maus

Alles, was klickbar ist, muss auch per Tastatur bedienbar sein. Menüs, Slider, Pop-ups – sie müssen sich tabben lassen. So nennen es Entwickler*innen, wenn die Steuerung (wenigstens in den allermeisten Fällen) über die TAB-Taste funktioniert. Man braucht also für die Steuerung keine Maus.
Wer das nicht mitdenkt, macht die Website für viele Nutzer*innen unbenutzbar. Außerdem: Die Tastatursteuerung ist in Web-Standards explizit vorgeschrieben.
Für wen ist die Tastatursteuerung wichtig? Für

• Menschen mit motorischen Einschränkungen
• Power-User
• Screenreader

Ebenfalls zu beachten: der Fokuszustand. Durch ihn wird die Tastatursteuerung erst komplett. Fokuszustand klingt erst einmal geheimnisvoll. Gemeint ist aber, dass der Fokuszustand anzeigt, welches Element auf einer Webseite gerade aktiv ist.

Texte, Labels, Alternativen – keine Schnickschnack-Lösung

Bilder, Icons, grafische Navigation und Formulare – alles braucht klare, erklärende Beschriftungen. Ein Alternativ-Text, also ein Text, der beschreibt, was auf einem Bild zu sehen ist, ist Pflicht, damit Screenreader die Inhalte vorlesen können. ARIA-Labels (Accessible Rich Internet Applications) ergänzen HTML, wenn zusätzliche Hinweise nötig sind: Die Labels signalisieren den Assistenztechnologien genau, welche Funktion ein Element hat – zum Beispiel bei Symbol-Buttons ohne Text oder bei dynamischen Menüs und Schaltern. Wichtig ist: ARIA ersetzt kein sauberes HTML, sondern unterstützt es. Ohne solche Angaben bleiben Inhalte für viele Nutzer*innen unsichtbar.

Kontrast, Skalierung, Layout – Lesbarkeit ist das Wichtigste

Text muss lesbar bleiben, Buttons gut sichtbar, Inhalte müssen skalierbar sein, ohne dass das Layout zusammenbricht. Dazu gehören gute Kontraste. Hier gibt es zwei Möglichkeiten: Entweder Sie wählen sowieso kräftige Farben und starke Kontraste. Oder die Website bekommt eine zweite, kontrastreiche Version. Dies ist bei durchdesignten Internetauftritten mit zarten Farben ein echtes Muss. Wie stark der Kontrast ist, das kann man ganz leicht messen. Und es gibt für verschiedene Schriftgrößen verschiedene Standards, wie groß er sein muss, damit die Webseite als barrierefrei gilt.
Die Schrift sollte so gewählt werden, dass sie gut lesbar ist. Am besten serifenlos. Und auch die Schriftgrößen sollten von vorneherein so groß sein, dass sie das Lesen leicht machen. Und gut skalierbar sein. Egal ob die Schriftgröße über Bedienfelder auf der Seite oder über den Zoom im Browser skaliert wird: Die Seite muss gut lesbar bleiben.
Außerdem gilt: Die Seite immer gut strukturieren, mit Absätzen, Aufzählungen und selbstverständlich Auszeichnungen, beispielsweise Link-Tags.
Responsives Design ist kein Bonus – es ist Teil der Barrierefreiheit. Und für eine professionelle Internetseite unabdingbar. Denn: Nur echt responsive Webseiten werden auf allen Bildschirmgrößen und den verschiedenen Endgeräten auch richtig angezeigt. In jedem Browser und mit jedem Zoom.

Formulare & Fehlermeldungen – klare Ansagen

Ein optischer Fehlerhinweis in einem Formular: Sieht schön aus, und kann man gerne machen. Aber eben nicht nur. Es muss auch einen verständlichen, maschinenlesbaren Hinweis geben. Sonst wird aus einem simplen Formular schnell eine Hürde.

Kompatibel mit Screenreader und Co

Ob mit Screenreader, Sprachsteuerung oder Vergrößerungssoftware – eine Website muss zuverlässig mit allem funktionieren. Und hierbei ist der sauberste HTML-Code die beste Option.

Kurz gesagt: Technische Barrierefreiheit ist keine Spielerei. Sie ist der Code, der dafür sorgt, dass Websites wirklich nutzbar sind – für alle. Wer diese Regeln ernst nimmt, baut richtig gute digitale Räume, modern, strukturiert und zukunftssicher.

Sie wollen eine barrierefreie Webseite? Kontaktieren Sie uns. Wir freuen uns auf Ihr Projekt!