Prinzipien zur Umsetzung von barrierefreien Webseiten

Webseiten barrierefrei gestalten, aber wie? Diese Checklisten beschreiben Ihnen in Kürze was Sie beachten sollten.

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 vergeben.
  4. Überschriften gut formulieren! Kein "Herzlich Willkommen" als Überschrift verwenden.
    Vorteilhaft ist, wenn Überschriften Suchbegriffe zum Inhalt enthalten, damit die Seiten 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 auf der Seite sichtbar ausformulieren.
    Beispiel: <abbr title="World Health Organization">WHO</abbr>
  7. Sprache
    Sprache besonders definieren.
    Beispiel für englisch: <span lang="en">T-Shirt</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. Eindeutige Linkettikettierung
    Bitte kein “finden Sie hier“ oder "hier", sondern nach dem "Was draufsteht ist auch drin" Prinzip vorgehen!

Grundlegende Prinzipien

Diese werden häufig bereits über das CSS bzw. Stylesheet im Hintergrund des Webs 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
  • Vergabe von Dateinamen
    • Verwenden Sie außer dem Bindestrich "-" und dem Unterstrich "_" keine Sonderzeichen. Leerzeichen und Umlaute sollten auch nicht verwendet werden.
    • Wenn Sie alle Dateinamen klein schreiben, vermeiden Sie mögliche Fehlerquellen und vereinfachen die Webadresse.

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 Dokumente (Downloads, Abbildungen ect.)

  1. Verknüpfungen zu externen Dokumenten (pdf, doc), soweit dies nicht automatisiert geschieht, im Inhaltsbereich entsprechend kennzeichnen, z. B. Informationsblatt (pdf).
    Beispiel: Untersuchung (PDF 535 KB)
  2. Verlinkungen zu externen Webseiten als „externe Links“ benennen oder kennzeichnen, da so die Konsequenzen eines Klicks erkennbar werden.
    Beispiel: WDR
  3. Word- und PDF-Dokumente
    Eingebundene Word- und PDF-Dokumente ebenfalls barrierefei gestalten.
  4. Alternativtext bei Abbildungen
    Bilder und Grafiken mit darstellendem Alternativtext versehen. Illustrative Elemente können als "Illustration" benannt werden.

Hilfsmittel zur Umsetzung

webberatung | 25.01.2023