Informatik · Klasse 8

Ideen für aktives Lernen

Barrierefreiheit im Web

Aktive Auseinandersetzung mit Barrierefreiheit im Web macht abstrakte Regeln greifbar und zeigt sofort, warum sie wichtig sind. Wenn Schülerinnen und Schüler selbst erleben, wie sich eine schlecht zugängliche Webseite anfühlt, verstehen sie schneller, warum semantische HTML-Elemente oder klare Kontraste unverzichtbar sind.

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

• 30–60 Min.
• Partnerarbeit → Ganze Klasse
• 4 Aktivitäten

Aktivität 01

• Lernen an Stationen
• 45 Min. · Kleingruppen

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.

Erklären Sie die Bedeutung von Barrierefreiheit für alle Nutzergruppen im Web.

Moderationstipp

Stellen Sie beim Stationenlernen sicher, dass jede Station eine klare Aufgabe und ein konkretes Material (z.B. Screenshot, Code-Snippet) hat, damit die Schüler nicht raten müssen, was zu tun ist.

Worauf zu achten ist

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.'

• Erinnern
• Verstehen
• Anwenden
• Analysieren
• Selbststeuerung
• Beziehungsfähigkeit

Aktivität 02

• Sokratisches Seminar
• 30 Min. · Partnerarbeit

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.

Analysieren Sie, wie einfache HTML-Strukturen die Zugänglichkeit verbessern.

Moderationstipp

Bei der HTML-Optimierung in Paararbeit sollten Sie einen Zeitrahmen für den Austausch setzen, damit beide Partner aktiv werden und nicht nur einer die Lösung schreibt.

Worauf zu achten ist

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.

• Analysieren
• Bewerten
• Erschaffen
• Sozialbewusstsein
• Beziehungsfähigkeit

Aktivität 03

• Sokratisches Seminar
• 60 Min. · Kleingruppen

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.

Beurteilen Sie die Auswirkungen von fehlender Barrierefreiheit auf die Nutzung von Webseiten.

Moderationstipp

Beim Gruppenprojekt der barrierefreien Landingpage brauchen die Gruppen eine klare Rollenverteilung (z.B. Designer, Tester, Code-Checker), damit alle Verantwortung übernehmen.

Worauf zu achten ist

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.

• Analysieren
• Bewerten
• Erschaffen
• Sozialbewusstsein
• Beziehungsfähigkeit

Aktivität 04

• Sokratisches Seminar
• 35 Min. · Ganze Klasse

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.

Erklären Sie die Bedeutung von Barrierefreiheit für alle Nutzergruppen im Web.

Moderationstipp

Bei der Screenreader-Challenge können Sie vorab eine kurze Demo zeigen, wie ein Screenreader funktioniert, damit die Schüler wissen, worauf sie achten sollen.

Worauf zu achten ist

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.'

• Analysieren
• Bewerten
• Erschaffen
• Sozialbewusstsein
• Beziehungsfähigkeit

Einige Hinweise zum Unterrichten dieser Einheit

Erfahrene Lehrkräfte setzen auf handlungsorientiertes Lernen, bei dem Schüler Barrieren selbst erleben. Vermeiden Sie reine Theorie-Vermittlung, denn ohne praktische Anwendung bleibt das Thema abstrakt. Aktuelle Studien zeigen, dass inklusionsbezogene Themen besonders wirksam sind, wenn sie mit Empathie und Reflexion verbunden werden.

Am Ende der Einheit erkennen die Schülerinnen und Schüler, dass Barrierefreiheit kein Zusatz, sondern eine Grundlage für inklusives Webdesign ist. Sie können konkrete Fehler benennen, korrigieren und alternative Nutzungswege wie Tastaturnavigation erklären.

---

Vorsicht vor diesen Fehlvorstellungen

• Während des Stationenlernens Barrierefreiheitsprüfungen denken manche Schüler, Barrierefreiheit betreffe nur Menschen mit Behinderungen.

  Zeigen Sie den Schülern im Stationenlernen konkrete Beispiele, wie auch Mobile-Nutzer von klaren Strukturen profitieren, z.B. durch eine Webseite ohne Alt-Texte, die auf dem Handy unlesbar wird.

• Während der Paararbeit HTML-Optimierung meinen einige, Alt-Texte seien nur Deko für Bilder.

  Bitten Sie die Paare, einen Screenreader zu nutzen und einen Bild-Alt-Text zu schreiben, der den Inhalt des Bildes präzise beschreibt, damit sie den Unterschied selbst erleben.

• Während des Gruppenprojekts barrierefreie Landingpage glauben manche, Barrierefreiheit mache Seiten unästhetisch.

  Fordern Sie die Gruppen auf, zwei Versionen ihrer Seite zu erstellen: eine mit und eine ohne Barrierefreiheit-Prinzipien, und vergleichen Sie Design und Funktionalität.

---

In dieser Übersicht verwendete Methoden

• Lernen an Stationen
• Sokratisches Seminar