Text Barrierefreiheit auf dem Bildschirm eines Laptops

Barrierefreiheit auf Schulwebseiten wird oft als technisches Detail behandelt – dabei geht es um weit mehr. Gesetze verpflichten öffentliche Einrichtungen zur Umsetzung, aber was heißt das konkret? Welche Anforderungen gelten überhaupt? Und wie viel lässt sich mit WordPress realistisch erreichen?

Dieser Artikel räumt mit Missverständnissen auf, zeigt typische Schwachstellen und erklärt, warum Barrierefreiheit nicht allein Sache der Webagentur ist.

Barrierefreiheit auf Schulwebseiten

Viele denken bei Barrierefreiheit an ein technisches Etikett: einmal sauber gebaut, Häkchen dran, und fertig.

Das Problem ist nur: So funktioniert das nicht.

Vor allem nicht bei Schulwebseiten, die regelmäßig gepflegt werden müssen. Nicht selten von Menschen, die oft gar nicht wissen, worauf es bei Barrierefreiheit ankommt.

Das soll kein Vorwurf an die überarbeiteten Lehrkräfte sein, die auch noch die Schulwebsite betreuen müssen, sondern es ist ein gut gemeinter Hinweis, dass die Barrierefreiheit nicht alleine durch die Webdesigner erledigt ist, komplex sein kann und ständig bei der Pflege der Website mitbedacht werden muss.

Was heißt barrierefrei eigentlich genau?

Barrierefrei bedeutet: Alle Menschen können die Inhalte einer Webseite wahrnehmen und bedienen – egal ob sie blind sind, motorisch eingeschränkt, kognitive Schwierigkeiten haben oder einfach nur mit dem Handy unterwegs sind. Die offizielle Definition spricht von „wahrnehmbar, bedienbar, verständlich und robust“. Konkret bedeutet das unter anderem:

  • Texte müssen verständlich sein
  • Die Kontraste müssen ausreichend hoch sein
  • Bilder, die wichtige Informationen transportieren, brauchen Alternativtexte
  • PDFs dürfen nicht einfach eingescannt und hochgeladen werden
  • Buttons und Links müssen mit der Tastatur erreichbar sein
  • Videos brauchen Untertitel
  • Farben dürfen nicht das Einzige sein, was eine Information vermittelt.
  • Man muss voraussehen können, was passiert, wenn man diese oder jene Aktion auf der Website ausführt.

Die Liste ist natürlich nicht vollständig, denn es sind viele Kriterien, die eingehalten werden müssen. Manche davon kann man beim Entwickeln der Seite so gut wie ein für alle Mal erledigen, andere dafür nicht.

Das bringt uns zum nächsten wichtigen Punkt:

Der Webdesigner macht das doch, oder?

Jein. Eine gute Webseite kann technisch so aufgebaut sein, dass sie barrierefrei ist – aber das ist nur der Anfang. Sobald Inhalte von der Schule selbst gepflegt werden (und das ist fast immer der Fall), kann jede Änderung neue Barrieren schaffen.

Wer neue Inhalte einstellt, trägt Verantwortung. Zum Beispiel:

  • Wer PDFs hochlädt, muss sicherstellen, dass sie zugänglich sind.
  • Wer ein Bild einfügt, muss einen passenden Alt-Text schreiben.
  • Wer einen Text eingibt und ihn färbt, muss für den richtigen Kontrast zum Hintergrund sorgen, damit er für alle lesbar bleibt.

Das lässt sich nicht vollständig „wegautomatisieren“. Auch nicht mit teuren Plugins oder KI-Tools. Wer Inhalte pflegt, muss wissen, was er oder sie tut. Zumindest im Ansatz.

Einfach und ohne Stress

Unkompliziert eine gute Schulhomepage erstellen lassen – mit kostenloser und unverbindlicher Beratung vorab.

Was kann der Webdesigner wirklich leisten

Als Webdesigner liegt meine Hauptaufgabe darin, die technischen und strukturellen Grundlagen für eine barrierefreie Schulwebsite zu schaffen und ihre erste Version barrierefrei bzw. -arm zu gestalten.

