Im Hintergrund Eislandschaft mit Pfeiler uns Seil als Absperrung. Darüber Schriftzug "3Tipps wie du deine Webseite schnell barrierefrei gestalten kannst"

3 Tipps für deine barrierefreie Webseite

Zunächst: Was bedeutet eine barrierefreie Webseite eigentlich? Einfach gesprochen heißt dies, dass auch Menschen mit körperlichen Einschränkungen deine Webseite lesen bzw. verstehen und sich darüber informieren können. Körperliche Einschränkungen können zum Beispiel Seh- oder Hörschwächen sein. Das Gute: Wenn du hierauf achtest, wird sich deine Webseite grundsätzlich verbessern. Und es gibt viele sehr einfache Handgriffe, die du von Beginn anwenden kannst, um deine Webseite so nutzer:innenfreundlich wie möglich zu machen.

Wir haben drei Tipps für dich, mit denen du sofort loslegen kannst:

1. Gestalte Grafiken und Texte auf Bildern kontrastreich

Helle Schrift auf hellem Untergrund ist schlecht sichtbar. Auch Schrift auf Fotos, in denen abwechselnd helle und dunkle Parts zu sehen sind, ist stellenweise schwer erkennbar. Zusätzlich wird das Lesen der Schrift durch den unruhigen Hintergrund erschwert. Gerade für Menschen mit Sehschwäche stellt das eine zusätzliche Hürde beim Verständnis deiner Webseite dar.
Die Lösung: Nutze ruhige Hintergründe und wähle kontrastreiche Farbkombinationen. Wähle dunkle Schrift vor hellem Hintergrund und helle Schrift vor dunklem Hintergrund.

Du kannst auch mit Farbfeldern arbeiten und beispielsweise einen dunkelgrauen Layer zwischen eine helle Schrift und einen eher hellen oder unruhigen Hintergrund ziehen. Diesen Layer kannst du in Grafikprogrammen wie Canva auch mit einer hohen oder niedrigen Transparenz gestalten, sodass das Bild dahinter noch in Ansätzen sichtbar bleibt.

2. Nutze den ALT-Text und fülle diesen aus

In WordPress kannst du den Bildern in deiner Mediathek ALT-Texte verpassen. Auch auf Social Media Plattformen wie Instagram und LinkedIn ist dies mittlerweile sehr einfach machbar. Ein ALT-Text ist ein alternativer Text, der das Bild beschreibt. Er wird zum einen dann angezeigt, wenn ein Bild nicht angezeigt werden kann, zum anderen befindet sich die ALT-Beschreibung in der HTML deiner Webseite und Menschen mit Sehschwäche können sich diesen mittels eines Screenreaders vorlesen lassen.

Positiver Nebeneffekt: ALT-Texte erzeugen SEO. Bilder, die mit ALT-Texten ausgestattet wurden, sind für und durch Suchmaschinen besonders leicht zu finden. Das merkst du auch, wenn du Plugins wie Yoast SEO für deine Webseite nutzt. Dieses gibt explizit an, wenn es feststellt, dass deine Bilder keine Beschreibung haben bzw. in dieser dein Hauptkeyword fehlt.

3. Erstelle Untertitel oder Texte als Videobeschreibung

Wenn du mit Videos auf deiner Webseite arbeitest, denk daran, einen Untertitel zu erstellen. Es gibt eine Handvoll kostenfreie Apps wie Caption, die diesen für dich automatisch generieren, sodass du ihn nur noch bearbeiten und korrigieren musst. Das ist vor allem für Menschen mit Hörschwäche wichtig. Aber auch Menschen, die keine Hörschwäche haben, schauen und hören dir nicht immer zu. Denk zum Beispiel an Instagram-Stories: Wie oft schaust du dir diese mit Ton an? Und wie oft bist du froh, wenn du einfach die Untertitel lesen und weiterswipen kannst?

Alternativ zum Untertitel direkt im Video kannst du natürlich auch unter dem Video einen Text verfassen mit einer entsprechenden Videobeschreibung. Auch das kann übrigens hilfreich für deine SEO sein.

Es gibt noch mehr, was deine Webseite barrierefrei macht, denn…

Grundsätzlich ist mit Barrierefreiheit die größtmögliche Bedienungsfreundlichkeit gemeint. Dazu zählen auch Ladezeiten und die leichte Auffindbarkeit von Informationen. Achte also auf kleinere Dateiformate (schont auch die Umwelt) und ein einfach strukturiertes Menü plus sinnvoller Seitenführung. Dann bist du auf einem guten Weg, denn auf einer sinnvoll gestalteten Webseite bleiben Interessent:innen länger und werden ggf. zu Kund:innen.

Weitere Tipps findest du zum Beispiel in diesem Artikel der Aktion Mensch:

https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreie-website