Hauptinhalt

Website gestalten

Stilisierte Darstellung einer Web-Kugel mit einem Maus-Pfeil

Regeln für das Erstellen von Webseiten in Leichter Sprache

BITV 2.0 ist die Verordnung zur Schaffung barrierefreier Informationstechnik und sollte Standard sein auf Ihrer Webseite. Was neben lesbarer Schrift und einfach gehaltenen Navigationen noch dazu gehört, erfahren Sie hier.

Viele Menschen mit kognitiven Einschränkungen können mit Touchscreens einfacher interagieren als mit Tastatur und Maus.

Aufgrund des zur Verfügung stehenden Platzes auf Smartphones und Tablets sollten neue Webauftritte von vornherein anders geplant werden. Das gilt vor allem für Navigationselemente und Menüs.

Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Gut

Vereinfachte Darstellungen von mobilen Endgeräten: Handy, Tablet, Computer.

Gestalten Sie Ihre Webseite konsistent und optisch ausgewogen. Trennen Sie verschiedene Inhalte inhaltlich, optisch und räumlich klar voneinander. Platzieren Sie die wichtigsten Elemente/ Objekte gut sichtbar. Gestalten Sie langen Text übersichtlich, indem Sie ihn in kurzen Absätzen von maximal 6 Zeilen Länge gruppieren.

Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Wichtiges hervorheben
Übersichtliche Texte
Inhaltstrenner

Achten Sie auf gut lesbare Schriftgrößen. Experten für Leichte Sprache empfehlen als Standardeinstellung eine minimale Schriftgröße von 1em bis 1.2em bzw. 16px bis. 20px.

Ermöglichen Sie Besuchern, die Schriftgröße anzupassen. Weisen Sie auf diese Möglichkeit durch gut sichtbare, klare Symbolik hin.

Stilisiertes Achteck in rot. Darin ist eine Hand abgebildet, die den Daumen nach unten zeigt. Das steht für »Nicht gut«

Schlecht

Text: »Experten für Leichte Sprache empfehlen als Standardeinstellung eine minimale Schriftgröße von 1 cm bis 1.2 cm bzw. 16px bis 20px.«
Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Gut

Text: »Experte für Leichte Sprache empfehlen als«

Verwenden Sie unifarbene Hintergründe. Verzichten Sie auf unruhige Muster oder Bilder im Hintergrund. Platzieren Sie auch keinen Text auf Mustern oder Hintergrundbildern.

Stilisiertes Achteck in rot. Darin ist eine Hand abgebildet, die den Daumen nach unten zeigt. Das steht für »Nicht gut«

Schlecht

Muster in Orange und Weiß, gezackt.
Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Gut

Blaue Farbfläche

Achten Sie auf hohe Kontraste. Nach WCAG 2.0 liegt die Minimalanforderung bei einem Kontrastverhältnis von 4,5:1 in Standard-Schriftgröße. Zum einfachen Messen der Kontraste bietet die Paciello Group ein Gratis-Tool an.

Stilisiertes Achteck in rot. Darin ist eine Hand abgebildet, die den Daumen nach unten zeigt. Das steht für »Nicht gut«

Schlecht

Graues Bild mit der Aufschrift »Schlecht«. Das Wort ist sehr blass und damit schlecht zu lesen.
Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Gut

Text: »Gut«

Verzichten Sie auf Fotos zu reinen Dekorationszwecken.

Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Setzen Sie Fotos stattdessen gezielt und gegebenenfalls zurückhaltend ein. Fotos eignen sich insbesondere für personen-, situations- und ortsbezogene Informationen. Nutzen Sie statt vieler kleiner Fotos einige wenige große.

Bieten Sie (audio-) visuelle Unterstützung zur Inhaltsvermittlung.

Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Gut gemachte Animationen und Videos:

Animationen und Videos sind für Menschen mit Lernschwierigkeiten eine gute Möglichkeit sich selbstständig informieren zu können. Mehrere Animationen auf einer Webseite konkurrieren jedoch um die Aufmerksamkeit, setzen Sie diese daher mit Bedacht ein.