Der Webdesigner kann beispielsweise sicherstellen, dass das technische Grundgerüst der Website den aktuellen Webstandards (wie WCAG – Web Content Accessibility Guidelines) entspricht. Dazu gehört die korrekte Verwendung von HTML-Strukturen für Überschriften, Listen und Absätze, die von Screenreadern richtig interpretiert werden können.

Ich schaue, ob die Tastaturnavigation richtig funktioniert, sodass Nutzer ohne Maus alle Inhalte erreichen und bedienen können. Auch die Farbkontraste von Text und Hintergrund gestalte ich von Anfang an so, dass sie für Menschen mit Sehschwächen gut lesbar sind.

Ein weiterer wichtiger Punkt ist die mobile Responsivität. Eine gut gemachte Schulwebsite passt sich automatisch an verschiedene Bildschirmgrößen an, sei es ein Desktop-Monitor, ein Tablet oder ein Smartphone. Das ist nicht nur benutzerfreundlich, sondern auch entscheidend für die Barrierefreiheit, da immer mehr Menschen mobile Geräte nutzen.

Darüber hinaus achtet man darauf, dass die Formulare barrierefrei gestaltet sind, indem sie klare Beschriftungen der Felder haben und Fehlermeldungen bereitstellen.

Wenn ein Webdesigner eine solche Webseite baut und an den Auftraggeber übergibt, ist sie meistens barrierefrei oder zumindest barrierearm. Nicht nur der Unterbau, sondern auch die eingepflegten Inhalte sind entsprechend aufbereitet.

Es kommt aber auch vor, dass man hier und da gezwungenermaßen Inhalte einbindet, die nicht barrierefrei sind – man denke an nicht barrierefreie PDF-Dokumente, die man als Schule von Dritten bekommt und veröffentlichen muss.

…und wo hört seine Verantwortung auf?

Es ist wichtig zu verstehen, dass die Arbeit des Webdesigners hier endet. Die Pflege der Inhalte – also das Hochladen von neuen Stundenplänen, Informationen zu Schulveranstaltungen oder Fotos – liegt in der Verantwortung des Schulpersonals.

Das bedeutet beispielsweise, dass Bilder immer mit aussagekräftigen Alternativtexten versehen werden müssen und die Aufzählungen als Liste (ein HTML-Element) erstellt werden sollen und nicht als normale Absätze untereinander mit vorangestelltem Aufzählungszeichen oder als Absätze in einer Tabelle, deren Rahmen unsichtbar gemacht wurde.

WordPress Block für die Aufzählung mit vorangestellten Icons
WordPress Block für die Aufzählung mit vorangestellten Icons

Um bei dem Beispiel noch kurz zu bleiben: Wenn eine Auflistung nicht korrekt erstellt wird, sieht sie für die meisten BesucherInnen der Website trotzdem wie eine Aufzählung aus und ist gut lesbar. Sie wird jedoch vom Screenreader nicht als Aufzählung erkannt und nicht als solche vorgelesen. Es entsteht eine Barriere.

Dazu muss man wissen, dass die Nutzer von Screenreader-Software nicht wie normal sehende Menschen die ganze Seite schnell überblicken, sondern sie nutzen die Funktionen der Software zum Vorlesen von allen Überschriften, Links auf der Webseite usw. Wenn sie auf eine Aufzählung stoßen, wird ihnen gesagt, wie viele Elemente eine solche Aufzählung beinhaltet, aber nur dann, wenn es tatsächlich im Code der Seite als eine Aufzählung hinterlegt ist.

Noch ein Beispiel, was trotz guter Vorbereitung schief gehen kann: Auch wenn ich als Webdesigner beim Bauen der Webseite festlege, dass jeder eingefügte Button standardmäßig dunkelblau mit weißer Schrift ist (und die Kontrastanforderungen, die Schriftgröße etc. erfüllt), kann der Redakteur die Buttons jedes Mal nach eigenem Gutdünken verändern und damit möglicherweise eine Barriere schaffen. Obwohl er eigentlich die Seite nur etwas bunter machen wollte, was an sich völlig legitim ist. Man kann es tun – man muss nur wissen, worauf man zu achten hat.

Diese Beispiele zeigen sehr deutlich, dass Barrierefreiheit nicht ein für alle Mal mit einem neuen Webdesign erledigt ist.

