Barrierefrei im Web

Prinzipien zur Umsetzung von barrierefreien Webseiten

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

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 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. Verständlichkeit
    Eine klare und einfache angemessene Sprache verwenden, denn: "Ein nicht verständlicher Satz wird nicht dadurch besser, dass man ihn halbfett setzt."
  5. Akronyme und Abkürzungen
    Akronyme und Abkürzungen besonders definieren.
    Beispiel:
     BITV <acronym title="Barrierefreie Informationstechnik-Verordnung">BITV</acronym><br /> 
  6. 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.

  7. Listen
    Aufzählungen als Liste oder nummerierte Liste formatieren.

  8. 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.

  9. Eindeutige Linkettikettierung
    Bitte kein “finden Sie hier“ oder "hier"

Grundlegende Prinzipien (werden zum Teil über das CSS bzw. Stylesheet geregelt)

  1. Schriften
    Schriften linksbündig ausrichten. Wenn sie zentriert, im Blocksatz oder rechtsbündig ausgerichtet sind, stellen sie eine Barriere dar - insbesondere dann, wenn die Webseite vergrößert wird.
    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 (wie: BEISPIEL) ist abzuraten, da Versalien bis zu 30% langsamer gelesen werden.
  2. Kontrast beachten
    Genügend Kontrast zwischen Vorder- und Hintergrund muss gewährleistet sein. Dies kann mit Hilfe einer Kontrastanalyse (externer Link) sichergestellt werden.
  3. Einsatz von Farbe
    Inhalte nicht nur über Farbe transportieren.
    Das heißt z.B., dass die besondere Bedeutung eines rot gekennzeichneten Textes nicht zuverlässig dargestellt oder wahrgenommen wird.
  1. Vergabe von Dateinamen
    Verwenden Sie außer dem Unterstrich "_" und dem Bindestrich "-" keine Sonderzeichen. Leerzeichen sollten auch nicht verwendet werden. Wenn Sie alle Dateinamen klein schreiben, vermeiden Sie mögliche Fehlerquellen und vereinfachen die Webadresse.

Beachtenwertes bei der Positionierung

  1. Leerzeilen und Leerzeichen
    Keine Leerzeilen und Leerzeichen zur Positionierung nutzen.
    Ein Screenreader erkennt in jeder Leerzeile und jedem Leerzeichen keinen Inhalt.
  2. Keine leeren Grafiken
    Transparente Gifs nicht zu Layoutzwecken benutzen.

Externe Dokumente (Downloads, Abbildungen ect.)

  1. Verlinkungen
    Verlinkungen zu externen Dokumenten (pdf, doc) im Inhaltsbereich entsprechend kennzeichnen, z.B. Informationsblatt (pdf).
    Externe Verlinkungen als „externe Links“ benennen, da so die Konsequenzen eines Klicks erkennbar werden.
  2. Word- und PDF-Dokumente
    Eingebundene Word- und PDF-Dokumente ebenfalls barrierefei gestalten.
  3. Alternativtext bei Abbildungen
    Bilder und Grafiken mit darstellendem Alternativtext versehen. Illustrative Elemente können als "Illustration" benannt werden.
webberatung | 22.05.2017
FernUni-LogoFernUniversität in Hagen, ZMI, 58084 Hagen