In publica commoda

Barrierefreie Webseiten im GCMS


Ziel jeder Webseite sollte es sein, dass ihre Inhalte von möglichst allen Menschen ungehindert erreichbar sind. Für Menschen mit Einschränkungen bedeutet das Gleichberechtigung und Selbstständigkeit. Wegen der zunehmenden Wichtigkeit des Internets als (Haupt-)Informationsmedium verpflichtet die EU-Richtlinie 2016/2102 öffentliche Stellen des Bundes und der Länder, ihre digitalen Informationen barrierefrei zur Verfügung zu stellen.

Eine barrierefrei gestaltete Webseite beachtet diverse mögliche Einschränkungen – seien es Beeinträchtigungen in der visuellen Wahrnehmung (eingeschränkte Sicht, Farbfehlsichtigkeiten bishin zur Nutzung von Screenreadern zum Auslesen der Seite), der auditiven Wahrnehmung ebenso wie kognitive und physische Einschränkungen.

Barrierefreie Webseiten sind für alle Nutzer ein Vorteil

Es reicht schon die vergessene Lesebrille, das in der Sonne spiegelnde Display oder der gebrochene Finger, dass gute Kontraste und Tastaturbedienbarkeit plötzlich essenziell werden. Aber auch das übersichtliche Layout einer aufgeräumten Seite oder Texte, die zum Lesen einladen und nicht müde machen, verschönern jede Nutzererfahrung.

Die Richtlinie des Europäischen Parlaments und des Rates (2016/2102) definiert einen grundsätzlichen Standard für barrierefreie Webseiten und mobile Anwendungen öffentlicher Stellen. Darauf aufbauend ist es den einzelnen Ländern überlassen, verbindliche Vorgaben zu definieren.
Das Land Niedersachsen hat sich entschieden, die Vorgaben des Europäischen Parlaments weitestgehend unverändert zu übernehmen.


Web Content Accessibility Guidelines (WCAG)

Das Europäische Parlament sowie das Land Niedersachsen berufen sich in ihren Vorgaben auf die Web Content Accessibility Guidelines (WCAG), die vom World Wide Web Consortium (kurz W3C) verfasst wurden.

Das W3C wurde 1994 am MIT Laboratory for Computer Science in Cambridge (Massachusetts) gegründet. Es handelt sich um ein Gremium aus verschiedenen Mitgliedsorganisationen. Ihr Ziel besteht darin, Standards für das World Wide Web zu entwickeln.

Die Web Content Accessibility Guidelines strukturieren die Anforderungen für Barrierefreiheit in drei aufeinander aufbauende Level: A (niedrigste Mindestanforderungen), AA und AAA (höchster Standard). Die EU-Richtlinie und das Land Niedersachsen schreiben mindestens das mittlere Level AA vor.



Wichtige Schritte zu einer Barrierefreien Webseite im GCMS:


Texte

Gestalten Sie Ihre Texte grundsätzlich „Webseiten-freundlich“ – Übersichtlich, kurz, auf den Punkt

  • Ein Text, der gut "Querlesbar", also einfach und schnell zu erfassen ist, kommt sowohl den Vorlieben durchschnittlicher Webseiten-Nutzer als auch der Barrierefreiheit entgegen.

    • Geben Sie dem Text Struktur: Definieren Sie Zwischenüberschriften und kurze Absätze
    • Bevorzugen Sie (wenn möglich) einfache, leicht verständliche Sprache und einfachen Satzbau.



Bilder und Grafiken

Ein Grundsatz der Barrierefreien Webgestaltung ist, dass Inhalte nach Möglichkeit über zwei verschiedene Sinne erfassbar sein müssen. Text kann, sofern man ihn selbst nicht sehen oder lesen kann, gut über Screenreader ausgelesen werden – bei Bildern muss etwas nachgeholfen werden.

Alternativ-Text

  • Definieren Sie eine Beschreibung des Bildes in Text-Form – einen sog. Alternativ-Text (kurz: Alt-Text oder auch Alt-Tag oder Alt-Attribut)

    • In der GCMS-Bilddatenbank wird aktuell der Titel des Bildes als Alt-Text verwendet. Es wird derzeit an einer Lösung gearbeitet, ein separates Feld für diesen Zweck zur Verfügung zu stellen.

Falls Sie auf Ihren Seiten Bilder nicht über < image id="..."> sondern über den Dateipfad im HTML-Tag < img src="..." > eingebunden haben, wird der Alt-Tag nicht aus der Bilddatenbank übertragen und er muss direkt im Tag eingepflegt werden:
< img src="..." alt="Dies ist eine Beschreibung der Abbildung.">

Text als Grafik

Vermeiden Sie sofern möglich als Bild-Dateien angezeigten Text. Im Gegensatz zu normalem Text, kann sich Text als Grafik zum Beispiel nicht proportional anpassen. Auf Mobilgeräten wird er oft zu klein angezeigt oder wenn Nutzer die Schrift größer zoomen müssen, um ihn lesen zu können, wird der Text schnell unscharf.

Beispiel:
Darstellung von Problemen mit als Grafik eingebauter Text
(Bild Vergrößern)