Achten Sie darauf, dass Steuerungselemente wie Lautstärke, Stop, Play, Pause stets gut auffindbar und bedienbar sind.

Dadurch unterstützen Sie das Verständnis für verschiedene Kategorien in der Navigation. Verwenden Sie schlichte Darstellungen mit einem oder sehr wenigen abgebildeten Objekten. Orientieren Sie sich an verbreiteten Piktogramm- und Symbolsystemen (z. B. ein Haus für die Startseite).

Stilisiertes Achteck in rot. Darin ist eine Hand abgebildet, die den Daumen nach unten zeigt. Das steht für »Nicht gut«

Schlecht

Stilisierte Darstellung eines Hauses mit sehr vielen Details: Fenster, Dach, Fahne auf dem Dach, Davor Wiese, Himmel und Wolken.
Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Gut

Stilisierte Darstellung eines Hauses.

Gestalten Sie Navigationsbereiche einfach, klar und übersichtlich.

Stilisiertes Achteck in rot. Darin ist eine Hand abgebildet, die den Daumen nach unten zeigt. Das steht für »Nicht gut«

Schlecht

Stilisierte Darstellung einer Website-Oberfläche mit schlechtem Navigationsmenü.
Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Gut

Stilisierte Darstellung einer Website-Oberfläche mit gutem Navigationsmenü.

Verwenden Sie Navigationshilfen

Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Orientierungshilfe mittels Breadcrumb

Erleichtern Sie die Navigation innerhalb komplexer Seiten mit Breadcrumbs (dt. Brotkrümel-Navigation): Einem Link-Pfad im oberen Bereich des Webseiteninhaltes, der den Webseiten-Besuchern die Möglichkeit gibt, den zurückgelegten Pfad zur aktuellen Seite nachvollziehen zu können.

Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Zurück-Funktion, Link zur Hauptseite, Sprungmarken und Direktlinks

Versehen Sie Navigationsbereiche auf jeder Seite mit Zurück-Funktionen sowie einem Link zur Hauptseite. Sprungmarken und Direktlinks in Form von Pfeilen zum Anfang oder zum Ende der Seite erleichtern die Navigation innerhalb einzelner Seiten. Wichtig ist, dass diese Hilfen immer sichtbar sind.

Gestalten Sie Verlinkungen gut sichtbar und einheitlich. 

Achten Sie auf einheitliche Farben sowie deutliche Hervorhebung von Verlinkungen, sodass diese als solche identifiziert werden.

Verwenden Sie immer selbsterklärende Linktexte wie z. B. »Zur Webseite Leichte Sprache gehen«, vermeiden Sie »Mehr« oder »Weiter«.

Stilisiertes Achteck in rot. Darin ist eine Hand abgebildet, die den Daumen nach unten zeigt. Das steht für »Nicht gut«

Schlecht

Stilisierte Darstellung eines Textes mit Links. Die Links sind unterschiedlich farbig gekennzeichnet
Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Gut

Stilisierte Darstellung eines Textes mit Links. Die Links sind mit den gleichen Farben gekennzeichnet

Benutzen Sie Technologien, um schriftliche Inhalte in Lautsprache umzuwandeln.

Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Verwenden Sie dafür Text-to-Speech-Programme und kombinieren Sie die Sprachausgabe mit Piktogrammen. Achten Sie auf folgende Dinge:

  • Funktion einfach auffindbar und abspielbar machen
  • Moderate Abspielgeschwindigkeit des Textes
  • Korrekte Ausgabe von Fremdwörtern und Abkürzungen

Stellen Sie Nutzerinnen und Nutzern Nachschlaghilfen zur Verfügung. Verlinken Sie, wenn möglich, kritische Begriffe und geben Sie der Nachschlaghilfe verständliche Bezeichnungen. Erklären Sie alle Funktionen der Webseite mit einer leicht zu aktivierenden Hilfe.