Deshalb ist es eine wichtige Erkenntnis für alle, die Webseiten pflegen: Barrierefreiheit ist kein Zustand. Es ist ein Prozess, der bei jeder noch so kleinen Änderung beschädigt werden kann.

Was im Alltag schnell schiefläuft

Hier noch ein paar Klassiker, die man auf Schulwebseiten regelmäßig findet und die für viele Menschen echte Zugangsbarrieren sind:

  • Bilder ohne Alternativtext („Alt-Text“) oder mit völlig nichtssagenden Beschreibungen wie „Bild123“.
  • Tabellen ohne Struktur.
  • Elemente, die wichtige Inhalte nur dann anzeigen, wenn man mit der Maus darüber fährt
  • Links, die nur mit „hier“ oder „mehr“ beschriftet sind.
  • Texte, die aus Schachtelsätzen bestehen und voller Fachbegriffe sind.
  • Plugins (z. B. Slider oder Popups), die sich mit der Tastatur nicht bedienen lassen.
  • Webseiten, die nicht für die kleinen Smartphone-Bildschirme optimiert sind und sich daher nicht bedienen lassen

Noch ein Beispiel aus der Praxis:

„Wir wollten aber doch nur eine schöne Bildergallerie…“

Viele Schulen sind stolz auf ihre Veranstaltungen, SchülerInnen, Ereignisse und wollen Sie dokumentieren und präsentieren. Ein häufiger Wunsch: Slider mit Bildern, bewegte Galerien, schicke Layouts. Alles verständlich – aber leider auch oft problematisch.

Denn viele Plugins, mit denen man sie erstellt, erzeugen Inhalte, die nicht barrierefrei sind. Auf der Website lassen sie sich nicht per Tastatur steuern, die Inhalte sind nicht vernünftig ausgezeichnet, und mit einem Screenreader kommt man gar nicht erst ran.

Dazu kommt: Die Bedienung dieser Tools im CMS ist oft nicht gerade intuitiv – und wenn niemand weiß, wie man es richtig macht, entsteht Chaos und Frust.

Auch wenn sich immer mehr Entwickler um die Barrierefreiheit ihrer Software kümmern und die Tools diesbezüglich immer besser werden: Wenn man eine barrierearme Webseite haben will, ist man oft gut beraten, auf zu viele „Spielereien“ zu verzichten.

Mein Tipp: Halte es einfach. Ein paar große, aussagekräftige Bilder im Fließtext sind oft besser als ein fancy Slider mit 12 Elementen. Weniger Stress mit der Erstellung, bessere Zugänglichkeit für die Nutzer, gerade für die mit kleinen Endgeräten (man darf nicht vergessen, dass im privaten Umfeld mittlerweile zu über 70 Prozent mit Smartphones gesurft wird).

Generell gilt aus meiner Sicht: Je einfacher die Seite aufgebaut ist, um so einfacher ist es sie barrierefrei zu betreiben. Und umso nutzerfreundlicher ist sie für alle.

Wie sieht das bei WordPress aus?

WordPress ist heute Standard bei vielen Schulwebseiten – und das aus gutem Grund. Es ist bezahlbar, flexibel und auch ohne technisches Vorwissen einfach zu bedienen. Die meisten Inhalte werden dabei über fertige Blöcke eingefügt.

Es funktioniert so: Will man eine Aufzählung erstellen, wählt man den Block „Liste“, schreibt die einzelnen Punkte und man bekommt eine barrierefreie Aufzählung – es funktioniert ähnlich wie beim Textverarbeitungsprogramm. Möchte man ein Bild einfügen, wird es auch mit einem entsprechenden Block erledigt, in dem man den Alternativtext eingeben kann und andere Einstellungen macht.

Optimal wäre natürlich eine individuell programmierte Seite mit durchdachtem, sauberem, kurzem und gut getestetem Code. Aber das ist für Schulen weder realistisch noch finanzierbar. Denn alle Änderungen müssten genauso programmiert und getestet werden, was in der Realität kaum praktikabel wäre.