Falls Sie dennoch Grafiken mit Text verwenden, beachten Sie folgende Punkte:

  • Testen Sie die Lesbarkeit auf Mobilgeräten
  • Hat der Text ausreichend Kontrast zu seinem Hintergrund? Könnte es bei Farb-Fehlsichtigkeit zu Problemen kommen? (Rot-Grün-Schwäche ist das am weitesten verbreitete Beispiel – allerdings nicht die einzige mögliche Farb-Fehlsichtigkeit. Sofern ein ausreichender Hell-Dunkel-Kontrast gegeben ist, ist die Lesbarkeit normalerweise auch bei Farbfehlsichtigkeit gesichert.)
  • Achten Sie darauf, dass der Alt-Text die Schrift in der Grafik wiedergibt.



Layout und Strukturierung der Inhalte

Sind Ihre Seiten übersichtlich und intuitiv bedienbar?

  • Weniger ist mehr: Ballast abwerfen und auf das Wesentliche konzentrieren! Schlanke Seiten sind viel einfacher erfassbar und die wirklich wichtigen Informationen gehen nicht unter.
  • Wer ist Ihre Zielgruppe? Was ist für diese Zielgruppe relevant? Wo und unter welchen Begriffen würde sie nach Inhalten suchen?
  • Weißraum nutzen: durch ausreichend Platz zwischen einzelnen Elementen wird der Inhalt leichter erfassbar.
  • Funktioniert das Responsive Design? Testen Sie die Seite mit verschiedenen Bildschirmgrößen – vor allem auf Mobilgeräten.



  • Ist Ihre Haupt-Navigation übersichtlich und stellt sie eine sinnvolle und zielgruppengerechte Struktur dar?

  • Prüfen Sie Ihre Breadcrumb-Navigation:

    • Funktionieren alle Links oder leiten sie auf leere Seiten?
    • Ist die Struktur sinnvoll?
    • Tauchen Seiten auf, die nicht zur Anzeige auf der Seite bestimmt waren?

Hier ein Beispiel, wie es nicht aussehen sollte:

Screenshot einer Breadcrumb-Navigation auf einer GCMS-Seite (Bild Vergrößern)

[Link zu einer ausführlicheren Anleitung in der GCMS-Hilfe über das Zusammenspiel von Navigationen und Seitenbaum folgt in Kürze.]


Strukturierung der Überschriften

Hierarchisch aufgebaute Überschriften helfen sowohl visuell als auch bei der Nutzung von Screenreadern bei der Orientierung auf der Seite. Zudem sind sie für Suchmaschinen relevant.

Mehr erfahren: Ausführliche Beschreibung und Einordnung des Themas aus dem BITV-Test für Barrierefreiheit


< h1> Überschrift 1 < /h1> ist die wichtigste Überschrift auf der Seite und sollte im Gegensatz zu untergeordneten Überschriften nur einmal pro Seite vergeben werden. Im GCMS entspricht das Feld „Überschrift“ der h1. Wählen Sie für dieses Feld einen sinnvollen Titel, der den Inhalt der Seite zusammenfasst.

Überschriften-Felder im GCMS
(Bild Vergrößern)

Für < h2>Überschrift 2 < /h2> haben Sie die Möglichkeit das Feld „Subüberschrift“ oder mit html-Tag im GCMS-Text zu arbeiten.

< h3> Überschrift 3 < /h3> kann ebenso wie < h2> direkt im GCMS-Text als HTML-Tag verarbeitet werden.

Überschriften im GCMS Text Editor
(Bild Vergrößern)

Bevorzugen Sie die Nutzung von < h2> / < h3> vor einfach nur gefettetem Text als Überschrift. Für Screenreader, aber auch Suchmaschinen geht dadurch an Bedeutung und Struktur verloren.


HTML-Code

Im GCMS-Text Editor ist die Verwendung von HTML fast unerlässlich. Egal, ob Sie vereinfachten Elemente für den GCMS-Text Editor oder reguläre HTML-Tags verwenden, prüfen Sie auf jeden Fall, ob alle Tags richtig gesetzt sind:

  • Sind alle geöffneten Elemente auch wieder geschlossen? Z.B. :< liste>< punkt>….< /punkt>< /liste>
  • Sind Elemente richtig verschachtelt? Z.B.: < liste>< punkt> … < /liste> < /punkt> (< punkt>< /punkt> ist < liste>< /liste> untergeordnet und muss daher innerhalb des Elements geschlossen werden).


Wenn Sie komplexere html-Elemente erstellt haben, ist es ratsam, den erstellten Code durch einen Validator-Tool auf Fehler zu prüfen.

Wenn Sie selbst gebaute HTML-Funktionalitäten verwenden, prüfen Sie bitte, ob die Funktionalitäten barrierefrei (z.B. Lesbarkeit für Screenreader, Tastaturbedienbarkeit usw.) sind




Webseite testen

Checkliste zur Barrierefreiheit

Das Projekt BIK bietet eine sehr empfehlenswerte Checkliste zur Selbstbewertung an. Für unsere Seite reichen die Vorgaben des WCAG aus, was in diesem Test der Bewertung „Eher erfüllt“ entspricht. Die Überschriften im Test verlinken auf umfangreiche Erklärungen und Beschreibungen zu allen Themen. Eine Demoversion ohne Anmeldung ist ebenfalls vorhanden.

Automatisierte Test-Tools

Umfassen nicht die volle Bandbreite der Barrierefreiheit, aber geben einen sehr guten Überblick über viele wichtige Aspekte.


Kontraste:

Zum Prüfen von Kontrasten z.B. für Text/Hintergrund-Kombinationen:
https://webaim.org/resources/contrastchecker/
Simulator für verschiedene Arten von Farb-Fehlsichtigkeit:
https://www.color-blindness.com/coblis-color-blindness-simulator/