Einleitung
Im ersten Teil dieser Reihe haben wir die rechtlichen Grundlagen der digitalen Barrierefreiheit beleuchtet: die Anforderungen der BITV 2.0, die Orientierung an WCAG 2.1 AA und die Pflicht zur Veröffentlichung einer Barrierefreiheitserklärung.
Doch rechtliche Vorgaben allein machen noch keine barrierefreie Schulwebsite. Entscheidend ist die konkrete Umsetzung im Inhalt und Design.
In diesem zweiten Teil geht es deshalb um die praktische Umsetzung barrierefreier Inhalte – von Struktur und Semantik über Bilder, Videos und Formulare bis hin zu Farbgestaltung, Sprache und technischer Robustheit. Ziel ist es, typische Barrieren zu erkennen und konkrete Verbesserungsmöglichkeiten aufzuzeigen.
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.
Fazit und Ausblick
Barrierefreiheit entscheidet sich im Detail. Eine klare Überschriftenstruktur, aussagekräftige Alternativtexte, ausreichende Farbkontraste und eine vollständige Tastaturbedienbarkeit sind keine technischen Nebensächlichkeiten, sondern zentrale Voraussetzungen für eine zugängliche Schulwebsite.
Dabei zeigt sich: Viele Verbesserungen lassen sich bereits mit überschaubarem Aufwand umsetzen – wenn Inhalte bewusst gestaltet und typische Fehler vermieden werden.
Doch selbst die beste Umsetzung bleibt nur dann wirksam, wenn sie dauerhaft gepflegt und überprüft wird. Neue Beiträge, hochgeladene PDFs oder eingebundene Medien können schnell wieder Barrieren erzeugen.
Im dritten und abschließenden Teil dieser Reihe richten wir daher den Blick auf die Praxis im Schulalltag: Wie können Schulen ihre Website regelmäßig prüfen? Welche Schnellmaßnahmen sind sofort möglich? Und wie lässt sich Barrierefreiheit organisatorisch verankern, sodass sie langfristig Bestandteil der Website-Arbeit bleibt?