Wie erstelle ich eine barrierefreie Website?

Wie erstelle ich eine barrierefreie Website?

4,3 Minuten

Barrierefreies Webdesign

Ihre Website sieht vielleicht super aus, Sie haben sich für tolle Schriften und Farben entschieden. Aber wie erleben Menschen mit und ohne Behinderungen Ihre Website? Finden sie sich auf der Website zurecht? Eine hohe Nutzerfreundlichkeit (Usability) führt automatisch auch zu mehr Nutzer und ein besseres Ranking in den Suchmaschinen.

Bis zum 28. Juni 2025 ist die Barrierefreiheit laut Barrierefreiheitstärkungsgesetz (BFSG) auf Websites verpflichtend.

Hier finden Sie einige Punkte, die Sie beim Erstellen einer barrierefreien Website beachten sollten.

Inhalt

Wie erstelle ich eine barrierefreie Website?

Die wichtigsten Dinge zur digitalen Barrierefreiheit.

Farben für eine barrierefreie Website:

Die richtigen Farben für eine barrierefreie Website zu finden ist wichtig.
Stellen Sie sich vor, Sie gestalten eine grün/rote Website, der User ist aber rot-grün Blind. Er würde die Website nicht so wahrnehmen, wie es von Ihnen angedacht war. Es gibt noch weitere Augenkrankheiten, die es Menschen schwer machen, die unterschiedlichen Farben zu erkennen. Achten Sie darauf, dass sich die Farben dahingehend ergänzen, dass allzu große Ähnlichkeiten ausgeschlossen werden.

Die Schriftfarbe sollte sich gut vom Hintergrund abheben. Wählen Sie einen großen Kontrast zwischen den Farben. Damit Menschen mit verschiedensten Sehfehlern den visuellen Inhalt der Website gut erfassen können, sollten Sie die Farbkombinationen zuvor auf Accessability (Barrierefreiheit) testen.

Ein gutes Tool zur Kontrolle der Accessibility von Farben finden Sie bei ColorHexa und Adobe Color

Malerpinsel, die dicke Striche in den Farben Rot, Orange, Gelg, Grün, Blau und Schwarz ziehen. Farben auf der Website sollten barrierefrei sein.

Schriften für eine barrierefreie Website:

Welche Typografie ist die richtige?
Die Schrift sollte auf alle Fälle gut lesbar sein. Handelt es sich um ein l oder um ein I ? Bei einigen Schriften ist dieses nicht zu unterscheiden.
Aber auch die Schriftgröße und der Zeichenabstand beeinflussen die Lesbarkeit der Texte. Wählt die Schriftgröße nicht zu klein Ich verwende hier eine Schriftgröße von 18px für den normalen Text. Der Zeichenabstand sollte so groß gewählt werden, dass einzelne Zeichen nicht zu eng zusammenstehen. Bei einer Fehlsichtigkeit verschwimmen ansonsten die Zeichen und so wird schnell aus einem „rn“ ein „m“. Achten Sie auch auf einen geeigneten Zeilenabstand.

Der Buchstabe A in verschiedenen Schriften. Am Anfang ein großes A in Rot und am Ende ein großes Z in rot. Ansonsten sind die Buchstaben weiß. Alles auf schwarzem Hintergrund. Die Auswahl der Schrift für eine Website sollte barrierefrei sein.

Google liefert eine Menge barrierefreie Schriften, die Sie in Ihre Website einbetten können. Aber achten Sie auf die Datenschutz – konforme Einbindung in Ihre Website.

Bilder und Videos auf barrierefreien Websites:

Versehen Sie ihre Bilder mit ALT-Attributen, damit Menschen mit einer Sehschwäche die Möglichkeit haben, dass ihnen der Inhalt der Bilder vorgelesen wird. Gegebenenfalls nutzen Sie beschreibende Texte zu den Bildern.

Versehen Sie Videos mit Sprungmarken und, wenn möglich, mit Untertiteln, damit die Inhalte schnell und leicht erfasst werden können.

Animationen auf barrierefreien Websites:

Es existieren inzwischen viele Möglichkeiten Ihre Website mit Animationen aufzupeppen. Ob es große Slider sind, Bereiche, die von links, rechts, oben oder unten in die Seite hineinfliegen. Hüpfen, Verblassen, Blinken, Wackeln, Gleiten, Zoomen,… alles ist möglich.
Nur; was macht das mit Menschen mit ADHS? Diese Menschen sind mit allzu vielen Bewegungen überfordert. Sie werden durch die Animationen abgelenkt und lesen den Text nicht mehr aufmerksam.
Gehen Sie also sparsam und / oder mit Bedacht mit solchen Animationen um. Oder Sie geben solchen Nutzern die Möglichkeit, die Animationen auszuschalten.

Links:

Kennzeichnen Sie Links auf der Website klar, so dass sie schnell als solche erkannt werden. Entweder Sie heben sie farblich in einer einheitlichen Farbe hervor, oder Sie stellen sie unterstrichen dar.

Sprache:

Um Ihr Webangebot für möglichst viele Menschen zugänglich zu machen, verwenden Sie eine leichte, klare Sprache. Beachten Sie auch, das Lesen Ihrer Inhalte zu vereinfachen, durch

  • Erklärung von Fachbegriffen
  • Nutzung von Zwischenüberschriften
  • Verwendung von Aufzählungen und Tabellen

Bedienung:

Achten Sie darauf, dass Ihre Website auch ohne Maus und Tastatur bedienbar ist. Screenreader (ein Programm, dass sehbehinderten Menschen den Inhalt der Website vorliest oder ihn auf deren Computerausgabegerät zur blindenschrift-Darstellung darstellt) sollen den Inhalt Ihrer Website verarbeiten können.

Ein Computer mit einem Braillerdisplay für barrierefreies Webdesign

Formulare:

  • Halten Sie Ihre Formulare kurz und verwenden Sie Pflichtfelder nur für notwendige Infos.
  • Benennen Sie die Formularfelder, so dass der Screenreader sie verarbeiten kann.
  • Versehen Sie die Formulare nicht mit einer Zeitschranke zur Eingabe
  • Weisen Sie auf Fehler bei der Eingabe hin und geben Sie die Möglichkeit der Korrektur

Mehr Informationen

Wenn Sie weitere Informationen zum barrierefreien Webdesign suchen, so schauen Sie einmal auf der Website von Aktion Mensch, wo Sie viele Ratschläge und Links zum Testen, Erstellen und gesetzliche Grundlagen zur Barrierefreiheit im Webdesign erhalten.

Tools für barrierefreie Websites:

Sie finden im Internet verschiedene Tools, die den Inklusionsbedarf Rechnung tragen und eine digitale Teilhabe von Menschen mit und ohne Behinderungen möglich machen. Aber auch hier müssen Sie auf die DSGVO – konforme Einbettung derartiger Tools achten.

Barrierefreiheit der eigenen Website prüfen:

Um Ihre Website auf Barrierefreiheit zu prüfen, finden Sie im Internet einige nützliche Tools.

Dieser Beitrag dient nur zur Information. Für die Vollständigkeit und Richtigkeit übernehme ich keine Gewährleistung. Als Webdesigner kann und darf ich Ihnen im Sinne des Rechtsdienstleistungsgesetzes keine Beratung geben. Um auf Nummer sicher zu gehen, kontaktieren Sie bei Fragen zu Rechtsdingen bitte immer einen Fachanwalt oder einen Datenschutzexperten.

Accessibility: Männchen auf rotem Kreis. Für barrierefreie Websites

Kontakt