Abschnittsübersicht

◄2. Barrierearme Strukturierung eines Moodle-Kursraums
►4. Video- und Audioformate barrierearm einbinden

    • Foto von mehreren roten Äpfeln, die in einem braunen Weidenkorb liegen. Vor dem Korb liegen zwei der Äpfel.
      Bildquelle: Pixabay/Larisa-K/ Pixabay Lizenz

      Bildinhalte sollten immer mit einem Alternativtext versehen sein. Der Alternativtext kann durch spezielle Software vorgelesen werden. Bildbeschreibungen ermöglichen es blinden Menschen, den Inhalt des Bildes wahrzunehmen und alle Informationen zu erhalten, die sehende Menschen auch erhalten. 

      In Moodle können Sie direkt beim Hochladen von Bildern Alternativtexte eingeben.

       

      Screenshot von dem Eingabefeld bei Moodle zum Einfügen eines Alternativtextes.

      Ein kleiner technischer Ausflug

      Der Alternativtext ist dann im Sourcecode der Website hinterlegt. Für Alternativtexte gibt es im HTML den Tag "alt". Screenreader können anhand dieses Tags den Alternativtext automatisch erkennen und vorlesen. Mit den Entwickleroptionen Ihres Browsers können Sie sich den Sourcecode und somit den Alternativtext im Code anzeigen lassen.

      Screenshot des Sourcecodes dieses Moodle-Kursraumes. Der darin zu findende Alternativtext ist über eine Markierung hervorgehoben.

      Hinweis: Gerade komplexere Bildinhalte können häufig mit einem Alternativtext nicht ausreichend beschrieben werden. Hier kann es erforderlich sein, im Fließtext eine ausführliche Beschreibung vorzunehmen oder eine Textalternative zu erstellen.

    • Icons

      Für die Kennzeichnung bestimmter Informationen, Inhalte oder Aktivitäten sind auch Icons geeignet. Sie helfen Nutzer:innen dabei wiederkehrende Elemente schneller zu finden. Icons sind in ihrer Aussage allerdings nicht eindeutig, deshalb benötigen sie einen verbalen Zusatz.

      Das Internet bietet eine Menge kostenlos verfügbarer Icon-Sätze an. Beachten Sie immer die Lizenzbedingungen.

    • Thumbnails

      Auch Thumbnails, also kleine Vorschaubilder, nehmen in Text nur wenig Platz ein. Deutlicher als die Textlinks weisen sie darauf hin, dass hier ein erläuterndes Bild angeboten wird.

      Wegen der geringeren Datengröße haben Seiten mit Thumbnails eine kürzere Ladezeit als Seiten mit großen Bildern.

      Im nachfolgenden Beispiel wurde zu dem großen Bild ein kleines Vorschaubild (Thumbnail) erstellt. Es hat die Größe 60x60px und zeigt einen Ausschnitt des großen Bildes. Ein Ausschnitt ist häufig aussagekräftiger als eine extreme Verkleinerung des Bildes. Dieses Vorschaubild wird im Texteditor als Bild eingefügt und markiert. Es verlinkt anschließend auf das hochgeladene große Bild. Wie Icons und Bilder allgemein, benötigen auch Thumbnails einen Alternativtext. Ein Beispiel für ein Thumbnail sehen Sie hier:

    • Verkleinerte Grafik eines geöffneten Laptops. Auf dem Bildschirm sind orangene Sprechblasen zu sehen.

    • Links

      Häufig werden neben Materialien und Aktivitäten auch Links z. B. zu weiterführenden Materialien (Texte, Websites usw.) in Moodle-Kursen eingebunden. Das Ziel eines Links sollte immer aus dem Linktext oder dem unmittelbaren Kontext hervorgehen. Ein Link sollte so angelegt sein, dass Nutzer:innen aufgrund des Linktexts entscheiden können, ob sie dem Link folgen möchten oder nicht.

      Beim Einbinden des Links in einen Text ist es sehr beliebt, folgende Variante zu verwenden: "Weitere Informationen finden Sie hier". Der Link wurde hinter dem Wort "hier" eingefügt. Für Nutzer:innen wird jedoch nicht deutlich, wohin der Link führt. Wir möchten Ihnen im Folgenden zeigen, wie Sie Links barrierefrei in Ihrem Kursraum einbinden können.

      In Moodle haben Sie verschiedene Möglichkeiten einen Link einzubinden. Sie können auf Links direkt in Texten oder über die Funktion "Material hinzufügen" hinweisen.

       Variante A: Den Link direkt in einen Text einbinden (z. B. in einem Themenfeld, einem Textfeld oder einer Textseite)

      1. Den Link direkt einbinden, indem die "rohe" URL verwendet wird: https://www.e-teaching.org/didaktik/konzeption/barrierefreiheit
      2. Den Link hinter einen Text einbinden: Link zum Artikel "Inklusives E-Learning" auf e-teaching.org


      Verwenden Sie möglichst sprechende Links, wie bei Punkt 2 gezeigt, da URLs u. U. sehr lang und sein können. Wenn Sie den Link in den Text einbinden möchten, können Sie dies über den Atto-Editor von Moodle vornehmen (siehe Hinweis "Anleitung Links einfügen" weiter unten).

      Variante B: Einbinden des Links über die Funktion "Material hinzufügen"

      Gehen Sie dafür im jeweiligen Thema unten rechts auf den "Aktivität oder Material hinzufügen" und wählen Sie bei "Arbeitsmaterial" den Punkt "Link/URL"

    • Beispiel: Link zum Artikel "Inklusives E-Learning" auf e-teaching.org Link/URL
    • Anleitung Links einfügen Textseite

    • Tabellen

      Tabellen wurden in der Frühzeit des Internets häufig auch für Formatierungen und Layouts von Webseiten genutzt. Dies sollte unbedingt vermieden werden. Assistenzsoftware (wie z. B. ein Screenreader) kann Tabellen zwar erkennen, werden diese aber zweckentfremdet, können die Inhalte ggf. nicht sinnvoll wiedergegeben werden. Verwenden Sie somit Tabellen ausschließlich, um Daten darzustellen.

      Moodle bietet Ihnen im Tiny-Texteditor ein einfaches Tabellentool an

      Screenshot der Tabellen-Funktion im Tiny-Editor in Moodle.

      Beispiel einer Tabelle: "Anzahl der Vegetarier:innen in einer fiktiven Firma mit 100 Mitarbeiter:innen"
      Geschlecht vegetarische Ernährung keine vegetarische Ernährung
      Männlich 30 20
      Weiblich 15 33
      Divers  1  1

    • Mathematische Inhalte

    • Auszeichnungssprache

      Bei naturwissenschaftlichen Inhalten werden sehr häufig mathematische Formeln genutzt. Diese müssen auch mit einem Screenreader lesbar sein und sich möglichst verlustfrei vergrößern lassen. Mathematische Formeln werden im Web in der Regel mit Hilfe von MathJax umgesetzt. MathJax setzt Formeln aus LaTeX, MathML und AsciiMath in verschiedene Ausgabeformate (z. B. HTML + CSS, SVG, MathML) um. Zusätzlich ist es in MathJax möglich, sich das Ausgabeergebnis vorlesen oder vergrößern zu lassen.

      Mathematische Formeln werden oft als Grafik ausgegeben, manchmal mit dem zugehörigen Alternativtext. Diese Lösung bringt jedoch einige Schwierigkeiten mit sich, da eine Pixelgrafik nicht verlustfrei vergrößert werden kann und Screenreader sie häufig nicht korrekt auslesen können. Der Alternativtext kann zwar Hinweise zum Inhalte geben, eine tiefergehende Beschreibung ist aufgrund des Umfangs meist aber nicht möglich.

      Im Moodle-System steht Ihnen über den Texteditor Atto die Integration von Latex zur Verfügung:

    • LaTeX

      LaTeX ist ein Softwarepaket, das die Nutzung des Textsatzsystems TeX mithilfe von Makros vereinfacht.
      Dadurch können (u. a.) mathematische Schriften von Formeln, Zeichen usw. korrekt dargestellt werden.
      So wird LaTeX durch (aktivierte) Filter in Moodle direkt unterstützt und der entsprechende Code bei der Ausgabe im Browser korrekt gerendert (angezeigt) wird.

      Auf diese Weise wird durch die Eingabe von \sqrt{ x + y } die folgende Ausgabe erzeugt: \sqrt{ x + y }

      Dabei ist es wichtig, dass im verwendeten Moodle-Texteditor in der Quellcode-Ansicht gearbeitet bzw. hier der TeX-Code eingefügt wird. Diese können Sie öffnen, indem Sie im Tiny-Editor den Button "Werkzeuge" anklicken und anschließend "Quellcode" auswählen. 

      Alternativ kann auch der grafische Gleichungseditor verwendet werden. Diesen rufen Sie auf, indem Sie im Tiny-Editor den Button "Einfügen" anklicken und danach "Gleichungseditor" auswählen.
    • LaTeX: TeX-Notation (MoodleDocs) Link/URL
◄2. Barrierearme Strukturierung eines Moodle-Kursraums
►4. Video- und Audioformate barrierearm einbinden