Barrierefreiheit in ZUM und H5P-Apps - Versionsgeschichte

Ukalina am 8. Juni 2026 um 12:56 Uhr

2026-06-08T12:56:03Z

← Nächstältere Version		Version vom 8. Juni 2026, 12:56 Uhr
Zeile 25:		Zeile 25:

	====Barrierefreiheit auf ZUM====		====Barrierefreiheit auf ZUM====
	; MediaWiki,		; Generell
	: die softwaretechnische Basis der ZUM-Wikis, ~~bietet~~ durch seine klare und an HTML-Standards ausgerichtete Struktur von sich aus bereits gute Voraussetzungen für die Barrierefreiheit.		: bietet MediaWiki, die softwaretechnische Basis der ZUM-Wikis, durch seine klare und an HTML-Standards ausgerichtete Struktur von sich aus bereits gute Voraussetzungen für die Barrierefreiheit.
	; [[ZUM mit Screenreader]]		; [[ZUM mit Screenreader]]
	: beschreibt grundlegende Funktionen von Screenreadern und fasst die wichtigsten Bedienstrategien und Tastaturkommandos füpr die Nutzung von Internet-Seiten mithilfe assistiver Technologien zusammen.		: beschreibt grundlegende Funktionen von Screenreadern und fasst die wichtigsten Bedienstrategien und Tastaturkommandos füpr die Nutzung von Internet-Seiten mithilfe assistiver Technologien zusammen.
	; Abbildungen		; Abbildungen
	:* sollten vor allem dann, wenn sie nicht nur rein dekorativen Charakter besitzen, sondern für das Verständnis des Lerninhalts relevant sind, mit einer Bildbeschreibung versehen werden. Diese sollte aussagekräftig, prägnant und leicht verständlich formuliert sein. Für die Bildbeschreibung wird in dem Link, der die Abbildung in die Wiki-Seite einbindet, das Attribut "alternativtext= ..." verwendet. ~~Sie~~ erscheint nicht auf dem Bildschirm, sondern wird nur ~~von~~ Screenreader vorgelesen. Ein Beispiel hierfür findet man z.B. in [[Lernpfad Wiki-Kurs/5. Bilder und andere Medien in Wiki-Seite einfügen]]		:* sollten vor allem dann, wenn sie nicht nur rein dekorativen Charakter besitzen, sondern für das Verständnis des Lerninhalts relevant sind, mit einer Bildbeschreibung versehen werden. Diese sollte aussagekräftig, prägnant und leicht verständlich formuliert sein. Für die Bildbeschreibung wird in dem Link, der die Abbildung in die Wiki-Seite einbindet, das Attribut "alternativtext= ..." verwendet. Dieser Text erscheint - im Gegensatz zur Abbildungs-''Beschriftung'' - nicht auf dem Bildschirm, sondern wird nur vom Screenreader vorgelesen. Ein Beispiel hierfür findet man z.B. in [[Lernpfad Wiki-Kurs/5. Bilder und andere Medien in Wiki-Seite einfügen]]
	*: In manchen Fällen (z.B. bei mathematischen Graphen) kann es sehr hilfreich sein, wenn als Ergänzung eine kontrastreiche Version des Bildes für stark seheingeschränkte und eine Schwellpapier-Kopiervorlage für blinde Nutzer der Webseite als Download zur Verfügung gestellt wird. Diese ergänzenden Abbildungen können entweder - zur Weiterverarbeitung - ganz auf eine Beschriftung verzichten oder mit einer Beschriftung in Blindenpunktschrift (Braille) versehen werden. Die Dokumente mit Braillebeschriftung können dann direkt als Kopiervorlagen für taktile Abbildungen auf so genanntem Schwellpapier genutzt werden. Bei diesem Verfahren werden schwarze Linien und Punkte auf einem Spezialpapier durch Aufschwellen in erhöhte, tastbare Konturen umgesetzt. Beispiele für solche ergänzende Abbildungen findet man jeweils im Anhang der Lernpfade [[Lernpfad Know-How-Computer/Anhang]] und [[Lernpfad Quadratische Funktionen/QF Anhang]].		:* In manchen Fällen (z.B. bei mathematischen Graphen) kann es sehr hilfreich sein, wenn als Ergänzung eine kontrastreiche Version des Bildes für stark seheingeschränkte und eine Schwellpapier-Kopiervorlage für blinde Nutzer der Webseite als Download zur Verfügung gestellt wird. Diese ergänzenden Abbildungen können entweder - zur Weiterverarbeitung - ganz auf eine Beschriftung verzichten oder mit einer Beschriftung in Blindenpunktschrift (Braille) versehen werden. Die Dokumente mit Braillebeschriftung können dann direkt als Kopiervorlagen für taktile Abbildungen auf so genanntem Schwellpapier genutzt werden. Bei diesem Verfahren werden schwarze Linien und Punkte auf einem Spezialpapier durch Aufschwellen in erhöhte, tastbare Konturen umgesetzt.
			:* Beispiele für solche ergänzende Abbildungen findet man jeweils im Anhang der Lernpfade [[Lernpfad Know-How-Computer/Anhang]] und [[Lernpfad Quadratische Funktionen/QF Anhang]].
	; Videos		; Videos
	: sollten so gestaltet werden, dass über den Ton-Kanal auditiv nachvollziehbar erklärt wird, um was es in dem Video geht. Zusätzlich können Begleittexte ("Was steht an der Tafel?") und -abbildungen hinzugefügt werden.		:* sollten so gestaltet werden, dass über den Ton-Kanal auditiv nachvollziehbar erklärt wird, um was es in dem Video geht. Zusätzlich können Begleittexte ("Was steht an der Tafel?") und -abbildungen hinzugefügt werden.
	* Mathematische und Chemische Fomeln		:* Beispiele: [[Baumdiagramme als Grafik und in Textform#Lernvideo "Baumdiagramme in der Wahrscheinlichkeitsrechnung"]] und [[Arithmico#Lernvideo "Der Arithmico Taschenrechner - Erste Schritte mit einem Screenreader"]]
	: sind dank MediaWiki für den Screenreader NVDA gut zugänglich.		; Mathematische und Chemische Fomeln
	* GeoGebra-Applets		: sind dank MediaWiki für den Screenreader NVDA mit dem AddOn MathCat gut zugänglich. Allerdings funktioniert das Rendern mathematischer Ausdrücke in H5P-Apps mithilfe von MathJax nur optisch korrekt, während die auditive Umsetzung per Sprachausgabe bei Exponenten und Brüchen zurzeit noch fehlerhaft ist.
			; GeoGebra-Applets
	: sind in der Regel schwer oder gar nicht mit einem Screenreader zugänglich.		: sind in der Regel schwer oder gar nicht mit einem Screenreader zugänglich.
	* Interaktive Apps [[H5P mit Screenreader]]		; Interaktive Apps [[H5P mit Screenreader]]
	: Die Zugänglichkeit schwankt stark - je nach der konkreten App. Details hierzu (Tests, Hinweise, Tipps und Tricks für Nutzer, Autoren und Entwickler) werden auf der Seite [[H5P mit Screenreader]] präsentiert.		: Die Zugänglichkeit schwankt stark - je nach der konkreten App. Details hierzu (Tests, Hinweise, Tipps und Tricks für Nutzer, Autoren und Entwickler) werden auf der Seite [[H5P mit Screenreader]] präsentiert.

Ukalina am 8. Juni 2026 um 12:25 Uhr

2026-06-08T12:25:15Z

← Nächstältere Version		Version vom 8. Juni 2026, 12:25 Uhr
Zeile 30:		Zeile 30:
	: beschreibt grundlegende Funktionen von Screenreadern und fasst die wichtigsten Bedienstrategien und Tastaturkommandos füpr die Nutzung von Internet-Seiten mithilfe assistiver Technologien zusammen.		: beschreibt grundlegende Funktionen von Screenreadern und fasst die wichtigsten Bedienstrategien und Tastaturkommandos füpr die Nutzung von Internet-Seiten mithilfe assistiver Technologien zusammen.
	; Abbildungen		; Abbildungen
	:* sollten vor allem dann, wenn sie nicht nur dekorativen Charakter besitzen, sondern für das Verständnis des Lerninhalts relevant sind, mit einer Bildbeschreibung versehen werden. Diese sollte aussagekräftig, prägnant und leicht verständlich formuliert sein. Für die Bildbeschreibung wird in dem Link, der die Abbildung in die Wiki-Seite einbindet, das Attribut "alternativtext= ..." verwendet. Sie erscheint nicht auf dem Bildschirm, sondern wird nur von Screenreader vorgelesen. Ein Beispiel hierfür findet man in [[Lernpfad Wiki-Kurs//5. Bilder und andere Medien in Wiki Seite einfügen]]		:* sollten vor allem dann, wenn sie nicht nur rein dekorativen Charakter besitzen, sondern für das Verständnis des Lerninhalts relevant sind, mit einer Bildbeschreibung versehen werden. Diese sollte aussagekräftig, prägnant und leicht verständlich formuliert sein. Für die Bildbeschreibung wird in dem Link, der die Abbildung in die Wiki-Seite einbindet, das Attribut "alternativtext= ..." verwendet. Sie erscheint nicht auf dem Bildschirm, sondern wird nur von Screenreader vorgelesen. Ein Beispiel hierfür findet man z.B. in [[Lernpfad Wiki-Kurs/5. Bilder und andere Medien in Wiki-Seite einfügen]]
	*: In manchen Fällen (z.B. bei mathematischen Graphen) kann es ~~sinnvoll~~ sein, als Ergänzung eine kontrastreiche ~~Variante~~ des Bildes und eine Schwellpapier-Kopiervorlage als Download zur Verfügung ~~zu stellen~~.		*: In manchen Fällen (z.B. bei mathematischen Graphen) kann es sehr hilfreich sein, wenn als Ergänzung eine kontrastreiche Version des Bildes für stark seheingeschränkte und eine Schwellpapier-Kopiervorlage für blinde Nutzer der Webseite als Download zur Verfügung gestellt wird. Diese ergänzenden Abbildungen können entweder - zur Weiterverarbeitung - ganz auf eine Beschriftung verzichten oder mit einer Beschriftung in Blindenpunktschrift (Braille) versehen werden. Die Dokumente mit Braillebeschriftung können dann direkt als Kopiervorlagen für taktile Abbildungen auf so genanntem Schwellpapier genutzt werden. Bei diesem Verfahren werden schwarze Linien und Punkte auf einem Spezialpapier durch Aufschwellen in erhöhte, tastbare Konturen umgesetzt. Beispiele für solche ergänzende Abbildungen findet man jeweils im Anhang der Lernpfade [[Lernpfad Know-How-Computer/Anhang]] und [[Lernpfad Quadratische Funktionen/QF Anhang]].
	; Videos		; Videos
	: sollten so gestaltet werden, dass über den Ton-Kanal auditiv nachvollziehbar erklärt wird, um was es in dem Video geht. Zusätzlich können Begleittexte ("Was steht an der Tafel?") und -abbildungen hinzugefügt werden.		: sollten so gestaltet werden, dass über den Ton-Kanal auditiv nachvollziehbar erklärt wird, um was es in dem Video geht. Zusätzlich können Begleittexte ("Was steht an der Tafel?") und -abbildungen hinzugefügt werden.

Ukalina am 8. Juni 2026 um 12:06 Uhr

2026-06-08T12:06:15Z

← Nächstältere Version		Version vom 8. Juni 2026, 12:06 Uhr
Zeile 7:		Zeile 7:

	{{Box		{{Box
	\| Titel = Barrierefreies Web-Design		\| Titel = <i class="fa fa-universal-access fa-2x" aria-hidden="true"></i>   Barrierefreies Web-Design
	\| Klasse = ~~Lernpfad~~		\| Klasse =
	\| Inhalt =		\| Inhalt =
	* Es gibt im Internet zahlreiche ~~Web-Seiten~~, die darüber informieren, wie Webseiten barrierefrei gestaltet werden können. Eine sehr fundierte und umfassende Darstellung findet man z.B. auf der Seite https://www.barrierefreies-webdesign.de/ von Jan Hellbusch.		* Es gibt im Internet zahlreiche Quellen, die darüber informieren, wie Webseiten barrierefrei gestaltet werden können. Eine sehr fundierte und umfassende Darstellung findet man z.B. auf der Seite https://www.barrierefreies-webdesign.de/ von Jan Hellbusch.
	* Im Folgenden geht es vorrangig darum, wie Lerninhalte auf ZUM.de barrierefrei mit einem Screenreader und anderen assistiven Technologien genutzt werden können.		* Im Folgenden geht es vorrangig darum, wie Lerninhalte auf ZUM.de barrierefrei mit einem Screenreader und anderen assistiven Technologien genutzt werden können.
	}}		}}
Zeile 25:		Zeile 25:

	====Barrierefreiheit auf ZUM====		====Barrierefreiheit auf ZUM====
	* [[ZUM mit Screenreader]]		; MediaWiki,
	* ~~Abbildungen~~		: die softwaretechnische Basis der ZUM-Wikis, bietet durch seine klare und an HTML-Standards ausgerichtete Struktur von sich aus bereits gute Voraussetzungen für die Barrierefreiheit.
	* Videos		; [[ZUM mit Screenreader]]
			: beschreibt grundlegende Funktionen von Screenreadern und fasst die wichtigsten Bedienstrategien und Tastaturkommandos füpr die Nutzung von Internet-Seiten mithilfe assistiver Technologien zusammen.
			; Abbildungen
			:* sollten vor allem dann, wenn sie nicht nur dekorativen Charakter besitzen, sondern für das Verständnis des Lerninhalts relevant sind, mit einer Bildbeschreibung versehen werden. Diese sollte aussagekräftig, prägnant und leicht verständlich formuliert sein. Für die Bildbeschreibung wird in dem Link, der die Abbildung in die Wiki-Seite einbindet, das Attribut "alternativtext= ..." verwendet. Sie erscheint nicht auf dem Bildschirm, sondern wird nur von Screenreader vorgelesen. Ein Beispiel hierfür findet man in [[Lernpfad Wiki-Kurs//5. Bilder und andere Medien in Wiki Seite einfügen]]
			*: In manchen Fällen (z.B. bei mathematischen Graphen) kann es sinnvoll sein, als Ergänzung eine kontrastreiche Variante des Bildes und eine Schwellpapier-Kopiervorlage als Download zur Verfügung zu stellen.
			; Videos
			: sollten so gestaltet werden, dass über den Ton-Kanal auditiv nachvollziehbar erklärt wird, um was es in dem Video geht. Zusätzlich können Begleittexte ("Was steht an der Tafel?") und -abbildungen hinzugefügt werden.
	* Mathematische und Chemische Fomeln		* Mathematische und Chemische Fomeln
			: sind dank MediaWiki für den Screenreader NVDA gut zugänglich.
	* GeoGebra-Applets		* GeoGebra-Applets
			: sind in der Regel schwer oder gar nicht mit einem Screenreader zugänglich.
	* Interaktive Apps [[H5P mit Screenreader]]		* Interaktive Apps [[H5P mit Screenreader]]
			: Die Zugänglichkeit schwankt stark - je nach der konkreten App. Details hierzu (Tests, Hinweise, Tipps und Tricks für Nutzer, Autoren und Entwickler) werden auf der Seite [[H5P mit Screenreader]] präsentiert.

	Autor: Ulrich Kalina ([[Benutzer:Ukalina]])		Autor: Ulrich Kalina ([[Benutzer:Ukalina]])

Ukalina: Die Seite wurde neu angelegt: „NOTOC {{Fortsetzung |vorher= |vorherlink= |weiter=ZUM mit Screenreader |weiterlink=ZUM mit Screenreader |übersicht= |übersichtlink= }} {{Box | Titel = Barrierefreies Web-Design | Klasse = Lernpfad | Inhalt = * Es gibt im Internet zahlreiche Web-Seiten, die darüber informieren, wie Webseiten barrierefrei gestaltet werden können. Eine sehr fundierte und umfassende Darstellung findet man z.B. auf der Seite https://www.barrierefreies-webdesign.de/ v…“

2026-06-08T07:28:08Z

Die Seite wurde neu angelegt: „__NOTOC__ {{Fortsetzung |vorher= |vorherlink= |weiter=ZUM mit Screenreader |weiterlink=ZUM mit Screenreader |übersicht= |übersichtlink= }} {{Box | Titel = Barrierefreies Web-Design | Klasse = Lernpfad | Inhalt = * Es gibt im Internet zahlreiche Web-Seiten, die darüber informieren, wie Webseiten barrierefrei gestaltet werden können. Eine sehr fundierte und umfassende Darstellung findet man z.B. auf der Seite https://www.barrierefreies-webdesign.de/ v…“

Neue Seite

__NOTOC__
{{Fortsetzung
|vorher= |vorherlink=
|weiter=ZUM mit Screenreader |weiterlink=ZUM mit Screenreader
|übersicht= |übersichtlink=
}}

{{Box
| Titel = Barrierefreies Web-Design
| Klasse = Lernpfad
| Inhalt =
* Es gibt im Internet zahlreiche Web-Seiten, die darüber informieren, wie Webseiten barrierefrei gestaltet werden können. Eine sehr fundierte und umfassende Darstellung findet man z.B. auf der Seite https://www.barrierefreies-webdesign.de/ von Jan Hellbusch.
* Im Folgenden geht es vorrangig darum, wie Lerninhalte auf ZUM.de barrierefrei mit einem Screenreader und anderen assistiven Technologien genutzt werden können.
}}

====Accessibility und Usability====
Im Zusammenhang mit dem Begriff der '''Barrierefreiheit''' sind zwei Aspekte zu unterscheiden:

; Accessibility
: zielt darauf ab, dass ein Produkt auch von Menschen mit Einschränkungen genutzt werden kann - gegebenenfalls unter Zuhilfenahme assistiver Technologien (auch [https://de.wikipedia.org/wiki/Unterst%C3%BCtzungstechnologie Unterstützungstechnologie]).
; Usability
: ist ein Kriterium dafür, dass diese Nutzung auch effizient und zufriedenstellend abläuft.

Im Kontext schulischer Bildung ist über die Accessibility hinaus der Aspekt der Usability besonders wichtig. Für Schülerinnen und Schüler reicht es nicht aus, wenn es "irgendeinen" technischen Weg gibt, um an die relevanten Informationen zu gelangen. Sie müssen diese auch einfach, schnell und intuitiv erreichen können. Die Auseinandersetzung mit dem Lerngegenstand darf nicht durch Fragen der Handhabung des Lernmediums beeinträchtigt werden. Während es für die Accessibility standardisierte Testverfahren gibt, kann die Usability nicht ausschließlich anhand formaler Kriterien beurteilt werden.

====Barrierefreiheit auf ZUM====
* [[ZUM mit Screenreader]]
* Abbildungen
* Videos
* Mathematische und Chemische Fomeln
* GeoGebra-Applets
* Interaktive Apps [[H5P mit Screenreader]]

Autor: Ulrich Kalina ([[Benutzer:Ukalina]])

{{Fortsetzung
|vorher= |vorherlink=
|weiter=ZUM mit Screenreader |weiterlink=ZUM mit Screenreader
|übersicht= |übersichtlink=
}}

[[Kategorie:Hilfe]]
[[Kategorie:Barrierefrei]]