Informatik · Klasse 8 · Web-Technologien: Eigene Inhalte gestalten · 2. Halbjahr

Barrierefreiheit im Web

Die Schülerinnen und Schüler lernen grundlegende Prinzipien der Barrierefreiheit für Webseiten kennen.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Wirkungen von Informatiksystemen
• KMK: Sekundarstufe I - Kommunizieren und Kooperieren

Über dieses Thema

Barrierefreiheit im Web sorgt dafür, dass Webseiten von allen Menschen genutzt werden können, unabhängig von körperlichen oder sensorischen Einschränkungen. Schülerinnen und Schüler in Klasse 8 lernen grundlegende Prinzipien wie semantische HTML-Elemente, Alt-Texte für Bilder, Kontrastverhältnisse und Tastaturnavigation kennen. Sie erkennen die Bedeutung für Nutzergruppen wie Sehbehinderte, die Screenreader nutzen, oder Menschen mit motorischen Beeinträchtigungen, die keine Maus bedienen können. So verstehen sie, wie fehlende Barrierefreiheit ganze Gruppen ausschließt und gegen Inklusionsziele verstößt.

Im Rahmen der KMK-Standards zu Wirkungen von Informatiksystemen und Kommunizieren und Kooperieren analysieren die Lernenden reale Webseiten auf Barrieren. Sie beurteilen Auswirkungen, etwa dass unstrukturierter Code Screenreader verwirrt, und lernen, wie einfache HTML-Anpassungen Zugänglichkeit steigern. Dies fördert systemisches Denken und ethische Verantwortung in der Webgestaltung.

Aktives Lernen eignet sich besonders gut für dieses Thema, weil Schülerinnen und Schüler Barrieren selbst erleben und beheben können. Praktische Tests mit Screenreadern oder simulierten Einschränkungen machen Konzepte greifbar, stärken Empathie und führen zu nachhaltigem Verständnis durch eigene Erfolge.

Leitfragen

1. Erklären Sie die Bedeutung von Barrierefreiheit für alle Nutzergruppen im Web.
2. Analysieren Sie, wie einfache HTML-Strukturen die Zugänglichkeit verbessern.
3. Beurteilen Sie die Auswirkungen von fehlender Barrierefreiheit auf die Nutzung von Webseiten.

Lernziele

• Erklären Sie die Notwendigkeit von Barrierefreiheit für verschiedene Nutzergruppen im Web.
• Analysieren Sie, wie semantische HTML-Strukturen die Navigation für Screenreader-Nutzer verbessern.
• Bewerten Sie die Auswirkungen von schlechten Kontrastverhältnissen auf die Lesbarkeit von Webseiten.
• Identifizieren Sie mindestens drei häufige Barrieren auf Webseiten und schlagen Sie konkrete Verbesserungen vor.

Bevor es losgeht

Grundlagen der HTML-Struktur

Warum: Schülerinnen und Schüler müssen grundlegende HTML-Tags wie `<img>`, `<p>`, `<h1>` bis `<h6>` kennen, um deren Rolle für die Barrierefreiheit zu verstehen.

Einführung in das Internet und Webseiten

Warum: Ein Grundverständnis davon, wie Webseiten aufgebaut sind und funktionieren, ist notwendig, um die Bedeutung von Barrierefreiheit im Kontext der Webnutzung zu erfassen.

Schlüsselvokabular

Barrierefreiheit (Accessibility)	Gestaltung von digitalen Angeboten, sodass sie von allen Menschen, unabhängig von ihren individuellen Fähigkeiten oder Einschränkungen, genutzt werden können.
Screenreader	Eine Software, die Bildschirminhalte vorliest und so blinden oder sehbehinderten Nutzern die Bedienung von Computern und das Lesen von Texten ermöglicht.
Semantisches HTML	Verwendung von HTML-Tags, die ihre Bedeutung klar ausdrücken (z.B. `<nav>` für Navigation, `<article>` für einen Inhalt), um die Struktur und den Inhalt einer Webseite für Maschinen und Menschen verständlich zu machen.
Alt-Text (Alternativtext)	Eine textuelle Beschreibung eines Bildes, die angezeigt wird, wenn das Bild nicht geladen werden kann, und die von Screenreadern vorgelesen wird.
Kontrastverhältnis	Das Verhältnis zwischen der Helligkeit des Vordergrunds (z.B. Text) und des Hintergrunds, das die Lesbarkeit beeinflusst, besonders für Menschen mit Sehschwächen.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Barrierefreiheit betrifft nur Menschen mit Behinderungen.

Was Sie stattdessen lehren sollten

Alle Nutzer profitieren, etwa Mobile-Nutzer von guter Struktur oder Ältere von klarem Kontrast. Aktive Tests mit simulierten Einschränkungen wie No-Maus-Regel helfen Schülern, den Mehrwert selbst zu erleben und Empathie zu entwickeln.

Häufige Fehlvorstellung

Alt-Texte sind nur Deko für Bilder.

Was Sie stattdessen lehren sollten

Alt-Texte beschreiben Bilder für Screenreader und ersetzen sie bei Ladeproblemen. Peer-Reviews in Gruppen, bei denen einer blind testet, zeigen schnell den Unterschied und festigen das Verständnis.

Häufige Fehlvorstellung

Barrierefreiheit macht Seiten unästhetisch.

Was Sie stattdessen lehren sollten