Man arbeitet also mit fertigen Blöcken. Im Vergleich zum Schreiben vom HTML- und CSS-Code, um die Seite zu gestalten, ist es eine enorme Erleichterung.

Und genau hier liegt auch der Knackpunkt: Ob die Seite am Ende barrierefrei ist, hängt stark davon ab, was diese Blöcke im Hintergrund tun. Nicht jeder Slider, jede Galerie oder jedes Plugin liefert sauberen, zugänglichen Code.

Die gute Nachricht: die Standardblöcke von WordPress liefern da sehr gute Ergebnisse und es gibt immer mehr andere Hersteller, die die Barrierefreiheit sehr ernst nehmen und ebenfalls gute barrierefreie bzw. -arme Blöcke zur Verfügung stellen.

Eine gute Lösung

Im Vergleich mir einer auf der Code-Ebene maßgeschneiderten Lösung geht man so gesehen mit WordPress (wie auch mit anderen ähnlich bequemen in der Benutzung Systemen) einen gewissen Kompromiss ein. Man bekommt nicht in jedem Fall einen super optimierten Code, dafür aber eine für die Redakteure bequem zu benutzende Software, die generell sehr gute Ergebnisse bezüglich der Barrierefreiheit liefert.

Wer auf Spielereien verzichtet (was ohnehin meist ratsam ist), ein paar Grundregeln kennt und bewusst einfach bleibt, kann mit WordPress eine barrierearme Seite betreiben, die sich auch langfristig ohne viel Aufwand pflegen lässt.

Hilfreiche Tools

Es gibt immer mehr hilfreiche Tools, mit denen man die Seiten auf Barrierefreiheit testen kann. Aber Vorsicht: Diese Tools können nicht alle Probleme aufdecken. Man nimmt an, dass sie ca. 30 bis 50% der Fehler aufzeigen können.

Wieso? Ein Tool kann z.B. prüfen, ob ein Alternativtext für ein Bild hinzugefügt wurde, jedoch nicht, ob dieser sinnvoll ist. Deshalb gilt: Bereits bei der Erstellung der Inhalte muss du stets die Barrierefreiheit im Blick behalten.

Zurück zu den Tools.

Für einen ersten Überblick würde ich zum Tool PageSpeed Insights (im neuen Tab) von Google greifen, das u.a. auch die Barrierefreiheit der Seite testet. Hier wird immer nur eine angegebene URL getestet, nicht der gesamte Webauftritt. Fehler werden unter „Barrierefreiheit“ aufgezeigt:

Check auf Barrierefreiheit bei Pagespeed Insights
Test der Barrierefreiheit bei Pagespeed Insights

Ein weiteres hilfreiches Tool ist auch das WordPress Plugin Accessibility Checker (im neuen Tab) von Equalize Digital. Es zeigt bereits während der Erstellung von Inhalten direkt im WordPress mögliche Probleme auf. Es leistet gute Dienste auch in der kostenlosen Version, aber auch dieses Werkzeug entdeckt nicht alle möglichen Fehler.

Plugin Accessibility Checker
Plugin Accessibility Checker

Unterm Strich

Barrierefreiheit ist kein Zustand, den man einmal erreicht und dann abhaken kann. Wenn man eine „barrierefreie Website“ beim Webdesigner bestellt, kann es nach einer „wasserdichten Lösung“ klingen, die aber so nicht zu leisten ist, besonders wenn man die zukünftigen Änderungen der Inhalte bedenkt.

Jeder Redakteur muss die Barrierefreiheit ständig im Blick haben, bei jedem neuen Inhalt, bei jeder Änderung. WordPress nimmt einem dabei vieles ab: Die Grundstruktur lässt sich barrierearm umsetzen, viele Standardfunktionen sind gut durchdacht.

Aber auch das beste System kann nicht alles automatisch regeln. Wer die Inhalte pflegt, hat Einfluss – und Verantwortung. Die gute Nachricht: Mit ein wenig Wissen, hilfreichen Werkzeugen und einem wachsamen Auge lässt sich schon viel erreichen und nach und nach die Barrieren auf der eigenen Website reduzieren.

Beratung notwendig?

Einfach das Formular auf Schulhomepage erstellen lassen ausfüllen und ich melde mich bald.

Ähnliche Beiträge