Prinzipien zur Umsetzung

Webseiten barrierefrei gestalten, aber wie?
Diese Checkliste beschreibt in Kürze die wichtigsten Maßnahmen.

Inhalt

 

Checkliste bei der Eingabe von Inhalten

  1. Inhalte als Text erfassen
    Texte als Text und nicht in Form einer Abbildung eingeben.
  2. Logische Strukturierung von Inhalten
    Inhalte strukturieren in Überschriften und Unterüberschriften, Fließtexten, Listen, Aufzählungen und Tabellen.
  3. Überschriften logisch vergeben
    Immer den Seitentitel, d.h. eine Überschrift erster Ordnung vergeben (H1), die für die Struktur und den Aufbau der Seite enorm wichtig ist. Alle weiteren Überschriften hierarchisch anordnen.
  4. Überschriften gut formulieren! Kein "Herzlich Willkommen" als Überschrift verwenden.
    Vorteilhaft ist, wenn Überschriften Suchbegriffe zum Inhalt enthalten, da so die Webseiten von Suchmaschinen besser gefunden werden.
  5. Verständlichkeit
    Eine klare und einfache angemessene Sprache verwenden, denn: "Ein nicht verständlicher Satz wird nicht dadurch besser, dass man ihn halbfett setzt."
  6. Akronyme und Abkürzungen Akronyme und Abkürzungen definieren und mindestens einmal anfangs auf der Seite sichtbar ausformulieren.
    Beispiel: Technische Universität (TU) mit Titel als Abkürzung TU
    als HTML-Code: <abbr title="Technische Universität">TU</abbr>
  7. Sprache
    Sprache entsprechend auszeichnen.
    Beispiel: Screenreader     als HTML-Code: <span lang="en">Screenreader</span>
  8. Tabellen
    Tabellen nie als Layouthilfsmittel verwenden, sondern zur tabellarischen Darstellung von Daten. Sie eignen sich dann, wenn es inhaltlich sinnvoll ist und eine Zuordnung der Eingaben zu Zeile und Spalte zielführend ist.
  9. Listen
    Aufzählungen als Liste oder nummerierte Liste formatieren.
  10. Formatierungen
    Formatierungen möglichst nur mit CSS-Anweisungen, keine veralteten (und vom W3C missbilligten) Elemente und Attribute wie beispielsweise den "<font>-Tag" im HTML-Code verwenden.
  11. Alternativtext bei Abbildungen
    Bilder und Grafiken mit darstellendem Alternativtext versehen.
    BeispielAlternativtext als HTML-Code: alt="Balkendiagramm abgebildet auf einem Laptop"
    Dekorative Bilder werden als dekorativ gekennzeichnet. Erklärende Abbildungen, wie Flussdiagramme werden mit einer Beschreibung erklärt. Mehr dazu unter: Bilder und Grafiken
  12. Eindeutige Linkettikettierung
    Bitte kein “finden Sie hier“ oder "hier", sondern nach dem "Was drauf steht ist auch drin" Prinzip vorgehen!

Grundlegende Prinzipien