Gute Prinzipien verbessern Design durch klare Strukturen. Experimente mit CSS-Anpassungen in Paaren beweisen, dass Zugänglichkeit und Optik harmonieren, und motivieren zu kreativen Lösungen.

Ideen für aktives Lernen

Lernen an Stationen: Barrierefreiheitsprüfungen

Richten Sie vier Stationen ein: 1. Alt-Texte prüfen und ergänzen. 2. Tastaturnavigation testen. 3. Kontrast mit Tools messen. 4. Screenreader simulieren. Gruppen rotieren alle 10 Minuten und protokollieren Barrieren.

45 Min.·Kleingruppen

Paararbeit: HTML-Optimierung

Paare erhalten eine fehlerhafte HTML-Seite und passen sie barrierefrei an: Alt-Texte hinzufügen, Überschriften strukturieren, Links klar beschriften. Danach testen sie gegenseitig mit der Tabulatortaste.

30 Min.·Partnerarbeit

Gruppenprojekt: Barrierefreie Landingpage

Gruppen entwerfen eine einfache Webseite zu einem Schul-Thema mit HTML und CSS. Sie integrieren Prinzipien wie ARIA-Labels und prüfen mit WAVE-Tool. Abschließende Präsentation der Lösungen.

60 Min.·Kleingruppen

Whole Class: Screenreader-Challenge

Die Klasse testet bekannte Webseiten mit einem Screenreader wie NVDA. Gemeinsam listen Barrieren auf und diskutieren Verbesserungen. Jede Schülerin notiert eine eigene Lösungsidee.

35 Min.·Ganze Klasse

Bezüge zur Lebenswelt

• Webentwickler und Designer bei großen Unternehmen wie Google oder Microsoft arbeiten täglich an der Umsetzung von Barrierefreiheitsstandards, um sicherzustellen, dass ihre Produkte und Dienste für eine breite Nutzerbasis zugänglich sind.
• Öffentliche Einrichtungen wie Behörden oder Museen sind gesetzlich verpflichtet, ihre Webseiten barrierefrei zu gestalten, damit alle Bürgerinnen und Bürger Informationen und Dienstleistungen nutzen können, zum Beispiel die Webseite des Deutschen Bundestages.
• Die Entwicklung von assistiven Technologien wie speziellen Tastaturen oder Maus-Alternativen wird durch das Bewusstsein für Barrierefreiheit im Web vorangetrieben, um Menschen mit motorischen Einschränkungen die digitale Teilhabe zu ermöglichen.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Die Schülerinnen und Schüler erhalten eine Webseite (z.B. einen Screenshot oder Link). Sie sollen auf einem Zettel drei konkrete Barrieren identifizieren und jeweils einen Satz dazu schreiben, wie diese behoben werden könnte. Beispiel: 'Bild ohne Alt-Text: Alt-Text hinzufügen, der das Bild beschreibt.'

Diskussionsfrage

Stellen Sie die Frage: 'Stellen Sie sich vor, Sie können keine Maus bedienen. Welche Elemente auf einer Webseite wären für Sie besonders schwierig zu nutzen und warum?' Sammeln Sie die Antworten und diskutieren Sie, wie HTML-Strukturen und Tastaturnavigation helfen können.

Kurze Überprüfung

Zeigen Sie verschiedene HTML-Code-Snippets (z.B. ein Bild mit und ohne Alt-Text, eine unsortierte Liste vs. eine semantisch korrekte Navigationsliste). Bitten Sie die Schülerinnen und Schüler, per Handzeichen (Daumen hoch/runter) oder schriftlich zu bewerten, welche Version barrierefreier ist und warum.

Häufig gestellte Fragen

Was sind die wichtigsten Prinzipien der Barrierefreiheit im Web?

Wichtige Prinzipien umfassen semantische HTML-Strukturen wie <header> und <nav>, Alt-Texte für Bilder, ausreichende Kontraste und volle Tastaturbedienbarkeit. Diese folgen WCAG-Richtlinien und BITV in Deutschland. Schüler lernen, dass sie Screenreader unterstützen und Inklusion fördern, indem sie Inhalte logisch aufbauen und Barrieren vermeiden.

Wie wirkt sich fehlende Barrierefreiheit auf Nutzer aus?

Fehlende Barrierefreiheit schließt Gruppen aus: Screenreader überspringen unstrukturierte Listen, Tastatur-Nutzer erreichen keine Elemente, Sehbehinderte erkennen keine Bilder. Das führt zu Frustration und Nichtnutzung. Analysen realer Seiten zeigen Schülern diese Effekte und motivieren zu verantwortungsvoller Gestaltung.

Wie kann aktives Lernen Barrierefreiheit vermitteln?

Aktives Lernen aktiviert durch praktische Übungen wie Screenreader-Tests oder No-Maus-Challenges. Schülerinnen und Schüler erleben Barrieren selbst, optimieren HTML in Gruppen und präsentieren Erfolge. Das schafft Empathie, vertieft Verständnis und macht abstrakte Prinzipien greifbar, mit hoher Transferleistung auf eigene Projekte.

Welche Tools eignen sich für Barrierefreiheits-Checks in der Klasse?

Tools wie WAVE, Lighthouse in Chrome DevTools oder der Screenreader NVDA sind kostenlos und schülerfreundlich. Sie prüfen automatisch Kontraste, Strukturen und Alt-Texte. In Stationen lernen Schüler, Berichte zu interpretieren und manuell nachzuprüfen, was Diagnosefähigkeiten stärkt.