Wie erreiche ich
Barrierefreiheit?

Barrierefreiheit zu erreichen muss nicht schwer sein, wenn man sich vorher darüber informiert, was zu beachten ist und wie man diese Punkte umsetzen kann. Hier sind einige wichtige Punkte, die beim Design einer Webseite in Betracht gezogen werden sollten.

Visuelles Design

Textdarstellung

Zu viel Text auf einmal und große Textblöcke bereiten vielen Menschen Schwierigkeiten. Texte sollten klar ersichtlich strukturiert sein, beispielsweise durch eine klare Struktur und Zwischenüberschriften.

DO’s

Grafik mit Beispiel für Textstruktur

DONT’s

Darstellung eines Textblocks

Layout

Das Layout sollte klar und linear sein und die Seite sollte nicht überfüllt sein. Zudem ist es von Vorteil, wenn der Inhalt nicht über die gesamte Breite gezogen wird, sodass er vergrößert werden kann, ohne dass man horizontal scrollen muss.

Darstellung eines klaren Layouts
Darstellung eines unübersichtlichen Layouts

Kontraste

Menschen mit Sehbehinderungen haben oft Probleme mit dem Lesen, wenn der Kontrast zwischen Schrift und Hintergrundfarbe zu niedrig ist, was oft nicht bedacht wird. Daher ist es wichtig, hohe Farbkontraste beim Design miteinzubeziehen.

Darstellung eines Bs in heller Farbe auf dunklem Hintergrund
Darstellung eines hellen Bs auf hellem Hintergrund

Farben

Farben sind oft ein wichtiger Bestandteil der visuellen Darstellung, jedoch sollte man darauf achten, nicht zu grelle Farben zu nutzen und zu kombinieren.

Darstellung eines Farbkontrasts in weichen Farben
Darstellung eines Farbkontrastes mit grellen Farben

Farben und Informationen

Benutze nicht nur Farben, sondern auch Muster oder Formen, um Informationen darzustellen und zu unterscheiden. So ist es garantiert, dass auch farbenblinde Menschen die Informationen interpretieren können.

Darstellung eines Balkendiagramms mit Formen, die die Bedeutung der Farben verstärken
Darstellung eines Balkendiagrams nur mit Farben

Funktionelles Design

Alternativtext

Alternativtext ist Text, der Bilder näher beschreibt. Vor allem für Nutzer, die auf Screenreader angewiesen sind, profitieren von alternativen Bildbeschreibungen.

Darstellung des Code-Zeichens für Alternativtext
Videoplaybutton

Klickbare Elemente

Klickbare Elemente wie Buttons oder Kästchen sollten groß genug sein und genug Raum haben, damit sie keine Präzision verlangen.

Ein Okay-Kästchen mit einem Rahmen, dass die Größe des Klickfeldes darstellt
Darstellung eines Okay-Kästchen das Präzision benötigt um geklickt zu werden

Zeitlimits

Nutzer sollten genug Zeit haben, um Tasks zu erfüllen. Menschen verarbeiten Informationen unterschiedlich und brauchen daher unterschiedlich lange, um Tasks zu erledigen, daher sollten enge Zeitlimits wenn möglich vemieden werden.

Ein Uhr-Icon als Symbol für ausreichens Zeit

Überprüfen

Wenn User auf der Seite Formulare ausfüllen und absenden können, dann sollte ihnen die Möglichkeit geboten werden, diese EIngaben nochmal zu überprüfen.

Verständliches Design

Grafiken

Grafiken und Diagramme können die Aussage von Text unterstützen und das Verständnis verstärken. Große Textblocks sollten wenn möglich vermieden werden.

Darstellung eines Texblocks, der von Grafik unterbrochen wird
Darstellung eines Textblocks

Bilder, Video, Audio

Bilder, Videos und Audiodateien sollten niemals der einzige Weg sein, wie Informationen präsentiert werden. Alternativtexte, Untertitel und Transkripte sind wichtig für seh- oder hörbehinderte Menschen.

Videoscreen mit angezeigten Untertiteln
Videoplaybutton

Inhalte

Anstelle von Grafiken können Texte auch durch ihre Strukturierung vereinfacht werden. Das heißt, man sollte Textblöcke wenn möglich mit Unterüberschriften aufteilen.

Grafik mit Beispiel für Textstruktur
Darstellung eines Textblocks

Sprache

Je nach Art der Webseite sollte man bedenken, was für eine Sprache man verwendet. Vor allem rein informative Seiten sollten in klarer, einfacher Sprache formuliert sein und Redewendungen und wenn möglich Fremdwörter vermeiden.

Überschriften und Links

Überschriften und Links sollten verständlich und klar formuliert sein, sodass der User weiß, wo er sich befindet und wohin er geht.

Darstellung eines "Zum Angebot" Buttons
Darstellung eines "Hier klicken!" Buttons