Diese Angaben werden in der Regel über das eingebundene Stylesheet (CSS) der Webseite entsprechend geregelt.

  • Schriften
    • Gut lesbare Schriftfonts auswählen, die nicht zu verschnörkelt oder ein zu schmales Erscheinungsbild hat. Schriften linksbündig ausrichten. Wenn Text zentriert, im Blocksatz oder rechtsbündig ausgerichtet ist, stellt dies eine Barriere dar - insbesondere dann, wenn die Webseite vergrößert wird.
    • Auf ausreichenden Abstand zwischen den Zeilen achten. Diese darf nicht zu eng gewählt werden, aber auch zu große Abstände können für den Lesefluß (gerade bei Vergrößerungen) hinderlich sein.
    • Die Skalierbarkeit der Seiten muss gewährleistet sein. Durch die Vergrößerung der Seiten wird die Schrift entsprechend mit vergrößert, daher ist die Angabe von variablen, also relativen Schriftgrößen (em oder % Angaben) empfehlenswert. Schriften nicht zu klein wählen.
    • Von einer übertriebenen Großschreibung (ZUM BEISPIEL MEHRERE SÄTZE HINTEREINANDER IN GROSSBUCHSTABEN ZU SCHREIBEN) ist abzuraten, da Versalien langsamer gelesen werden.
    • Unterstreichungen im sind Text irreführend. Sie suggerieren einen Link. Dies irritiert vor allem der bei Farbblindheit.
  • Kontrast beachten
    • Ein genügender Kontrast zwischen Vorder- und Hintergrund muss gewährleistet sein, um die Inhalte wahrzunehmen. Dies kann mit Hilfe einer Kontrastanalyse sichergestellt werden.
  • Einsatz von Farbe
    • Inhalte nicht ausschließlich über Farbe transportieren.
      Dies gilt z.B bei der Kennzeichnung von Verknüpfungen und Links. Sind diese ausschließlich farblich gekennzeichnet und nicht zusätzlich über eine Form dargestellt, wie z.B. eine Unterstreichung, kann dies bei Farbblindheit nicht erkannt werden.
      Das heißt z.B., dass die besondere Bedeutung eines rot gekennzeichneten Textes nicht zuverlässig dargestellt oder wahrgenommen wird. Die Aussagekraft sollte zusätzlich über die Form dokumentiert werden.
      Beispiel unterstrichene Verlinkung im Text: Homepage der FernUniversität

Beachtenswertes bei der Positionierung

  • Leerzeilen und Leerzeichen
    Keine Leerzeilen und Leerzeichen zur Positionierung nutzen.
    Ein Screenreader erkennt in jeder Leerzeile und jedem Leerzeichen keinen Inhalt.
  • Keine leeren Grafiken
    Transparente Gifs nicht zu Layoutzwecken benutzen.(z. B. um so einen größeren Abstand zu erzeugen)
  • Mobile Darstellung berücksichtigen
    Die Darstellung der Webseite ändert sich, je nach Endgerät. Überprüfen Sie die Position der Inhalte in der mobilen Darstellung. Dies möglichst auch auf einem mobilen Endgerät, wie Smartphone.
  • Vergrößerung berücksichtigen
    Die Vergrößerung der Webseite (Strg +) sollten alle Inhaltselemente verlässlich darstellen. Dies ist vor allem für Menschen mit einer Sehschwäche von Vorteil. Vor allem Tabellen kommen schnell an Ihre Grenzen.

Externe Links, Dateinamen, Dokumente, Downloads

  1. Verlinkungen zu externen Webseiten als „externe Links“ benennen oder kennzeichnen, da so die Konsequenzen eines Klicks erkennbar werden. Beispiel: WDR
    Mehr dazu unter: Links richtig vergeben
  2. Verknüpfungen zu Dokumenten (pdf, doc), soweit dies nicht automatisiert geschieht, im Inhaltsbereich entsprechend kennzeichnen, Beispiel: Untersuchung (PDF 535 KB)
    mehr dazu unter: Links zu PDF und DOC Dokumenten kennzeichnen
  3. Word- und PDF-Dokumente
    Eingebundene Word- und PDF-Dokumente ebenfalls barrierefei gestalten.
    Mehr dazu unter: PDF und andere Dokumente barrierefrei umsetzen
  4. Vergabe von Dateinamen
    Ähnlich verhält es sich bei Dateinamen, diese werden schneller erinnert, wenn sie etwas mit dem Inhalt zu tun haben.
    Hinweis: Grundsätzlich klein geschriebene Dateinamen vereinfachen die Webadresse. Dies ist besonders vorteilhaft bei Download-Dateien, die sich schneller mit "sprechendem" Dateinamen im Download Ordner wiederfinden. Wir empfehlen zur Unterteilung den Bindestrich - und den Unterstrich _ .
    Nicht geeignet sind Sonderzeichen, Leerzeichen und Umlaute.
    Positiv-Beispiel: leitfaden-online-video.html

Hilfsmittel zur Umsetzung

webberatung | 08.04.2024