We.Blog.Digital.

Barrierefreie Websites – Was ist zu beachten?

Barrierefreie Websites – Was ist zu beachten?

Barrierefreie Websites ermöglichen Personen mit Einschränkungen den vollen Zugang zu Websites. Dieser Beitrag zeigt, wie barrierefreie Websites gestaltet werden und welche Vorteile barrierefreie Websites außerdem noch mitbringen.

Was sind barrierefreie Websites?

Barrierefreiheit im Web sollte heutzutage eigentlich eine Selbstverständlichkeit sein. Alle Nutzer*innen sollten die Möglichkeit haben, Websites inhaltlich zu verstehen und sich problemlos auf diesen zurechtzufinden.

Barrierefreiheit beginnt bereits bei Personen, die über eine geringe Sprach- oder Lesekompetenz oder eine Konzentrationsschwäche verfügen, umfasst aber ebenso die Personen, die motorisch eingeschränkt sind oder an einer Sehschwäche leiden. Personen mit Beeinträchtigungen nutzen beispielsweise reine Tastatursteuerungen, aber auch Braillezeilen, Sprachausgaben, oder Joysticks. Daher ist es wichtig, Websites für jede Art der Steuerung zu programmieren.

Vorteile barrierefreier Websites

Eine barrierefreie Website dient hauptsächlich dazu, dass vor allem Personen mit Beeinträchtigungen die Inhalte verstehen und sich leicht auf der Website zurechtfinden können. Allerdings ist eine leichte Bedienbarkeit nicht nur für Personen mit Beeinträchtigungen relevant, sie wirkt sich ebenfalls positiv auf das Verhalten aller Nutzer*innen aus. Denn eine klare Struktur und einfache Texte ermöglichen, dass alle Nutzer*innen die Botschaft der Website verstehen.

Außerdem sind barrierefreie Websites aufgrund ihrer umfassenden Programmierung sehr suchmaschinenfreundlich. Seit geraumer Zeit ist die Barrierefreiheit einer Website ein Ranking-Faktor für die Suchmaschinenoptimierung (SEO). Als Maßgabe gilt: Ist die Website einfach und verständlich für die Nutzer*innen, kann es sich positiv auf die Platzierung in den Google-Suchergebnissen auswirken. Wer mehr über die Ranking-Kriterien von Suchmaschinen lernen möchte, ist in unserem wigital Academy Workshop herzlich willkommen.

Vorteile im Überblick:

  • Optimale Nutzerfreundlichkeit
  • Nachhaltige Kundenzufriedenheit
  • Erweiterte Kundenzielgruppe
  • Gesteigerte Positionierung gegenüber Mitbewerbern
  • Verbesserte Sichtbarkeit in Suchmaschinen

Der einfache Website-Check auf Barrierefreiheit

Wie prüfe ich, ob meine Website barrierefrei ist? Wo gibt es Optimierungsbedarf? Mithilfe ein paar leichter Tricks kann man die eigene Website ganz einfach barrierefrei gestalten.

In dem Workshop zur Suchmaschinenoptimierung im Rahmen der wigital Academy wird neben Hinweisen zur Barrierefreiheit weiterführendes Wissen für erfolgreiche Websites vermittelt.

Einfache Website-Struktur

Die Struktur einer Website ist für eine barrierefreie Gestaltung möglichst einfach zu halten. Außerdem bedarf es einer aussagekräftigen Formulierung der Überschriften jeder Hierarchiestufe (h1,h2 usw.). Werden Frames genutzt, sind diese sinnvoll einzusetzen. Frames dienen der Unterteilung einer Website in einzelne Segmente. Screenreader können nur einen Frame zur Zeit betrachten, daher müssen Frames ebenfalls mit aussagekräftigen Überschriften versehen werden.

Kontrastreiche Textelemente

Bei der Einbindung von Texten ist zu beachten, dass die Schrift einen hohen Kontrast zur Hintergrundfarbe der Website aufweist. Außerdem ist bei der farblichen Gestaltung von Textelementen eine Rot-Grün-Schwäche potentieller Nutzer*innen zu berücksichtigen. Eine kontrastreiche Textgestaltung bietet neben der Barrierefreiheit ebenfalls den Vorteil, dass die Nutzer*innen die Inhalte auch bei direkter Sonneneinstrahlung problemlos lesen können.

Verständliche Sprache

Texte gilt es so zu formulieren, dass möglichst viele Nutzer*innen den Inhalt leicht verstehen. Deshalb verwendet man bestenfalls kurze Sätze und vermeidet einen komplizierten Satzbau. Darüber hinaus ist auf die Nutzung von Fremdwörtern möglichst zu verzichten.

Kontrastreiche Bildelemente mit einer aussagekräftigen Beschreibung

Genau wie die Texte, sind wichtige Grafiken auf einer barrierefreien Website kontrastreich darzustellen. Die genutzten Bildelemente erhalten darüber hinaus aussagekräftige Alternativtexte (Alt-Tags). Mithilfe von Alt-Tags können Bildinhalte in Schriftform erklärt werden und sind so für Menschen mit Sehbehinderung verständlich. Außerdem haben Alt-Tags auch einen positiven Einfluss auf das SEO-Ranking einer Website.

Audio- und Videomaterial mit Untertiteln

Möchte man Audio- und Videomaterial in seine Website einbinden ist zu berücksichtigen, dass diesen Dateien zwecks barrierefreier Gestaltung eine Textbeschreibung beigefügt wird. Audio- und Videodateien erhalten in diesem Fall Untertitel, damit gehörlose Personen einen Zugang zu diesen Inhalten bekommen. Um Menschen mit Sehbehinderung Informationen aus Videodateien zu vermitteln, können diese mit Audiospuren versehen werden.

Bedienflächen in angemessener Größe

Bedienflächen, wie Buttons, benötigen eine Optimierung hinsichtlich der mobilen Nutzung. Die Bedienflächen müssen deshalb so groß sein, dass sie leicht mit den Fingern zu erreichen sind. Auch hier ist hinsichtlich der Barrierefreiheit zu berücksichtigen, dass der Kontrast zwischen Text- und Hintergrundfarbe in einem angemessenen Verhältnis steht.

Benutzerfreundliche Formulare

Bei der Gestaltung barrierefreier Formulare ist es wichtig, dass die Eingabefelder mit Labeln versehen werden. Das erleichtert den Nutzern*innen die Eingabe der persönlichen Daten. Die Nutzer*innen gelangen dank der Labels durch das Anklicken der Feld-Beschriftung in das jeweilige Eingabefeld.

Google Lighthouse Plugin

Google Lighthouse ist ein Open-Source-Tool, dass der Qualitätsverbesserung von Websites dient. Das kostenlose Plugin bietet die Möglichkeit, die eigene Website auf ihre Barrierefreiheit testen. In dem Bereich Accessibility wird geprüft, inwieweit Personen mit Einschränkungen die Website nutzen können und wo Optimierungsmöglichkeiten bestehen. Hier gibt es weitere Informationen rund um das Tool und die Möglichkeit zum Download.

Hilfe bei der Gestaltung barrierefreier Websites

Probleme bei der Umsetzung? Kein Problem!
Wir bieten zum einen Workshops in Kiel innerhalb unserer wigital Academy rund um das Thema Suchmaschinenoptimierung an.

Mehr über den SEO Workshop erfahren.

Oder kontaktiere uns direkt über das Kontaktformular

Unverbindliche Anfrage stellen

Autorin: Lara Felten


SEO-Text vs. Kreativtext?

PSD2 – wieso, weshalb, warum?