Einleitung
Barrierefreiheit einer Schulwebsite bedeutet, dass Menschen mit Einschränkungen – etwa beim Sehen, Hören, Bewegen oder Verstehen – diese Website ohne Barrieren nutzen können. Für öffentliche Schulen in Deutschland ist digitale Barrierefreiheit nicht nur ein Gebot der Inklusion, sondern seit 2019/2020 auch gesetzliche Pflicht. Dieser Ratgeber erläutert, welche Anforderungen an eine barrierefreie (bzw. barrierearme) Schulhomepage gestellt werden, welche typischen Fehler zu vermeiden sind und wie Schulen mit begrenzten Ressourcen die Umsetzung pragmatisch angehen können. Dabei wird auch gezeigt, dass Barrierefreiheit die Usability und Nutzerfreundlichkeit für alle verbessert – von jüngeren bis älteren Menschen.
Rechtliche Grundlagen: BITV 2.0 und EU-Richtlinie
Öffentliche Schulen gehören zu den öffentlichen Stellen, die ihre Websites barrierefrei gestalten müssen. Grundlage ist die EU-Webseitenrichtlinie 2016/2102, deren Anforderungen in Deutschland im Behindertengleichstellungsgesetz (BGG) und in der Barrierefreie-Informationstechnik-Verordnung (BITV) 2.0 verankert sind. Praktisch bedeutet das: Eine Schul-Website gilt als barrierefrei, wenn sie den technischen Standards der WCAG 2.1 (Web Content Accessibility Guidelines) auf Konformitätsstufe AA entspricht. Die BITV 2.0 verweist auf die europäische Norm EN 301 549, in der WCAG-Kriterien als Maßstab festgelegt sind. Für Schulen heißt das konkret, sie müssen z.B. Alternativtexte für Bilder anbieten, ausreichende Farbkontraste einhalten und alle Funktionen per Tastatur bedienbar machen. Die Anforderungen gelten gleichermaßen für neue und bestehende Websites; nur in wenigen Fällen gibt es Ausnahmen (z.B. für sehr alte PDF-Dokumente von vor 2018 oder bestimmte eingebundene Inhalte Dritter).
Erklärung zur Barrierefreiheit: Jede Schulwebsite muss eine gut auffindbare Erklärung zur Barrierefreiheit veröffentlichen. Diese sollte von jeder Unterseite aus verlinkt sein (üblich im Footer) und jährlich aktualisiert werden. In der Erklärung legt die Schule verständlich dar, wie barrierefrei ihre Homepage ist – also ob sie vollständig, teilweise oder nicht konform zu den Anforderungen ist. Es muss beschrieben werden, welche Teile der Website nicht barrierefrei sind und warum (z.B. wegen unverhältnismäßigen Aufwands oder weil ein bestimmter Inhalt technisch nicht barrierefrei angeboten werden kann). Wichtig ist auch anzugeben, wie die Website getestet wurde (z.B. Selbstbewertung oder Experten-Test). Nutzer der Schulhomepage müssen die Möglichkeit haben, Kontakt aufzunehmen, um Barrieren zu melden oder Inhalte in zugänglicher Form anzufordern. Hierfür sollte eine E-Mail-Adresse oder ein Kontaktformular angegeben werden. Schulen sind verpflichtet, auf Feedback zeitnah zu reagieren und Abhilfe zu schaffen.
Feedback und Durchsetzung: Bleibt eine Rückmeldung der Schule aus oder wird ein gemeldetes Problem nicht zufriedenstellend gelöst, sieht das Gesetz ein Durchsetzungsverfahren vor. In der Barrierefreiheitserklärung muss ein Hinweis auf die zuständige Schlichtungsstelle bzw. Ombudsstelle enthalten sein. Nutzer können sich dorthin wenden, um Unterstützung zu erhalten – dieses Verfahren ist kostenfrei und soll eine einvernehmliche Lösung vermitteln. Zusätzlich überprüfen staatliche Überwachungsstellen stichprobenartig die Websites öffentlicher Stellen auf Barrierefreiheit. Schulen sollten daher nicht nur aus eigenem Antrieb, sondern auch angesichts möglicher Prüfungen bemüht sein, die gesetzlichen Anforderungen an die Schulwebsite zur Barrierefreiheit zu erfüllen.
Länderspezifische Regelungen: Die Barrierefreiheits-Vorgaben basieren in allen Bundesländern auf den gleichen Grundlagen (EU-Richtlinie und BITV). Einige Länder haben ergänzende Bestimmungen – etwa das Inklusionsstärkungsgesetz (ISG) in Nordrhein-Westfalen – doch orientieren sich die praktischen Anforderungen überall an WCAG 2.1 AA und der BITV 2.0. Somit gelten die folgenden Grundprinzipien für alle öffentlichen Schulhomepages in Deutschland, unabhängig vom Bundesland. In der Regel zählen Schulen nicht zu den von der EU-Richtlinie ausgenommenen Einrichtungen, da sie der Öffentlichkeit Bildung und Informationen bereitstellen (Ausnahmen betreffen eher interne Intranets oder archivierte Alt-Inhalte). Auch bei der Beschaffung von neuen Web-Angeboten oder Content-Management-Systemen müssen öffentliche Schulen auf Barrierefreiheit achten – neue Systeme sollten von vornherein BITV-konform entwickelt oder eingekauft werden, damit spätere Anpassungen nicht aufwändig nachgeholt werden müssen.
Was umfasst Barrierefreiheit auf einer Schulwebsite?
Struktur und Semantik der Seiten
Eine klare, logische Struktur ist die Grundlage der Zugänglichkeit. Überschriften sollten hierarchisch korrekt als <h1>, <h2>, ... ausgezeichnet sein (nicht nur optisch groß und fett dargestellt). Jede Seite sollte genau eine Hauptüberschrift <h1> haben, darunter Unterüberschriften in der richtigen Reihenfolge. Diese semantische Gliederung hilft Screenreader-Nutzern, den Inhalt zu erfassen, und sorgt allgemein für bessere Orientierung. Ebenso sollten Layout-Tabellen vermieden werden – wenn Tabellen für Daten genutzt werden, müssen sie Überschriftenzellen (<th>) und sinnvolle Zusammenfassungen haben, damit sie vorgelesen und verstanden werden können.
Auch Bereiche der Seite (Header, Navigation, Hauptbereich, Footer) sollten erkennbar sein – idealerweise durch ARIA-Rollen oder HTML5-Struktur (<nav>, <main>, <footer> etc.). Eine sinnvolle Navigationsstruktur (Menüpunkte, ggf. Brotkrumen-Navigation) stellt sicher, dass sich Nutzer auf der Schulhomepage zurechtfinden. Links sollten eindeutig beschriftet sein – anstelle generischer Texte wie „Hier klicken“ oder „mehr…“ sollte der Link selbst aussagen, wohin er führt (z.B. „Anmeldung zur Projektwoche“ statt „Infos hier“). Das erleichtert insbesondere Nutzern von Screenreadern die Bedienung, da sie Links aus dem Kontext heraus anhören können.
Zudem ist Konsistenz wichtig: Wiederkehrende Elemente (z.B. Menü, Suche, Footer) sollten auf allen Unterseiten an derselben Stelle und in gleicher Reihenfolge stehen. Eine Sitemap oder Suchfunktion sollte vorhanden sein, damit Nutzer alternative Wege zur Information haben. Diese strukturellen Maßnahmen kommen auch der allgemeinen Benutzerfreundlichkeit zugute, weil sie die Seite übersichtlich und navigierbar machen.
Tastatur-Bedienbarkeit und Fokus
Alle Funktionen der Schulwebsite müssen ohne Maus nutzbar sein, also per Tastatur. Viele Menschen mit motorischen Einschränkungen oder Sehbehinderungen verwenden die Tastatur (Tabulator-Taste, Enter, Pfeiltasten) zur Navigation. Daher darf es keine „Tastaturfallen“ geben: Ein Nutzer sollte sich mit der Tab-Taste logisch durch Links und Formularelemente bewegen können und nicht steckenbleiben. Interaktive Komponenten wie Dropdown-Menüs, Bildergalerien oder PDF-Viewer sind oft problematisch – hier ist sicherzustellen, dass sie ebenfalls per Tastatur steuerbar sind. Falls auf der Schulhomepage Pop-up-Fenster oder modale Dialoge genutzt werden (z.B. Bildergalerie, Cookie-Hinweis), müssen diese per Tastatur geschlossen werden können (üblicherweise über ESC).
Ein zentrales Detail ist die Fokus-Markierung: Wenn man mit Tab durch die Seite geht, muss immer sichtbar sein, welches Element gerade fokussiert ist. Viele moderne Designs blenden den standardmäßigen Fokusrahmen aus – dies darf nicht passieren, da Nutzer sonst die Orientierung verlieren. Der Fokusrahmen (z.B. ein farbiger Rand um den aktiven Link oder Button) sollte gut erkennbar sein. Zusätzlich kann am Seitenanfang ein unsichtbarer „Skip Link“ eingebaut werden, der per Tastatur sichtbar wird und direkt zum Hauptinhalt springt; so können Vielnutzer die Navigation überspringen. Prüfen Sie die Tastaturbedienung Ihrer Schulwebsite am besten selbst: Einfach die Seite neu laden und ohne Maus mit Tab und Enter durchgehen – kommt man überall hin, sind Menüs und Slider erreichbar, und sieht man stets, wo man sich befindet?
Bilder, Grafiken und Alternativtexte
Bilder und Grafiken auf der Website müssen mit aussagekräftigen Alternativtexten (alt-Tags) versehen sein, sofern sie Informationen vermitteln. Ein Screenreader liest diesen Alternativtext vor, damit blinde oder sehbehinderte Menschen verstehen, was auf dem Bild dargestellt ist. Der Alt-Text sollte knapp und präzise den Inhalt oder die Funktion des Bildes beschreiben. Zum Beispiel: alt="Sportfest der Schule: Schülerinnen beim Staffellauf auf dem Sportplatz" ist sinnvoller als alt="schule1.jpg" oder gar kein Alt-Text. Dekorative Bilder, die keine inhaltliche Information tragen (z.B. rein ästhetische Hintergrundgrafiken), erhalten ein leeres alt-Attribut alt="", damit sie von Hilfsmitteln ignoriert werden.
Ein häufiger Fehler auf Schulhomepages ist, dass wichtige Textinformationen als Bild eingebunden werden (etwa als Scan eines Elternbriefs oder als Plakat-PDF). Dies ist nicht barrierefrei: Screenreader können den Text im Bild nicht lesen, und beim Vergrößern verliert es an Qualität. Solche Inhalte sollten immer auch als echten Text verfügbar sein – entweder direkt als HTML auf der Website oder zumindest als barrierefreies PDF. Generell gilt: Alle Haupt-Inhalte sollten als Text vorliegen, nicht nur in Bildform.
Zusätzlich zu statischen Bildern müssen auch Grafiken oder Diagramme erklärt werden. Wenn z.B. ein Kreisdiagramm mit Prozentwerten gezeigt wird, sollte der Alt-Text die Kernaussage umfassen („Diagramm: Verteilung der Schulabschlüsse – 40% Gymnasium, 30% Realschule, …“). Für komplexere Infografiken kann es sinnvoll sein, im umliegenden Text oder via Link eine ausführlichere Beschreibung anzubieten (z.B. als Tabellenform der dargestellten Daten).
Videos, Audio und Multimedia
Videos und Audioaufzeichnungen auf der Schulwebsite müssen ebenfalls barrierefrei aufbereitet sein. Konkret heißt das: Untertitel bzw. Untertitelspur für Videos und Transkripte für Audio-Inhalte sollten bereitgestellt werden. Untertitel helfen hörbehinderten Menschen (und übrigens auch Nutzern, die Videos z.B. in lauter Umgebung ohne Ton anschauen). Sie sollten idealerweise im Videoplayer ein- und ausblendbar sein (Closed Captions) und nicht dauerhaft ins Bild „eingebrannt“ – so können alle Nutzer selbst entscheiden, ob sie die Untertitel sehen möchten. Falls die Schule Videos z.B. auf YouTube veröffentlicht und diese auf der Homepage eingebettet sind, können dort erstellte Untertitel genutzt werden. Für Audio-Dateien (z.B. Podcasts oder gesprochene Beiträge) sollte ein Texttranskript zum Download oder auf einer Unterseite angeboten werden, damit auch Nutzer mit Hörbehinderung oder ohne Audiozugang den Inhalt erfassen können.
Achten Sie darauf, dass kein Multimedia-Inhalt automatisch abspielt beim Seitenaufruf (Autoplay). Ein plötzlich startendes Video oder Musik ohne Nutzeraktion stellt für viele ein Hindernis dar – für Screenreader-Nutzer überlagert es die Sprachausgabe, und für manche Menschen mit kognitiven Beeinträchtigungen oder Epilepsie kann es sehr störend oder sogar gefährlich sein. Autoplay sollte daher deaktiviert sein oder zumindest eine sofort sichtbare Pause-/Stopp-Funktion vorhanden sein (WCAG fordert, dass Inhalte, die länger als 5 Sekunden autom. ablaufen, pausierbar sind).
Formulare und interaktive Elemente
Viele Schulwebsites enthalten Formulare (Kontaktformulare, Anmeldeformulare für AGs etc.). Solche Formulare müssen so gestaltet sein, dass sie für alle verständlich und bedienbar sind. Wichtige Punkte sind: Klare Beschriftungen (Labels) an jedem Eingabefeld, statt nur Platzhaltertext im Feld. Der Feldname („Name:“, „E-Mail:“ etc.) sollte vor oder über dem Feld als Text stehen und im Code mit dem Eingabefeld verknüpft sein (mittels <label for="...">). Screenreader lesen dann korrekt vor, was in ein Feld einzutragen ist. Fehlermeldungen müssen verständlich formuliert und leicht erkennbar sein: Statt einem allgemeinen „Eingabe ungültig!“ sollte z.B. stehen „Fehler: Das Feld E-Mail ist nicht ausgefüllt“ und die fehlerhaften Felder sollten hervorgehoben werden. Idealerweise wird der Fokus nach dem Absenden auf die Fehlermeldung gesetzt, damit Nutzer sie direkt wahrnehmen.
Bedienungshilfen in Formularen sind ebenfalls wichtig: Nutzer müssen per Tastatur von Feld zu Feld springen können (auch zwischen Dropdowns, Checkboxen etc.), und es sollte eine logische Reihenfolge der Felder existieren. Vermeiden Sie es, dass Formulare nach jeder Eingabe automatisch neu laden oder den Fokus verlieren. Falls komplexe Steuerelemente eingebunden sind (z.B. ein datums-Picker-Kalender), stellen Sie sicher, dass sie zugänglich sind oder bieten Sie eine Alternative (z.B. manuelle Datumseingabe).
Interaktive Inhalte wie Bilderslider, Dropdown-Menüs oder Pop-up-Fenster stellen oft Barrieren dar. Wenn Sie solche Elemente einsetzen, prüfen Sie genau, ob sie barrierefrei umgesetzt sind: Kann der Slider mit der Tastatur gesteuert oder angehalten werden? Sind alle Menüeinträge per Tab erreichbar? Lässt sich das Pop-up ohne Maus schließen? Wenn Sie Zweifel haben, ist es meist besser, auf solche potentiell problematischen Gimmicks zu verzichten oder eine statische Alternative bereitzustellen. Weniger ist mehr – eine schlicht aufgebaute Website ohne dynamische Spielereien ist oft zugänglicher als eine komplexe Seite mit vielen Skripten.
Farbschema, Kontraste und Layout
Das Design einer Schulwebsite muss so gewählt sein, dass Inhalte für alle gut wahrnehmbar sind. Ein zentrales Kriterium ist der Kontrast zwischen Text und Hintergrund. Für normalen Fließtext fordern die WCAG mindestens ein Kontrastverhältnis von 4,5:1 (bei großen Überschriften ab 18pt mindestens 3:1). Das bedeutet z.B., dunkelgraue Schrift auf hellgrauem Grund ist meist nicht ausreichend – schwarzer oder sehr dunkler Text auf weißem bzw. sehr hellem Hintergrund ist ideal. Prüfen lässt sich der Kontrast mit kostenlosen Tools (z.B. WebAIM Contrast Checker). Auch bei Buttons, Links und Grafiken sollten ausreichend Kontraste vorhanden sein, insbesondere wenn Farben genutzt werden, um Informationen zu vermitteln. Farben allein sollten nie das einzige Unterscheidungsmerkmal sein – z.B. Pflichtfelder nicht nur durch rote Umrandung kennzeichnen, sondern zusätzlich etwa mit einem Sternchen und Klartext („*Pflichtfeld“).
Die Schrift sollte gut lesbar und skalierbar sein. Verwenden Sie klare Schriftarten (keine verspielten Schulschrift-Fonts für langen Text) und eine ausreichende Grundgröße (mindestens 16px/12pt für Fließtext als Anhaltspunkt). Nutzer müssen das Layout vergrößern können, ohne dass Inhalte abgeschnitten werden – moderne Websites sollten bis 200% Zoom noch ohne horizontales Scrollen lesbar bleiben. Vermeiden Sie außerdem blockierten Zoom (z.B. durch user-scalable=no in der mobilen Ansicht).
Responsives Layout ist nicht nur ein Komfortmerkmal, sondern auch ein Teil von Barrierefreiheit: Eine barrierefreie Schulwebsite passt sich verschiedenen Bildschirmgrößen und Geräten an. Viele Menschen mit Behinderungen nutzen mobile Geräte mit Hilfstechnologien; z.B. kann ein sehbehinderter Schüler mit dem Smartphone per Zoom und Screenreader die Schulhomepage lesen. Daher müssen Menüs, Texte und Bedienelemente auf kleinen Bildschirmen genauso zugänglich sein wie am Desktop. Testen Sie Ihre Seiten auf einem Smartphone oder verkleinern Sie im Browser das Fenster: Ist die Seite weiterhin nutzbar? Gibt es versteckte Elemente, die nur mit Hover erscheinen (auf Touch-Geräten problematisch)? Sind Bedienelemente groß genug für Touch-Bedienung? – Kleine anklickbare Flächen können für Nutzer mit motorischen Schwierigkeiten oder auf Mobilgeräten schwer zu treffen sein. Halten Sie Buttons und Links ausreichend groß und mit Abstand.
Schließlich sollten animierte Inhalte sparsam eingesetzt werden. Blinken oder Flackern (insbesondere über 3 mal pro Sekunde) kann bei empfindlichen Nutzern Anfälle auslösen und ist unzulässig. Auch dezente Animationen sollten abschaltbar sein oder nach kurzer Zeit von selbst stoppen (z.B. automatische Bildwechsel in Slidern). Ein zurückhaltendes, ruhiges Layout hilft auch Nutzern mit Aufmerksamkeitsproblemen, sich auf die Inhalte zu konzentrieren.
Sprache, Verständlichkeit und Leichte Sprache
Barrierefreiheit betrifft nicht nur Technik und Design, sondern auch die Sprache der Inhalte. Offizielle Texte sind oft kompliziert formuliert – versuchen Sie, die Website-Texte möglichst klar und einfach zu halten. Das bedeutet: Kurze Sätze, aktive Sprache, gängige Begriffe statt Verwaltungsvokabular. Erläutern Sie Abkürzungen beim ersten Vorkommen (z.B. „Elternvertretung (EV)“). Eine strukturierte Gliederung mit Absätzen, Listen und Zwischenüberschriften erhöht die Verständlichkeit für alle Leser, insbesondere für Menschen mit Lernschwierigkeiten oder geringen Deutschkenntnissen.
Nach WCAG 2.1 ist einfache Sprache zwar nicht verpflichtend (es wäre AAA-Niveau), aber sie wird empfohlen. In Deutschland geht man teils noch einen Schritt weiter: Die BITV 2.0 schreibt für Bundesbehörden vor, dass auf der Startseite Infos in Leichter Sprache angeboten werden müssen – einer sehr stark vereinfachten, regelbasierten Sprache für Menschen mit kognitiven Beeinträchtigungen. Ebenso sind Informationen in Gebärdensprache gefordert (meist in Form eines Videos). Für Schulen als einzelne Einrichtungen ist dies nicht überall gesetzlich verpflichtend, wird aber als gute Praxis der Inklusion angesehen. Praktisch könnte eine Schule z.B. eine Unterseite „Leichte Sprache“ bereitstellen, auf der die wichtigsten Informationen der Schulhomepage in kurzen, einfachen Worten zusammengefasst sind (Schulprofil, Kontaktmöglichkeiten, Anmeldeinformationen etc.). Einige Bundesländer empfehlen dies ausdrücklich. Auch ohne formelle Leichte-Sprache-Übersetzung sollte zumindest die Startseite einer Schulwebsite so geschrieben sein, dass sie möglichst leicht verständlich ist – schließlich wollen sich dort z.B. auch Eltern mit geringeren Deutschkenntnissen oder Schüler mit Lernschwierigkeiten informieren können.
Zusätzlich lohnt ein Blick darauf, mehrsprachige Inhalte anzubieten, falls Ihre Schule einen hohen Anteil anderssprachiger Familien hat. Barrierefreiheit heißt zwar primär Zugänglichkeit für Menschen mit Behinderungen, aber im weiteren Sinne fördert eine klar verständliche Ausdrucksweise und übersichtliche Information die Nutzbarkeit für alle Besucher. Eine barrierefreie Website ist in der Regel auch eine nutzerfreundliche Website – komplizierte Formulierungen oder unstrukturierte Textblöcke behindern schließlich jeden Leser.
Technische Robustheit und Kompatibilität
Unter Robustheit versteht man, dass eine Website von verschiedenen Browsern und technischen Hilfsmitteln korrekt verarbeitet werden kann. Das ist eher ein Hintergrund-Thema, betrifft aber z.B. den HTML-Code und die Einhaltung von Standards. Nutzen Sie standardkonformes HTML und vermeiden Sie Fehler im Code (die meisten Content-Management-Systeme erledigen dies automatisch, solange man sich an ihre Regeln hält). Screenreader-Kompatibilität ist hier entscheidend: Testen Sie im Zweifel einzelne Seiten mit einem Screenreader (Windows: NVDA kostenlos, Mac: VoiceOver integriert). Dabei finden Sie heraus, ob die Inhalte in logischer Reihenfolge vorgelesen werden, ob Bilder korrekt benannt sind und Links verständlich vorgelesen werden.
Achten Sie bei extern eingebundenen Inhalten (wie Karten, Social-Media-Feeds oder YouTube-Plugins) darauf, dass diese die Barrierefreiheit nicht aushebeln. Eine Google Maps-Karte beispielsweise ist für Screenreader nicht sinnvoll nutzbar – bieten Sie daher die Adresse zusätzlich im Text an. Eingebettete externe Widgets können oft per Tastatur nicht bedienbar sein; prüfen Sie dies oder bieten Sie zumindest einen alternativen Link („Inhalt auf externer Seite ansehen“). Je weniger externe Skripte und Frames, desto besser in Bezug auf Barrierefreiheit und Performance.
Nicht zuletzt: Performance und Barrierefreiheit hängen zusammen. Schnell ladende, schlanke Webseiten kommen allen Nutzern zugute, inklusive denen mit langsamer Internetverbindung oder älteren Geräten. Vermeiden Sie unnötige Script-Orgien oder riesige Bilddateien – das verbessert die Zugänglichkeit (und die Nutzererfahrung insgesamt). Eine robuste Schulwebsite sollte auch bei deaktiviertem Javascript zumindest die Grundinformationen anzeigen können; kritische Inhalte sollten nicht ausschließlich von Skripten abhängen.
Barrierefreiheit praktisch umsetzen: Tipps für Schulen
Die Umsetzung von Barrierefreiheit auf einer Schulhomepage mag zunächst komplex wirken. Schulen haben oft begrenzte Ressourcen: Webauftritte werden nebenbei von Lehrkräften oder Verwaltungsmitarbeitern betreut, die weder viel Zeit noch Spezialwissen in Webentwicklung haben. Doch es gibt Ansatzpunkte, um schrittweise Verbesserungen zu erzielen.
Organisatorisch sollte idealerweise eine verantwortliche Person oder ein Team benannt werden, das sich um die Website-Pflege und Barrierefreiheit kümmert. Dieses Team kann sich Basiswissen aneignen und als Multiplikator innerhalb der Schule dienen. Wichtig ist, die Barrierefreiheit in den Redaktionsworkflow zu integrieren: Alle, die Inhalte auf die Website stellen (Lehrkräfte, Sekretariat, Schüler-AGs), sollten einfache Richtlinien kennen. Zum Beispiel: „Denkt daran, jedem Bild einen Alternativtext zu geben“, „Überschriften nur mit Formatvorlage erstellen, nicht einfach Text groß und fett machen“, „PDFs nur hochladen, wenn sie zugänglich sind – sonst lieber als normalen Text auf der Webseite veröffentlichen.“ Solche Grundregeln können in einer kurzen internen Checkliste festgehalten und neuen Inhaltsredakteuren erklärt werden.
Manche Bundesländer stellen Hilfsmittel bereit, z.B. zentral gehostete Schulhomepage-Baukästen oder Templates, die bereits barrierefrei (oder zumindest barrierearm) gestaltet sind. Nutzen Sie solche Angebote, falls verfügbar – sie erleichtern es, ohne tiefes technisches Know-how eine BITV-konforme Seite zu betreiben. Dennoch bleibt die inhaltliche Pflege barrierefrei: Ein noch so gutes Template nützt wenig, wenn anschließend z.B. Bilder ohne Alt-Text eingefügt oder wild Formatierungen missbraucht werden. Daher sollte Barrierefreiheit als kontinuierlicher Prozess gesehen werden.
Quick-Checkliste: Barrierearme Schulhomepage in 60 Minuten
Möchten Sie rasch den Status Ihrer Schulwebsite überprüfen und erste Verbesserungen angehen? Die folgende Schnell-Checkliste bietet einige Punkte, die oft schon in kurzer Zeit umgesetzt werden können:
Alt-Texte prüfen: Gehen Sie über Ihre Startseite und Unterseiten und kontrollieren Sie die Bilder. Haben alle informativen Bilder einen sinnvollen Alternativtext? Entfernen Sie etwaige „Bild von …“-Floskeln und stellen Sie sicher, dass der Text den Bildinhalt treffend beschreibt.
Überschriften-Hierarchie: Öffnen Sie beispielhaft einige Inhaltsseiten. Sind Überschriften logisch verschachtelt (H1, H2, H3…)? Falls nicht, passen Sie die Formatvorlagen an. Korrigieren Sie Stellen, an denen Text nur visuell groß dargestellt, aber im Code keine Überschrift ist – das verbessert sofort die Struktur für Screenreader.
Tastaturtest: Versuchen Sie, die Website nur mit der Tastatur zu bedienen. Kommen Sie per Tab in alle Menüs und Links? Ist ein sichtbarer Fokus-Rahmen vorhanden, der Ihre aktuelle Position anzeigt? Falls nicht, aktivieren Sie die Fokusanzeige (z.B. entfernen Sie
outline:nonein CSS) und prüfen Sie Dropdown-Menüs oder Slider auf Tastaturbedienbarkeit.Kontrast-Check: Wählen Sie eine Seite mit Text und führen Sie einen schnellen Kontrasttest durch. Nutzen Sie online Tools, um sicherzustellen, dass Ihre gewählten Text- und Hintergrundfarben den Kontrastanforderungen (mind. 4.5:1) genügen. Falls der Kontrast zu schwach ist (z.B. hellgrauer Text auf weiß), ändern Sie die Farben in der CSS-Definition auf ein kräftigeres Schema.
Sprache & Inhalte: Lesen Sie die Startseite aus Sicht eines externen Besuchers. Ist der Text klar und verständlich? Entfernen Sie unnötige Schachtelsätze oder komplizierte Fachbegriffe. Ergänzen Sie bei Bedarf eine kurze Erklärung in einfacher Sprache, insbesondere bei wichtigen Seiten (z.B. „So meldet man sein Kind an unserer Schule an“ in einfachen Worten).
Dokumente & PDFs: Inventarisieren Sie die verlinkten PDF-Dokumente oder Downloads auf Ihrer Seite. Enthalten diese wichtige Informationen (z.B. Schulordnung, Elternbriefe)? Wenn ja, stellen Sie sicher, dass diese PDFs barrierefrei sind (Tags, Lesereihenfolge, Alternativtexte eingebettet). Falls nicht, planen Sie, die Inhalte kurzfristig auf einer regulären Webseite bereitzustellen oder zumindest bei neuerstellten PDFs auf Barrierefreiheit zu achten.
Erklärung zur Barrierefreiheit: Prüfen Sie, ob im Footer Ihrer Website der Link “Barrierefreiheit” vorhanden ist und ob die Erklärung alle erforderlichen Inhalte enthält (Stand der Vereinbarkeit, bekannte Barrieren, Feedback-Kontakt). Aktualisieren Sie die Erklärung, falls sie veraltet ist – idealerweise mit aktuellem Datum und Hinweis, welche Teile zuletzt verbessert wurden.
Multimedia stoppen: Falls Sie Hintergrundmusik, automatisch ablaufende Bildwechsel oder Videos auf der Startseite haben, deaktivieren Sie das automatische Abspielen. Stellen Sie sicher, dass Nutzer Medien manuell starten können und dass zumindest ein Untertitel oder Transkript zu wichtigen Medieninhalten vorhanden ist (zur Not fügen Sie vorübergehend einen Satz unter dem Video ein wie „Zusammenfassung des Videos: …“).
Diese Quick-Fixes erhöhen bereits die Barrierefreiheit Ihrer Schulhomepage spürbar. Sie bilden den Einstieg; umfassendere Änderungen (z.B. komplette Neustrukturierung des HTML oder Nachrüstung aller alten PDFs) brauchen mehr Zeit und Planung.
Barrierefreiheit dauerhaft verankern: Redaktion und Prüfung
Nach den ersten Sofortmaßnahmen sollte Barrierefreiheit in den Regelbetrieb der Websitepflege übergehen:
Redaktionelle Richtlinien: Erstellen Sie für alle Website-Autoren einen einfachen Leitfaden, der die wichtigsten Do’s and Don’ts zusammenfasst. Beispielsweise:
Verwenden von Überschriften-Formatvorlagen für Titel und Untertitel (statt manuellem Formatieren).
Jedes neue Bild bekommt einen passenden Alternativtext, außer es ist rein dekorativ (dann
alt="").Bei neuen PDFs darauf achten, diese direkt barrierefrei zu erstellen (mit Tags in Word/Acrobat) oder die Inhalte alternativ als HTML-Seite anzubieten.
Videos nur mit Untertiteln veröffentlichen; Audios nur mit schriftlicher Zusammenfassung.
Keine wichtigen Infos allein als Bild posten (z.B. nicht nur Screenshot des Vertretungsplans, sondern die Daten auch als Text anbieten).
Linktexte immer aussagekräftig formulieren.
Bei zweisprachigen Begriffen (Deutsch/Englisch) oder Abkürzungen einen erklärenden Text hinzufügen.
Solche redaktionellen Grundsätze erhöhen nicht nur die Zugänglichkeit, sondern oft auch die allgemeine Qualität und Verständlichkeit der Website-Inhalte.
Regelmäßige Audits: Planen Sie in längeren Abständen (z.B. viertel- oder halbjährlich) eine Selbstüberprüfung der Schulhomepage. Dabei können Sie Stichproben machen: etwa die Startseite und ein bis zwei zufällige Unterseiten mit einem automatischen Prüf-Tool scannen (es gibt Browser-Plugins und Online-Checker, die gängige Fehler aufdecken). Automatische Tools finden zwar nicht alles, aber sie zeigen leicht behebbare Probleme an (fehlende Alt-Texte, Formularfelder ohne Label, Farb-Kontrastfehler etc.). Ergänzend lohnt ein manueller Test mit einem Screenreader oder der Lupenfunktion, um ein Gefühl für die Nutzerperspektive zu bekommen.
Feedback nutzen: Ermuntern Sie die Schulgemeinschaft, auf Barrieren hinzuweisen. Zum Beispiel kann im Impressum oder der Barrierefreiheitserklärung stehen: „Falls Sie Inhalte unserer Website nicht nutzen können, informieren Sie uns bitte.“ Nehmen Sie solche Hinweise ernst und sehen Sie sie als Chance zur Verbesserung. Oft fallen Betroffenen Details auf, die anderen entgehen.
Jährliche Aktualisierung: Denken Sie daran, spätestens einmal pro Jahr die Barrierefreiheitserklärung zu aktualisieren. Dabei sollte idealerweise tatsächlich geprüft werden, ob neue Inhalte hinzugekommen sind, die Barrieren aufweisen. Dokumentieren Sie in der Erklärung kurz, wann die Seite zuletzt geprüft wurde und wie (z.B. „Selbsttest mit WCAG-Tool und NVDA am [Datum]“). Dies erhöht die Glaubwürdigkeit und zeigt auch externen Prüfern, dass die Schule das Thema ernstnimmt.
Fortbildungen: Ziehen Sie in Betracht, verantwortlichen Lehrkräften oder Admins eine Schulung oder Webinar zum Thema digitale Barrierefreiheit zu ermöglichen. Es gibt kostenlose Ressourcen, Leitfäden und Seminare (z.B. vom Bundesfachstelle Barrierefreiheit oder den Medienzentren der Länder), die praxisnah erläutern, wie man Webinhalte barrierefrei pflegt. Dieses Wissen kann dann schulintern weitergegeben werden.
Durch kontinuierliche Pflege und Kontrollen wird Barrierefreiheit vom „Projekt“ zum Normalbestandteil der Website-Arbeit. Das ist letztlich weniger aufwändig, als im Abstand von mehreren Jahren einen großen Nachbesserungs-Marathon durchführen zu müssen.
Typische Fehler auf Schulwebsites und wie man sie vermeidet
Abschließend lohnt ein Blick auf häufige Fallstricke. Viele Barrieren entstehen durch verbreitete Fehler, die mit etwas Achtsamkeit vermeidbar sind:
Fehlende oder falsche Alt-Texte: Bilder ohne Alternativtext sind für Screenreader-Nutzer unsichtbar. Auch nichtssagende Alt-Texte wie Dateinamen sind nutzlos. Tipp: Pflegen Sie Alt-Texte sofort beim Hochladen eines Bildes ein. Nutzen Sie dafür 1-2 kurze Sätze, die das Bild im Kontext beschreiben.
Unzureichender Farbkontrast: Ein Design in Pastellfarben mag modern wirken, ist aber oft schwer lesbar (z.B. hellgelber Text auf weiß). Tipp: Prüfen Sie Farbkombinationen mit einem Kontrast-Checker und passen Sie Farben an, bis sie WCAG-konform sind.
Nur Maus-Bedienung bedacht: Wenn interaktive Elemente wie Dropdown-Menüs, Slider oder Lightbox-Galerien nicht auf Tastatursteuerung getestet wurden, bleiben sie vielen Nutzern verschlossen. Tipp: Jede neue Navigation oder Plugin-Komponente sollte auf Tab-/Enter-Bedienung geprüft werden. Im Zweifel bieten Sie einen HTML-Link zur selben Funktion an.
Unsichtbarer Fokus: Webdesigner entfernen aus optischen Gründen manchmal die Fokusrahmen. Dadurch wissen Tastaturnutzer nicht, wo sie sich befinden. Tipp: Gestalten Sie den Fokusindikator lieber ansprechend (z.B. in Schul-Farben mit Unterstreichung), statt ihn zu deaktivieren.
Formulare ohne Labels: Ein häufiges Problem sind Formulare, bei denen die Feldbeschriftungen nur als Placeholder im Feld stehen und beim Tippen verschwinden. Screenreader lesen solche Felder nicht korrekt vor. Tipp: Immer
<label>-Elemente für Eingabefelder verwenden, auch wenn Sie per CSS arbeiten – die Labels können visuell verborgen, aber für Assistenztechnologie vorhanden sein.Unklare Fehlermeldungen: „Fehler!“ oder rote Markierung ohne Text hilft niemandem. Nutzer wissen nicht, was zu tun ist. Tipp: Machen Sie Fehlermeldungen konkret („Bitte geben Sie eine gültige E-Mail-Adresse ein.“) und positionieren Sie sie so, dass sie wahrgenommen werden (z.B. am Feld und zusätzlich in einer Zusammenfassung oben).
Text in Grafiken eingebettet: Wie oben erwähnt, sind Flyer-Scans oder Bild-PDFs mit wichtigen Informationen nicht barrierefrei. Trotzdem kommen z.B. Essenspläne oder Elternbriefe oft nur als Foto aufs Web. Tipp: Stellen Sie zumindest den textlichen Inhalt zusätzlich als HTML oder barrierefreies PDF zur Verfügung.
Nicht barrierefreie PDF-Dateien: Viele PDF-Dokumente erfüllen nicht die Kriterien (fehlende Tags, keine Lese-Reihenfolge, Scans). Tipp: Verwenden Sie die Vorlagen der Schulverwaltung in editierbarer Form und erzeugen Sie daraus barrierefreie PDFs (heutige Office-Programme haben oft eine Option „PDF/A-Format, barrierefrei“). Schulen können alternativ Word-Dateien zur Verfügung stellen, die für Screenreader besser als nichts sind, oder – besser – direkt auf der Webseite veröffentlichen.
Überladene Seiten und bewegte Inhalte: Zu viel Information auf einmal, blinkende Banner oder automatische Slider sind anstrengend und können Nutzer mit kognitiven Beeinträchtigungen überfordern. Tipp: Entrümpeln Sie das Seitenlayout. Nutzen Sie Weißraum und beschränken Sie Animationen. Wichtiges gehört gut sichtbar nach oben, Unwichtiges kann weg.
Verlass auf Overlay-Tools: Es gibt Tools, die versprechen, per „Ein-Klick“ eine Website barrierefrei zu machen (Overlay-Bedienhilfen wie kontrastumschaltende Widgets etc.). Diese ersetzen keine echte Barrierefreiheit. Tatsächlich haben Studien gezeigt, dass solche Overlays bestehende Barrieren nicht zuverlässig eliminieren. Tipp: Konzentrieren Sie sich auf die im Code und Content verankerte Barrierefreiheit. Zusätzliche Komfort-Tools können höchstens ergänzend wirken, aber nicht die grundlegende Arbeit ersparen.
Indem Sie diese Fehler vermeiden, schließen Sie die häufigsten Lücken in Sachen Barrierefreiheit. Es lohnt sich, bei einem Relaunch oder größeren Update der Schulwebsite gezielt eine Checkliste typischer Barrierefallen durchzugehen – oft lassen sich viele Punkte schon mit geringem Mehraufwand richtig umsetzen.
Barrierefreiheit und Usability: Nutzen für alle
Barrierefreiheit auf Schulwebsites ist nicht nur eine Pflichterfüllung für eine Minderheit, sondern bringt spürbare Vorteile für alle Nutzergruppen. Eine klare Navigation, gut lesbare Texte und verständliche Inhalte sorgen dafür, dass sämtliche Besucher – ob mit oder ohne Behinderung – sich besser zurechtfinden. Ältere Menschen oder Eltern mit wenig Internet-Erfahrung profitieren z.B. von klar strukturierten, leicht verständlichen Seiten ebenso wie Menschen mit Behinderung. Auch temporäre Einschränkungen (z.B. ein gebrochener Arm, wegen dem jemand die Maus nicht nutzen kann, oder eine laute Umgebung, in der man auf Untertitel angewiesen ist) zeigen, dass barrierefreie Lösungen breit nützlich sind.
Zudem fördert Barrierefreiheit die mobile Nutzbarkeit: Ein schlankes, barrierearmes Design lädt schneller und ist auf Smartphones einfacher zu bedienen. Nicht zuletzt wirkt sich eine barrierefreie Website oft positiv auf die Suchmaschinenoptimierung (SEO) aus – semantischer HTML-Code und beschreibende Alternativtexte helfen Suchmaschinen, den Inhalt besser zu indexieren. Die Schulwebsite wird so möglicherweise besser gefunden. Und wer früh auf hohe Standards setzt, ist auch für zukünftige Technologien vorbereitet – man denke an Sprachassistenten, Smartwatches oder neue Browsergeräte, die ebenfalls auf strukturierten, zugänglichen Content angewiesen sind.
Kurzum, Barrierefreiheit = bessere Nutzbarkeit. Für Schulen bedeutet das: Eine barrierefreie Homepage kommt nicht nur Schülern mit Behinderungen zugute, sondern allen Schülern, Eltern, Lehrkräften und der Öffentlichkeit, die Informationen suchen. Sie signalisiert Offenheit, Modernität und Serviceorientierung. Gerade im Bildungsbereich ist es ein starkes Zeichen, wenn alle ohne Hindernisse Zugang zu wichtigen Informationen und Angeboten der Schule haben.
Fazit
Die barrierefreie Schulwebsite ist heute ein Muss – rechtlich, pädagogisch und praktisch. Mit klarem Blick auf die wichtigsten Anforderungen (WCAG-Kriterien wie Alternativtexte, Struktur, Kontrast, Tastaturbedienung usw.) und einer schrittweisen Herangehensweise lässt sich auch mit überschaubaren Mitteln viel erreichen. Wichtig ist, das Thema Barrierefreiheit als dauerhafte Aufgabe zu verstehen, nicht als einmaliges Projekt. Durch regelmäßige Überprüfung, Schulung und bewusste Inhaltsgestaltung wird Barrierefreiheit zum integralen Bestandteil Ihrer Schulhomepage. Damit leisten Sie einen Beitrag zu mehr Teilhabe und Inklusion im Schulalltag – und verbessern gleichzeitig die Qualität und Benutzerfreundlichkeit Ihrer Website insgesamt.
