Barrierefreiheit im WebAktivitäten & Unterrichtsstrategien
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.
Lernziele
- 1Erklären Sie die Notwendigkeit von Barrierefreiheit für verschiedene Nutzergruppen im Web.
- 2Analysieren Sie, wie semantische HTML-Strukturen die Navigation für Screenreader-Nutzer verbessern.
- 3Bewerten Sie die Auswirkungen von schlechten Kontrastverhältnissen auf die Lesbarkeit von Webseiten.
- 4Identifizieren Sie mindestens drei häufige Barrieren auf Webseiten und schlagen Sie konkrete Verbesserungen vor.
Möchten Sie einen vollständigen Unterrichtsentwurf mit diesen Lernzielen? Mission erstellen →
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.
Vorbereitung & Details
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.
Setup: Im Raum verteilte Tische/Stationen
Materials: Stationskarten mit Arbeitsanweisungen, Unterschiedliche Materialien je Station, Timer für die Rotation
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.
Vorbereitung & Details
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.
Setup: Stühle sind in zwei konzentrischen Kreisen angeordnet
Materials: Diskussionsfrage oder Impuls (projiziert), Beobachtungsbogen für den Außenkreis
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.
Vorbereitung & Details
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.
Setup: Stühle sind in zwei konzentrischen Kreisen angeordnet
Materials: Diskussionsfrage oder Impuls (projiziert), Beobachtungsbogen für den Außenkreis
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.
Vorbereitung & Details
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.
Setup: Stühle sind in zwei konzentrischen Kreisen angeordnet
Materials: Diskussionsfrage oder Impuls (projiziert), Beobachtungsbogen für den Außenkreis
Dieses Thema unterrichten
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.
Was Sie erwartet
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.
Diese Aktivitäten sind ein Ausgangspunkt. Die vollständige Mission ist das Erlebnis.
- Vollständiges Moderationsskript mit Lehrkraft-Dialogen
- Druckfertige Schülermaterialien, bereit für den Unterricht
- Differenzierungsstrategien für jeden Lerntyp
Vorsicht vor diesen Fehlvorstellungen
Häufige FehlvorstellungWährend des Stationenlernens Barrierefreiheitsprüfungen denken manche Schüler, Barrierefreiheit betreffe nur Menschen mit Behinderungen.
Was Sie stattdessen lehren sollten
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.
Häufige FehlvorstellungWährend der Paararbeit HTML-Optimierung meinen einige, Alt-Texte seien nur Deko für Bilder.
Was Sie stattdessen lehren sollten
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.
Häufige FehlvorstellungWährend des Gruppenprojekts barrierefreie Landingpage glauben manche, Barrierefreiheit mache Seiten unästhetisch.
Was Sie stattdessen lehren sollten
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.
Ideen zur Lernstandserhebung
Nach dem Stationenlernen Barrierefreiheitsprüfungen erhalten die Schülerinnen und Schüler eine Webseite und sollen drei konkrete Barrieren identifizieren und eine Lösung vorschlagen.
Während der Screenreader-Challenge stellen Sie die Frage: 'Welche Elemente auf dieser Seite wären für jemanden ohne Maus besonders schwierig zu nutzen?' und sammeln Sie Antworten, um die Bedeutung von Tastaturnavigation zu verdeutlichen.
Nach der Paararbeit HTML-Optimierung zeigen Sie Code-Snippets mit und ohne Alt-Texte oder semantische HTML-Elemente und lassen die Schüler in einer Abstimmung (z.B. Daumen hoch/runter) entscheiden, welche Version barrierefreier ist.
Erweiterungen & Unterstützung
- Fordern Sie schnelle Schüler auf, eine zusätzliche Barriere (z.B. fehlende ARIA-Labels) in ihrem Projekt zu identifizieren und zu korrigieren.
- Helfen Sie Schüler mit Schwierigkeiten, indem Sie ihnen eine Checkliste mit konkreten Prüfschritten (z.B. 'Hat jedes Bild einen Alt-Text?') geben.
- Vertiefen Sie mit einer Expertenrunde: Laden Sie eine Person mit Sehbehinderung ein, die ihre Erfahrungen mit barrierefreien Webseiten teilt.
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. |
Vorgeschlagene Methoden
Planungsvorlagen für Digitale Welten Gestalten: Informatik
Mehr in Web-Technologien: Eigene Inhalte gestalten
Das Internet und das World Wide Web
Die Schülerinnen und Schüler unterscheiden zwischen dem Internet als Infrastruktur und dem World Wide Web als Dienst.
2 methodologies
HTML: Die Struktur des Webs
Die Schülerinnen und Schüler lernen die grundlegende Syntax von HTML und erstellen einfache Webseiten mit Text und Überschriften.
2 methodologies
Bilder und Links in HTML
Die Schülerinnen und Schüler integrieren Bilder und Hyperlinks in ihre HTML-Dokumente.
2 methodologies
Listen und Tabellen in HTML
Die Schülerinnen und Schüler strukturieren Informationen mit geordneten und ungeordneten Listen sowie einfachen Tabellen.
2 methodologies
Einführung in CSS: Styling für das Web
Die Schülerinnen und Schüler lernen die Grundlagen von CSS zur visuellen Gestaltung von HTML-Elementen kennen.
2 methodologies
Bereit, Barrierefreiheit im Web zu unterrichten?
Erstellen Sie eine vollständige Mission mit allem, was Sie brauchen
Mission erstellen