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
- Inhalte als Text erfassen
Texte als Text und nicht in Form einer Abbildung eingeben. - Logische Strukturierung von Inhalten
Inhalte strukturieren in Überschriften und Unterüberschriften, Fließtexten, Listen, Aufzählungen und Tabellen. - Ü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. - Überschriften gut formulieren! Kein "Herzlich Willkommen" als Überschrift verwenden.
Vorteilhaft ist, wenn Überschriften Suchbegriffe zum Inhalt enthalten, damit die Seiten besser gefunden werden. - Verständlichkeit
Eine klare und einfache angemessene Sprache verwenden, denn: "Ein nicht verständlicher Satz wird nicht dadurch besser, dass man ihn halbfett setzt." - 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> - Sprache
Sprache besonders definieren.
Beispiel für englisch: <span lang="en">T-Shirt</span> - 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. - Listen
Aufzählungen als Liste oder nummerierte Liste formatieren. - 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. - 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
- Inhalte nicht ausschließlich über Farbe transportieren.
- 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.)
- 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) - Verlinkungen zu externen Webseiten als „externe Links“ benennen oder kennzeichnen, da so die Konsequenzen eines Klicks erkennbar werden.
Beispiel: WDR - Word- und PDF-Dokumente
Eingebundene Word- und PDF-Dokumente ebenfalls barrierefei gestalten. - Alternativtext bei Abbildungen
Bilder und Grafiken mit darstellendem Alternativtext versehen. Illustrative Elemente können als "Illustration" benannt werden.
webberatung
| 25.01.2023