Stilisiertes Achteck in rot. Darin ist eine Hand abgebildet, die den Daumen nach unten zeigt. Das steht für »Nicht gut«

FAQ Glossar

Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Was ist was? Was bedeutet das?

Schützen Sie Ihre Nutzer vor ungewollter Preisgabe privater Informationen.

Achten Sie hierbei auf folgende Dinge:

  • Achten Sie bei Chat- und Social Media-Funktionen auf möglichst konservative Privatsphäre-Einstellungen.
  • Erklären Sie sofort sichtbar und leicht verständlich, welche Eingaben für andere sichtbar sind und welche lediglich zur Administration verwendet werden.
  • Geben Sie Ihren Nutzern gut sichtbar die Möglichkeit zur Einstellung der Privatsphäre.
Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Konservative Privatsphäre-Einstellungen
Info zu öffentlichen Eingaben

Achten Sie bei interaktiven Elementen* auf einfache Nutzerführung.

Geben Sie klare Handlungsanweisungen und bieten Sie leicht verständliche Hilfestellungen gut auffindbar an:

  • Bestätigen Sie akzeptierte Eingaben sofort als korrekt.
  • Weisen Sie darauf hin, wenn aktives Handeln erforderlich wird.
  • Weisen Sie sofort auf fehlerhafte Eingaben hin.
  • Ermöglichen Sie einfache Fehlerkorrekturen.

* Interaktive Elemente: Formulare, Suchfelder, Eingabemasken

Stilisiertes Achteck in rot. Darin ist eine Hand abgebildet, die den Daumen nach unten zeigt. Das steht für »Nicht gut«

Fehlende Hinweise bei Falscheingaben

Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Klare Handlungsanweisungen
Verständliche Hilfestellungen

Helfen Sie Besucherinnen und Besuchern Aufmerksamkeit zu bündeln.

Damit vermeiden Sie Überforderung, was zu weniger Abbrüchen beim Ausfüllen eines Formulars führt. Achten Sie auf Folgendes:

  • Übersichtliche Unterteilung durch mehrere Seiten, Tabs oder mit Hilfe von Wizards.
  • Klare und inhaltlich logische Struktur.
  • Fragen inhaltliche und thematisch strukturieren.
  • Maximal fünf Auswahlmöglichkeiten pro Frage
Stilisiertes Achteck in rot. Darin ist eine Hand abgebildet, die den Daumen nach unten zeigt. Das steht für »Nicht gut«

Alles auf einer Seite
Zu viel Auswahl

Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Gute Struktur
Übersichtliche Auswahl
Strukturierte Unterteilung

Achten Sie auf eine intelligente Suchfunktion.

Gestalten Sie Suchen möglichst fehlertolerant und intelligent und stellen Sie die Ergebnisse einfach und verständlich dar. Das heißt:

  • Schlagen Sie Suchbegriffe vor.
  • Tolerieren Sie fehlerhafte Rechtschreibung.

Beziehen Sie semantisch verwandte Begriffe ein.

Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Fehlertolerante Suche
Einfache Anzeige der Ergebnisse

Vermeiden Sie nach Möglichkeit den Einsatz von Captchas.

Visuell verzerrte Zeichenfolgen sind von Blinden nicht lösbar, für Menschen mit kognitiven Einschränken stellen sie eine besonders hohe Hürde dar.

Setzen Sie stattdessen z.B. auf folgende Honigtopf-Methode (ein für Nutzer unsichtbares Formularfeld, das für Spam-Bots nicht von einem echten unterscheidbar ist. Der Spam-Bot füllt das Feld aus, der Nutzer nicht.)

Stilisiertes Achteck in rot. Darin ist eine Hand abgebildet, die den Daumen nach unten zeigt. Das steht für »Nicht gut«

Captchas

Stilisiertes Achteck in grün. Darin ist eine Hand abgebildet, die den Daumen nach oben zeigt. Das steht für »Sehr gut«

Honigtopf-Methode

zurück zum Seitenanfang