Barrierefreie Dokumente und Webseiten - Marieke Vomberg 08.03.2021 Website: Das Lernbüro - idit.online
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Barrierefreie Dokumente und Webseiten Marieke Vomberg 08.03.2021 Website: Das Lernbüro
Inhaltsverzeichnis
1 Grundlagen Barrierefreiheit 3
2 Word 9
3 PowerPoint 15
4 PDF 23
5 Excel 43
6 Video 48
7 Webseiten 56
2
1 Grundlagen Barrierefreiheit
3
1 Grundlagen Barrierefreiheit
Relevant für Viele, nicht „nur“ für Menschen mit Behinderungen
Klare Strukturen
Verständliche Texte
Untertitel bei Videos
Audioumsetzung von Texten
Hohe Kontraste
Flexible Größeneinstellungen von Texten
Alternativtexte für Bilder
4
1 Grundlagen Barrierefreiheit
Sprache und barrierefreies Gendern
− Verständliche Sprache
− Klar und deutlich formulieren
− Abkürzungen vermeiden
− Fremdwörter reduzieren
− Inhalte strukturieren und entsprechend formatieren
− Aussagekräftige Links verwenden
− Orientierung erleichtern durch kleinschrittige Einträge
− Barrierefreies Gendern
− Generell wird empfohlen durch Begriffe wie „Team“ zu gendern oder Worte wie Mitarbeiterinnen
und Mitarbeiter
− Es gibt noch keine gute Lösung für das Gendern mit Binnen-I, Sternchen etc., da diese Zeichen
von Screenreadern mitgelesen werden
− Manche empfehlen den Doppelpunkt, da viele das Vorlesen von Satzzeichen abschalten, nicht
aber das Vorlesen von Sonderzeichen (wie dem *) der deutsche Blinden- und
Sehbehindertenverband tut dies explizit aber nicht
5
Quelle: BIK für alle (o.J. e); Deutscher Blinden- und Sehbinhdertenverband (o.J.)
1 Grundlagen Barrierefreiheit
Alternativtexte
− „Für jeden Nicht-Text-Inhalt sind Alternativen in Textform bereitzustellen“, sodass Menschen, die
assistive Technologien (insb. für Blinde) die Bilder und deren Inhalt wiedergeben können
− Ziel: die Funktion und/oder den Bildinhalt vermitteln
− Je nach Art der Abbildung braucht es unterschiedliche Texte
− Alternativtexte immer so kurz wie möglich
− Kein genereller Standard & unterschiedliche Wünsche
− Verlinkte Grafiken
− Der Alt-Text nennt das Linkziel: „Link: Webseite IDiT“
− Auch bei Schaltflächen auf Webseiten Alt-text: Link:
− Informative Grafiken Startseite
− Bilder mit Aussagen erhalten eine Inhaltsbeschreibung
Alt-text: Titelbild von Das Lernbüro, Lernende
− Fotos, Diagramme, Schaubilder und Smart-Arts mit Laptops und Handys an einem Tisch
− Schmuckgrafiken
− Grafiken ohne informative Funktion werden als dekorativ markiert oder bei Webseiten mit
Leerzeichen als Alternativtext versehen, damit sie beim Vorlesen übersprungen werden
6
Quelle: BIK für Alle (o.J. a)
1 Grundlagen Barrierefreiheit
Tipps zur Formulierung von Alternativtexten
− Wichtige Ergebnisse besser im Text statt im Bild vermitteln
− Beschreibung abhängig vom Kontext
Alt-text: Logo vom Projekt
− Korrekte Rechtschreibung und Zeichensetzung
Including. Digital. Twins.
− Kurz und direkt
− Keine Aussagen wie „Dieses Foto zeigt…“ oder „Bild von…“, bei Logos sollte
allerdings auch gesagt werden, dass es sich um ein Logo handelt
− Texte, die im Bild zu sehen sind, sollten im Alt-Text auftauchen, wenn sie relevant
sind
Alt-text: Um Alternativtexte anzuzeigen und zu
bearbeiten, klickt man im Reiter „Format“ im
Bereich „Barrierefreiheit“ auf die Schaltfläche
„Alternativtext“.
7
Quelle: TechSmith (o. J.), de Oliveira (o. j.)
1 Grundlagen Barrierefreiheit
Hilfreiche Links
− Pro Retina: https://www.pro-retina.de/dateien/ea_barrierefreie_dokumente.pdf
− Aktion Mensch: https://www.einfach-fuer-alle.de/artikel/pdf-barrierefrei-umsetzen/
− Projekt barrierefrei informieren und kommunizieren: https://bik-fuer-alle.de/
− Web Accessibility Evaluation Tool: https://wave.webaim.org/
− Hinweise der Hochschulkommunikation: https://intern.hs-
niederrhein.de/fileadmin/dateien/hochschulkommunikation/Social_Media_Web/2019-11-
05_webguideline_01.pdf
8
2 Word
9
2 Word
Formatvorlagen
Generell gilt: Dokumente sind insb. für Sehbehinderte
Personen zu optimieren
− Verwendung der Word-Funktionen (keine händischen
Anpassungen)
− Formatvorlagen für Überschriften, Textteile,
Nummerierungen, Aufzählungsfunktionen
10
Quelle: Forschungsinstitut Technologie und Behinderung (2013)2 Word
Alternativtexte und Links
− Alternativtexte für Bilder und Kennzeichnung von dekorativen
Elementen
− Komplexe Schaubilder nicht als Einzelelemente,
sondern als Gruppe oder Bild einfügen und dann mit
Beschreibungen versehen; die Inhalte sollten auch im
Text ausführlich auftauchen
− Dekorative Linien / Kästen / Muster werden als solche
gekennzeichnet
− Auch Logos müssen mit Alternativtexten beschriftet
werden
− Bei älteren Word-Versionen gibt es den Haken zum
„dekorativ markieren“ nicht
− Links sollten nicht im „hier“ verlinkt werden, sondern gezielt auf
die Seite / das Kapitel hinweisen:
− Gehen Sie zur Webseite von DAS LERNBÜRO
− Auch Links innerhalb des Dokuments sind hilfreich
(siehe Kapitel XY)
11
Quelle: Forschungsinstitut Technologie und Behinderung (2013)2 Word
Formulare
− Formulare erstellen über die
Entwicklertools
− Einfügen von Formularfeldern
− Kontrast des Blankotextes erhöhen
durch schwarze Schrift
− Ggf. Alternativtexte für
Formularfelder einfügen
12
Quelle: Forschungsinstitut Technologie und Behinderung (2013)2 Word
Tabellen und Einstellungen
− Tabellen müssen mit dem dafür
vorgesehenen Tool erstellt werden
(nicht mit Tabs oder Leerzeichen)
− Tabellenüberschriften
festlegen
− Breite der Tabelle in Prozent
angeben
− Hohe Kontraste verwenden
(über Entwurf-Reiter)
− Spracheinstellungen festlegen
13
Quelle: Forschungsinstitut Technologie und Behinderung (2013)2 Word
Abschlussarbeiten
− PDF-Konvertierung über die „Speichern als“-Funktion
− Metadaten zum Dokument bearbeiten
− Titel
− VerfasserIn
− Ggf. Kommentare & Inhalte
− Inhaltsverzeichnis einfügen über die Funktion in Office
− Überprüfung auf Barrierefreiheit mit dem Office-Tool Korrektur der
aufkommenden Barrierefreiheitswarnungen
14
Quelle: Forschungsinstitut Technologie und Behinderung (2013)3 PowerPoint
153 PowerPoint
PowerPoint-Präsentationen
− Verwenden der Masterfolienansicht und der Gliederungsansicht
− Jede Folie sollte einen Titel haben (wenn es bei reinen
Bildfolien visuell störend ist, kann dieser auch in hinterster
Ebene auf der Folie liegen)
− Keine Verwendung von zusätzlichen Textblöcken, die
händisch Formatiert werden
− Überschriften sollten auch als solche (nicht nur visuell)
kenntlich gemacht werden
− Verwendung von Formatvorlagen
− Alternativtexte für Bilder, Videos, SmartArts oder auch die
Markierung als dekorativ vornehmen
− Selbst erstellte Abbildungen mit PPT-Elementen
− Verwendung der Gruppierungsfunktion für einen
gemeinsamen Alternativtext
16
Quelle: Forschungsinstitut Technologie und Behinderung (2013)3 PowerPoint In Graustufe erkennbar? – oben nein, unten ja
PowerPoint-Präsentationen Absatz 2020
600
− Diagramme einbinden und erstellen 500
− Deutliche Kontraste und nicht zu kleine 400
Beschriftungen einstellen Ziel: muss auch ohne 300
Farbe erkennbar sein 200
100
− Je nach Inhalt auch die Art des Diagramms so 0
wählen, dass die Zuordnung zu den Überschriften Quartal 1 Quartal 2 Quartal 3 Quartal 4
einfach ist Produkt 1 Produkt 2
− Staffierung kann einfacher zu erkennen sein als
Farben
Absatz 2020
− Zusätzlich Verwendung von Alternativtexten oder 600
auch Anlegen einer Datentabelle 500
− Organigramme 400
300
− Ein SmartArt-Diagramm kann auch als Text mit 200
Gliederungsebenen erstellt werden 100
− Alternativtext als Alternative zur „unschönen“ 0
Darstellung Quartal 1 Quartal 2 Quartal 3 Quartal 4
Produkt 1 Produkt 2
17
Quelle: Forschungsinstitut Technologie und Behinderung (2013)3 PowerPoint
PowerPoint-Präsentationen
− Animationen
− Weitgehender Verzicht auf Animationen
− Beim Versand der PPT keine Anzeigedauern verwenden um die Geschwindigkeit veränderbar zu
lassen
− Anzeigen nicht überlappend oder voreinander anlegen
− Tabellen
− Direkt in PPT erstellen und nicht als Bild einfügen (wenn dann mit Alternativtext)
− Kontraste berücksichtigen
− Formatierung über „Layout“- und „Entwurf“-Reiter
− Überschriften auch als solche kennzeichnen und nicht nur farbig oder durch die Größe markieren
18
Quelle: Forschungsinstitut Technologie und Behinderung (2013)3 PowerPoint
PowerPoint-Präsentationen
− Untertitel für eingebundene Videos können
erstellt werden
− Hereinladen einer VTT-Datei
− Bearbeitung und Timing in PPT
− Beschriftungen von Audiodateien können
über das Stempel-Add-In eingefügt und
verfügbar gemacht werden
193 PowerPoint
PowerPoint-Präsentationen
− Präsentationen mit automatischen Echtzeit-Beschriftungen oder Untertiteln in PPT
von Office 365
− Auch mit Übersetzung in andere Sprachen verfügbar
− Einstellung über den Reiter Bildschirmpräsentation
− Bei Screencast-Aufnahmen lassen sich die Untertitel im Präsentationsmodus auch
aufzeichnen, allerdings sind sie dann fixer Bestandteil des entstehenden Videos
und kein (de-)aktivierbares Feature
20
Quelle: Microsoft Support (o. J. b)3 PowerPoint
PowerPoint-Präsentationen
− Lesereihenfolge festlegen und prüfen
− Auswahlbereich anzeigen lassen
− Bei Office 2019: Lesereihenfolge von unten
nach oben (Screenshots rechts)
− Bei Office 365: Lesereihenfolge rechts
auswählbar (Screenshot unten)
21
Quelle: Forschungsinstitut Technologie und Behinderung (2013)3 PowerPoint
PowerPoint-Präsentationen
− Spracheinstellungen vornehmen
− Alle Fremdsprachigen Textteile als solche auch
kennzeichnen inkl. Fremdwörter
− Abschlussarbeiten
− Präsentation ohne Farben anschauen, um Kontraste
zu prüfen (F.14)
− Office-Prüfung auf Barrierefreiheit!
− Metadaten eintragen: AutorIn, Titel etc.
− Umwandlung als PDF
− Bestenfalls über die „Speichern als“-Funktion
− Nicht über die Druckfunktion
− Hierfür auch die Spracheinstellung beachten
22
Quelle: Forschungsinstitut Technologie und Behinderung (2013)4 PDF
234 PDF
Diskussion zur Verwendung von PDF
− Verwendung von PDFs nicht generell mit Barrieren verbunden oder sogar verboten
− PDFs dienen sonst dazu Inhalte genau gleich auf verschiedenen Webseiten oder Readern darzustellen
Barrierefreiheit erfordert das Gegenteil
− Flexible Größeneinstellungen, Bedienung über die Tastatur, Erhalt der Lesereihenfolge,
Spracherkennung
− Verwendung von (X)HTML wäre eigentlich besser (und angeblich ähnlich aufwendig)
− Adobe Reader verfügt über eine Kontrastfunktion
− Tastaturbedienung nur problematisch, wenn bei langen PDFs keine Inhaltsverzeichnisse angelegt
werden
− Verwendung von „Tagged PDF“
− Strukturierung von Inhalten mit Überschriften, Absätzen etc.
− Lesezeichennavigation
− Einbinden von Alternativtexten für Abbildungen
24
Quelle: Einfach für Alle (o. J. b)4 PDF
Verwendung von Tagged PDF
− Strukturierung von Inhalten mit Überschriften,
Absätzen etc.
− Lesezeichennavigation
− Durchsuchbare Texte
− Einbinden von Alternativtexten für
Abbildungen
25
Quelle: Einfach für Alle (o. J. b)4 PDF
PDF-Dateien barrierefrei gestalten
1. Vorlagedatei entsprechend vorbereiten (Word, PPT etc.)
2. Formularfelder und Beschreibungen einfügen übersprungen, da für DAS LERNBÜRO nicht relevant
3. Ein- und Ausgabehilfe-Elemente hinzufügen
4. Tags einbinden
5. Prüfung und Problembehebung
26
Quelle: Adobe Acrobat (2021b)4 PDF
1. Vorlagedatei entsprechend vorbereiten
− Vorbereitung der Word- oder PowerPoint-Datei
entsprechend der barrierefreien Vorgaben
− Umwandlung in PDF über die „Speichern als“ Funktion
oder den PDF Maker von Adobe Pro
− Kein Umwandeln über die „als PDF drucken“-
Version
− Bei gescannten Seiten kann es ein wenig helfen,
wenn die Datei durchsuchbar formatiert wird
− Zusammenführen von PDF-Seiten führt häufig zu einer
falschen Lesereihenfolge bei Screenreadern
(Programmunabhängig)
27
Quelle: Einfach für Alle (o. J. b); Adobe Acrobat (2021c)4 PDF
2. Formularfelder und Beschreibungen
einfügen
− Einfügen z.B. in den Entwicklertools von Word
− Vorgabe der möglichen Einträge und Beschränkung
der Bearbeitung aktivieren (schon in Word möglich)
− In Adobe: Werkzeuge – Ein-Ausgabehilfe –
Formularfelderkennung ausführen funktioniert
nicht immer und daher ist es einfacher das Formular
in Adobe mit Feldern auszustatten
− Für Formularfelder einen kurzen Zusatztext unter
Eigenschaften – Quickinfo eingeben, sodass dieser
Text von Screenreadern gelesen werden kann
28
Quelle: Einfach für Alle (o. J. b); Adobe Acrobat (2021b); Adobe Acrobat (2021c)4 PDF
2. Formularfelder und Beschreibungen
einfügen
− Sichergehen, dass alle Felder auch in der Tag liste
eingebunden sind und mit Vorgelesen werden
wenn nicht, können sie auch manuell hinzugefügt
werden
29
Quelle: Einfach für Alle (o. J. b); Adobe Acrobat (2021b); Adobe Acrobat (2021c)4 PDF
3. Ein- und Ausgabehilfe-Elemente hinzufügen
− Dokumentsprache festlegen
− Wichtig für das korrekte Vorlesen der Datei
30
Quelle: Einfach für Alle (o. J. b); Adobe Acrobat (2021b); Adobe Acrobat (2021c)4 PDF
3. Ein- und Ausgabehilfe-Elemente
hinzufügen
− Dokumentsprache festlegen
− Einzelne Textteile können durch
die Tags als fremdsprachig
markiert werden
− Tags-Ansicht durch: Ansicht
Einblenden/Ausblenden
Navigationsfenster Tags öffnen
31
Quelle: Einfach für Alle (o. J. b); Adobe Acrobat (2021c); Adobe Acrobat (2021a)4 PDF
3. Ein- und Ausgabehilfe-Elemente
hinzufügen
− Meta-Informationen bearbeiten
− Titel, Thema und VerfasserInnen
definieren
− Diesen über die Eigenschaften
auch anzeigen lassen unter
„Ansicht beim Öffnen“
32
Quelle: Einfach für Alle (o. J. b); Adobe Acrobat (2021c); Adobe Acrobat (2021a)4 PDF
3. Ein- und Ausgabehilfe-Elemente hinzufügen
− Lesezeichen
− Wird ab 20-seitigen Dokumenten dringend
empfohlen, ggf. auch bei weniger
− Bei korrekter Verwendung von z.B. Word-
Überschriften, werden automatisch
Lesezeichen eingefügt
33
Quelle: Einfach für Alle (o. J. b); Adobe Acrobat (2021c); Adobe Acrobat (2021a)4 PDF
3. Ein- und Ausgabehilfe-Elemente hinzufügen
− Alternativtexte für Bilder
− i.d.R. von Word übernommen,
sonst auch bearbeitbar in
Adobe
− Jedes Bild sollte einen
Alternativtext haben
− Sollten kurz aber ausreichend
beschreibend sein
− Alternativtexte auch für Abkürzungen
sinnvoll
34
Quelle: Einfach für Alle (o. J. b); Adobe Acrobat (2021c); Adobe Acrobat (2021a)4 PDF
3. Ein- und Ausgabehilfe-Elemente hinzufügen
− Barrierefreie Links
− Am besten auf dem Link im Text hinweisen
− Sicherstellen, dass ein Link klickbar und als Link
formatiert ist
− Der Link sollte wie auch bei Bildern als Text
auftauchen, wenn die Maus darüber fährt
− Nicht zu viele identische Links verwenden, also z.B.
ein Bild und einen Text mit einem Link versehen,
sondern nur eins davon
35
Quelle: Einfach für Alle (o. J. b); Adobe Acrobat (2021c); Adobe Acrobat (2021a)4 PDF
3. Ein- und Ausgabehilfe-Elemente
hinzufügen
− Lesereihenfolge bestimmen und prüfen
36
Quelle: Einfach für Alle (o. J. b); Adobe Acrobat (2021c)4 PDF
3. Ein- und Ausgabehilfe-Elemente
hinzufügen
− Konflikte zwischen Sicherheitseinstellungen und Bildschirmlesehilfen verhindern
− Unter Datei Eigenschaften Sicherheit sollte die Methode „Keine
Sicherheit“ eingestellt sein
− Andere Einstellungen zur Verhinderung von Seitenentnahme oder
Druckverweigerung können Bildschirmleseprogramme stören
37
Quelle: Einfach für Alle (o. J. b); Adobe Acrobat (2021c)4 PDF
4. Tags einbinden
− Tags prüfen und verwenden
− Jedes Element im Dokument muss einen Tag haben
− Auch Anmerkungen oder Kommentare können
vertaggt werden
− Elemente, die rein visuell sind, sollten als Artefakt
gekennzeichnet sein, sodass sie nicht in der
Lesereihenfolge auftauchen
− Passiert eigentlich Automatisch!
− Lesereihenfolge ist Tagbasiert!
38
Quelle: Einfach für Alle (o. J. b); Adobe Acrobat (2021c); Adobe Acrobat (2021a)4 PDF
4. Tags einbinden
− Tabellen kennzeichnen und formatieren
− Bedarf einer Überschriftenzeile
− Keine verknüpften Zellen, sodass Spalten und
Zeilen ausgeglichen sind
− Tabellenüberschrift auch als solche
kennzeichnen
− Listenelemente formatieren
− Alle Listen sollten als Gesamtobjekt getaggt
sein
− Vorgehen ähnlich wie bei Tabellen, nur Bezug
zwischen über- und untergeordneten
Listenelementen
− Formatierung vorab in Word einfacher als in Adobe
39
Quelle: Adobe Acrobat (2021c)4 PDF
5. Prüfung und
Problembehebung
− Automatische Prüfung durch
Adobe
− Beheben der einzelnen
angezeigten Probleme
durch Nachformatieren
− Weitere Informationen
zur einzelnen Meldung
durch Rechtsklick
− Ergebnisbericht kann
auch an das PDF
angehängt werden
40
Quelle: : Einfach für Alle (o. J. b)4 PDF
5. Prüfung und
Problembehebung
− Alternative Prüfung durch PDF
Accessibility Checker (PAC)
− Möglichkeit zur
Screenreader-Vorschau
und so zur
Nachvollziehbarkeit der
Lesereihenfolge und
Formatierungsansicht
− Genauere Prüfung und
Anzeige als in Adobe
selbst, dadurch aber
mehr Aufwand alles zu
beheben
41
Quelle: Schweizerische Stiftung zur behindertengerechten Technologienutzung (o. J.)4 PDF
5. Prüfung und
Problembehebung
− Alternative Prüfung durch PDF
Accessibility Checker (PAC)
− Möglichkeit zur
Screenreader-Vorschau
und so zur
Nachvollziehbarkeit der
Lesereihenfolge und
Formatierungsansicht
42
Quelle: Schweizerische Stiftung zur behindertengerechten Technologienutzung (o. J.)5 Excel
435 Excel
Bedarfe und Navigation durch Screenreader
- Blinde Personen haben nicht die Möglichkeit mit einem schnellen ersten Blick die Struktur einer Tabelle
oder des gesamten Reiters zu erfassen
- (viele) Screenreader lesen leere Zellen auch als „Leer“ vor!
- keine Trennung von Tabellen durch Leerzeilen
- Pro Tabelle eine Registerkarte
- Alternativ: Anlegen eines verlinkten Inhaltsverzeichnisses
- Navigation durch Tastenkombinationen sorgt für das Vorlesen ab Zelle A1 in jedem Registerblatt
- Zelle A1 sollte aktiv sein und einen Inhalt haben
- Einleitungen zur Erläuterung der Tabellen schreiben: Hinweise auf die Anzahl der
Tabellenblätter, die Inhalte der jeweiligen Registerkarte
- „Ende des Tabellenblatts“ in die erste Spalte der letzten Zeile der aktiven Tabelle
44
Quelle : Falge (2015)5 Excel
Ähnlichkeiten zu Word und PowerPoint
- Alternativtexte für visuelle Elemente (Bilder, Diagramme,
Smart-Arts)
- Links mit formulierten Zielen in der Zelle und Quickinfos
versehen
- Kontraste berücksichtigen
- Prüfen der Barrierefreiheit durch das Office-Tool
45
Quelle: Microsoft Support (o. J. a)5 Excel
Besonderheiten bei Excel
- Sinnvolles Benennen der Tabellenreiter / Registerkarten & leere Blätter entfernen
- Klare Strukturen und Formatieren von Daten als eingefügte
Tabellen anstelle der direkten Eingabe
- Verbundene Zellen vermeiden
46
Quelle: Microsoft Support (o. J. a)5 Excel
Besonderheiten bei Excel
- Eingabe der Tabellenstrukturen in Form
von Überschriften, Ergebniszeilen, erste
Spalte etc.
47
Quelle: Microsoft Support (o. J. a)6 Video
486 Video
Bedarf der Barrierefreiheit bei Videos
− Je nach Einschränkungen werden andere Aspekte zur Barrierefreiheit relevant, z.B.
− Menschen mit Höreinschränkungen benötigen Untertitel oder Gebärden
− Menschen mit Seeschwäche benötigen Audiodeskriptionen oder alternative Audioversionen der
gleichen Inhalte
− Menschen mit Fotosensibler Epilepsie benötigen die gleichen Inhalte als Text
− Wenn schon früh Barrierefreiheit mitgedacht wird, braucht es später weniger Anpassungen
− Wenn zum Verständnis notwendige Inhalte ausgesprochen werden, bedarf es keiner
Audiodeskription
− Wenn das Sprachtempo angemessen ist und klar gesprochen und formuliert wird, erleichtert das
nicht nur höreingeschränkten Nutzern das Verständnis, sondern auch Nicht-Muttersprachlern
und allen anderen
49
Quelle: BIK für Alle (o. J. d)6 Video
Untertitelung
− Nicht nur nützlich für Hörbehinderte Menschen, sondern auch für Nicht-MuttersprachlerInnen und
mobile NutzerInnen, die unterwegs Videos ohne Ton schauen möchten
− Untertitel machen Videos auch besser für die Suchmaschinenoptimierung (SEO)
− Wege um Untertitel zu erstellen
− Externe Beauftragung
− Zeitgesteuerte Textdateien erstellen im vtt-Format
− Youtube-Untertitel: auch bei privat geschalteten Videos möglich und in versch. Dateiformaten
zum Download möglich, Automatische Spracherkennung mit automatischem Timing
− Allgemeine Untertitel-Standards:
− Größe
− Ausrichtung: Unten, mittig, abweichend bei schon bestehenden Texten am unteren Rand
− Farben und Kontrast
− Synchronität und Geschwindigkeit: 13-15 Zeichen pro Sekunde
− Geräusche und Musik: relevante Geräusche kennzeichnen, Musik-Stil angeben
− Abkürzungen
50
Quelle; BIK für Alle (o. J. g); BIK für Alle (o. J. h); NDR (2015)6 Video
Untertitelung mit YouTube
− Bei YouTube eingestellte Videos
können auch privat oder nur mit Link
zu öffnen sein
− Thumbnails können aus dem Video
ausgewählt oder zusätzlich
hochgeladen werden
− Untertitel werden automatisch
erstellt und können überarbeitet
werden
516 Video
Untertitelung mit YouTube
− Sprache der Untertitel für das Video
oder den gesamten Kanal erstellen
− Untertitel können beim schauen je nach
Video aktiviert werden
52
Quelle: Google Support (o. J.)6 Video
Untertitelung mit YouTube
− Automatische Untertitel enthalten
keine Satzzeichen und keine
Groß- und Kleinschreibung
− Können rauskopiert und weiter
bearbeitet werden
− Link zum IDiT-Video:
https://www.youtube.com/watch?
v=HCGgaS_Fn2g
53
Quelle: Google Support (o. J.)6 Video
Untertitelung mit YouTube
− Herunterladen der VVT-Datei oder des
Videos inkl. Untertitel
− (halb-)legale Downloader von
Youtube bei eigenen Videos ok
− Youtube-Video selbst downloaden
und mit Untertiteln versehen,
basierend auf der hinterlegten Datei
Einbinden des YouTube-Videos in
ILIAS
− SRT-Datei kann mit z.B. SaveSubs geladen
werden
− Download von Video und SRT-Datei durch
Minitool möglich
− Darstellung vom Browser abhängig
54
Quelle: Klein (2021); MiniTool Software Ltd. (2021); SaveSubs (o.J.)6 Video
Audiodeskription
− Alle relevanten Informationen, die im Bild zu sehen sind, werden für blinde und seheingeschränkte Personen
beschrieben
− Hierzu zählen wichtige Informationen zur Handlung, zu Personen, zu den sichtbaren Orten
− Texteinblendungen werden vorgelesen
− Bei Videos, die Medienalternative für Texte sind, kann darauf verzichtet werden
− Technisch bisher noch nicht so einfach umsetzbar
− Je nach Player werden entweder zusätzliche Videodateien oder eine Audiodeskription als W3C nötig
− In der Praxis (z.B. ARD Mediathek) werden alternative Videos angeboten
− Allgemeiner Standard für Audiodeskriptionen im deutschsprachigen Raum
− Wer, wo, was, wann-Fragen beantworten
− Personen beschreiben
− Geräusche nicht übersprechen
− Keine Interpretationen vorwegnehmen
− Präsens
− Verständlichkeit
− Texte vorlesen, Markennamen etc. nur nennen, wenn sie relevant für die Handlung sind
55
Quelle: BIK für Alle (o. J. b); NDR (2019)7 Webseiten
567 Webseiten
Vorteile von barrierefreiem Internet
− Zielgruppe erweitert
− Einfache Gesamtbedienbarkeit
− Mobile Nutzung Inhalte, die an Displaygrößen und freie, barrierefreie Einstellungsoptionen
angepasst sind, sind auch mobil gut nutzbar
− Suchmaschinenoptimierung, durch mehr Texteinbindungen durch Untertitel, Alternativtexte etc.
− Barrierefreie Seiten sind für browser- und plattformunabhängige Darstellungen optimiert
− Zukünftig weitere gesetzliche Vorgaben
− Lerntypen werden optimal mit Medien versorgt, die zu ihnen passen
57
Quelle: BIK für Alle ( o. J. f); Bundesministerium der Justiz und für Verbraucherschutz (2011)7 Webseiten
Bedeutung für unsere Webseiten
− BITV2.0 bezieht sich auf öffentliche Institutionen, inkl. Universitäten und Hochschulen
− HS Niederrhein ist seit 2019 verpflichtet zu einem barrierefreien Webauftritt es gibt aber keine
Folgen bei Nicht-Erfüllung
− ILIAS 6.0 ist (bisher) nicht zertifiziert
− Moodle befolgt die WCAG 2.1-Richtlinien
58
Quelle: Moodle (2021); Bundesministerium der Justiz und für Verbraucherschutz (2011); Hochschule Niederrhein (2019)7 Webseiten
Barrierefreie Informationstechnik-Verordnung (BITV) 2.0 basierend auf der
EU-Richtlinie 2016/2102
− Gilt für öffentliche Internetauftritte (Bund, Verwaltung, öffentliche
Einrichtungen)
− Technische Aspekte und Inhalte müssen barrierefrei gestaltet sein,
entsprechend der WCAG-Prinzipien (Web Content Accessibility Guidelines):
− Wahrnehmbarkeit: Informationen müssen für unterschiedliche Sinne
wahrnehmbar sein
− Bedienbarkeit: Schnittstellen und Navigation müssen nutzbar sein
− Verständlichkeit: einfach nachvollziehbare Nutzerschnittstellen (Inhalte
und Bedienung)
− Robustheit: Unterschiedliche Assistive Technologien müssen
verwendbar sein, auch bei Weiterentwicklungen
− Feedback-Mechanismus und Erklärung zur Barrierefreiheit
59
Quelle: Einfach für Alle (o. J. a); Einfach für Alle (o. J. c); Hochschule Niederrhein (2021)7 Webseiten
Barrierefreie Inhalte
− Generell gelten die Vorgaben für Dokumente, PPT, PDF, Videos & Audios
− Alles eingestellte Material sollte in sich barrierefrei sein
− Es sollten Alternativen für Medien zur Verfügung stehen, u.a. alternative Dateiformate
− Alternativtexte für Bilder und Medienobjekte (ggf. H5P)
− Word-Dokumente zu PDF, insb. wenn diese nicht barrierefrei sind
− Texte zu von Audios / Videos
− Dekorative Elemente müssen als solche gekennzeichnet sein (das leere alt-Attribut: alt=„“)
− Screen-Reader-Optimierung
− In den allgemeinen Einstellungen kann die Optimierung aktiviert werden
60
Quelle: BIK für Alle (o. J. i)7 Webseiten
Barrierefreie Inhalte
− Strukturelemente in Texten sollten als solche
gekennzeichnet sein Überschriften nicht nur
visuell hervorheben; auch Tabellenformate korrekt
nutzen
− Kontraste müssen hoch sein
− Links müssen gut bezeichnet sein und sich nicht
zu oft wiederholen (z.B. im Bild und darunter im
Text) bei Links auf verschiedene
Dokumententypen müssen die im Alternativtext
auftauchen (z.B. Formular als PDF-Download)
− Verständliche Sprache und Struktur nutzen
61
Quelle: BIK für Alle (o. J. e)7 Webseiten
Erklärung zur Barrierefreiheit der HSNR
− HS-Seite ist nicht vollständig barrierefrei
gestaltet „aufgrund der unverhältnismäßigen
Belastung“
− Haben wie als SO.CON einen Wunsch zur
Barrierefreiheit unserer Seite(n)?
62
Quelle: Hochschule Niederrhein (2021)7 Webseiten
ILIAS – Alternativtexte für Bilder
63
Quelle: BIK für Alle ( o. J. e)7 Webseiten
H5P-Elemente
− Einige H5P-Elemente sind für Barrierefreiheit optimiert
− Liste der Elemente in Bezug auf Barrierefreiheit:
https://documentation.h5p.com/content/1290410474004879128
− Positiv bewertet sind u.a.:
− Dialog Cards
− Drag the Words
− Fill in the Blanks
− Guess the answer
− Flashcards
− Interactive Video
− Question Set
− Multiple Choice
− True / False
− Negativ bewertet sind u.a.: Hotpots, Image Sequencing, Speak the Words, Timeline
64
Quelle: H5P (2020)7 Webseiten
Möglichkeiten zur Überprüfung der Barrierefreiheit
− BITV-Test mit Zertifikat
− „Werden alle Seiten einer repräsentativen Seitenauswahl mit "konform" bewertet, können Sie
das Prüfzeichen "BIK BITV-konform (geprüfte Seiten)" auf der Website einbinden und über die
Verlinkung auf den Prüfbericht das gute Testergebnis nach außen dokumentieren.“
− Web Accessibility Evaluation Tool (WAVE)
− Selbsttest der eigenen Webseite
− Hilfreich um behebbare Fehlerquellen in der Barrierefreiheit zu finden
65
Quelle: BIK (o. J.); Wave (o. J.)7 Webseiten
WAVE-Test der SO.CON-Seite
− Ziemlich viele Fehlermeldungen und Warnungen
− Fehlende / Leere Überschriften
− Fehlende Alternativtexte für verlinkte Bilder
66
Quelle: Wave (o. J.)7 Webseiten
WAVE-Test der SO.CON-Seite
− Über 200 Kontrastfehler
durch das HS-Hellblau
67
Quelle: Wave (o. J.)7 Webseiten
WAVE-Test der SO.CON-Seite
− Warnung vor schlechter
zugänglichem Blocktext
168-Mal
− Übersprungene
Überschriftenlevel
− Links zu PDF-Dokumenten
68
Quelle: Wave (o. J.)7 Webseiten
WAVE-Test der SO.CON-Seite
− Viele Alternativtexte sind schon vorhanden
69
Quelle: Wave (o. J.)7 Webseiten
Fehleranalyse mit WAVE
70
Quelle: Wave (o. J.); Das Lernbüro (o. J.)7 Webseiten
Fehleranalyse mit WAVE
− Fehler: Alternativtexte für Bilder – sollten wir alle beheben!
71
Quelle: Wave (o. J.); Das Lernbüro (o. J.)7 Webseiten
Fehleranalyse mit WAVE
− Kontrast-Fehler: zu geringer Kontrast ggf. beheben?
72
Quelle: Wave (o. J.); Das Lernbüro (o. J.)7 Webseiten
Fehleranalyse mit WAVE
− Warnung: zu lange Alternativtexte, wiederholende Links, kleine Texte Sinnhaftigkeit betrachten und
ggf. anpassen!
73
Quelle: Wave (o. J.); Das Lernbüro (o. J.)7 Webseiten
Fehleranalyse mit WAVE
− Besonderheiten: Verlinkte Bilder, Abbildungen, Sprachangabe Auf fehlerhafte Angaben gegenprüfen!
74
Quelle: Wave (o. J.); Das Lernbüro (o. J.)7 Webseiten
Fehleranalyse mit WAVE
− Strukturelemente: Überschriften, Listen, Navigationselemente, Inhaltstexte, Fußzeile gegenprüfen,
ob die Angaben stimmen!
75
Quelle: Wave (o. J.); Das Lernbüro (o. J.)7 Webseiten
Fehleranalyse mit WAVE
− Accessible Rich Internet Applications (ARIA): Label, Menüs etc. Für uns nicht weiter zu bearbeiten,
betrifft Funktionen von ILIAS!
− Keine Kontrastfehler in unserem Skin
76
Quelle: Wave (o. J.); Das Lernbüro (o. J.)8 Literatur
Adobe Acrobat (2021a): PDF erstellen und Barrierefreiheit prüfen (Acrobat Pro). Online verfügbar unter https://helpx.adobe.com/de/acrobat/using/create-verify-pdf-
accessibility.html?trackingid=KACNN%20-%20LogicalRO, zuletzt aktualisiert am 30.04.2021, zuletzt geprüft am 14.06.2021.
Adobe Acrobat (2021b): PDF-Formularfelder - Grundlagen. Formularfelder erstellen. Online verfügbar unter https://helpx.adobe.com/de/acrobat/using/pdf-form-field-
basics.html, zuletzt aktualisiert am 30.04.2021, zuletzt geprüft am 14.06.2021.
Adobe Acrobat (2021b): Verfahren zum Erstellen von barrierefreien PDF-Dokumenten. Online verfügbar unter https://helpx.adobe.com/de/acrobat/using/creating-
accessible-pdfs.html, zuletzt aktualisiert am 30.04.2021, zuletzt geprüft am 14.06.2021.
BIK (o. J.): Der BIK BITV-Test. Online verfügbar unter https://www.bitvtest.de/bitv_test.html, zuletzt geprüft am 14.06.2021.
BIK für alle (o.J. a): Alternativtexte für Grafiken. Barrierefreiheit umsetzen. Online verfügbar unter https://bik-fuer-alle.de/alternativtexte-fuer-grafiken.html, zuletzt geprüft am
14.06.2021.
BIK für alle (o. J. b): Audiodeskription. Barrierefreiheit umsetzen. Online verfügbar unter https://bik-fuer-alle.de/audiodeskription.html, zuletzt geprüft am 14.06.2021.
BIK für alle (o. J. d): Für Videoproduzenten: Konzeption und Produktionsprozess. Barrierefreiheit umsetzen. Online verfügbar unter https://bik-fuer-alle.de/fuer-
videoproduzenten-konzeption-und-produktionsprozess.html, zuletzt geprüft am 14.06.2021.
BIK für alle (o. J. e): Kleine Schreibschule. Barrierefreiheit umsetzen. Online verfügbar unter https://bik-fuer-alle.de/kleine-schreibschule.html, zuletzt geprüft am 14.06.2021.
BIK für alle (o. J. f): Leitfaden für Webseiten-Anbieter. Barrierefreiheit umsetzen. Online verfügbar unter https://bik-fuer-alle.de/leitfaden-fuer-webseiten-anbieter.html, zuletzt
geprüft am 14.06.2021.
BIK für alle (o. J. g): Untertitelung. Barrierefreiheit umsetzen. Online verfügbar unter https://bik-fuer-alle.de/untertitelung.html, zuletzt geprüft am 14.06.2021.
BIK für alle (o. J. h): Untertitelung mit Youtube. Online verfügbar unter https://bik-fuer-alle.de/untertitelung-mit-youtube.html, zuletzt geprüft am 14.06.2021.
BIK für alle (o. J. i): Webinhalte barrierefrei pflegen - ein Leitfaden für Online-Redakteure. Barrierefreiheit umsetzen. Online verfügbar unter https://bik-fuer-
alle.de/webinhalte-barrierefrei-pflegen.html, zuletzt geprüft am 14.06.2021.
Bundesministerium der Justiz und für Verbraucherschutz (12.09.2011): Verordnung zur Schaffung barrierefreier Informationstechnik nach dem
Behindertengleichstellungsgesetz. Barrierefreie-Informationstechnik-Verordnung - BITV 2.0. Online verfügbar unter http://www.gesetze-im-
internet.de/bitv_2_0/BJNR184300011.html, zuletzt geprüft am 14.06.2021
778 Literatur
Das Lernbüro (o. J.): Das Lernbüro. Online verfügbar unter https://daslernbuero.de/, zuletzt geprüft am 14.06.2021.
de Oliveira, Domingos (o. J.): Grafiken barrierefrei einsetzen. Einfach für Alle. Online verfügbar unter https://www.einfach-fuer-alle.de/artikel/bilder-grafiken-barrierefrei/,
zuletzt geprüft am 14.06.2021.
Deutscher Blinden- und Sehbehindertenverband e.V. (o. J.): Gendern. Online verfügbar unter https://www.dbsv.org/gendern.html, zuletzt geprüft am 14.06.2021.
Einfach für Alle (o. J. a): Die EU Richtlinie für die Umsetzung digitaler Barrierefreiheit schreitet voran. Online verfügbar unter https://www.einfach-fuer-alle.de/artikel/eu-
richtlinie-2016-2102/, zuletzt geprüft am 14.06.2021.
Einfach für Alle (o. J. b): Gestaltung barrierefreier PDF-Dokumente. Einfach für Alle. Online verfügbar unter https://www.einfach-fuer-alle.de/artikel/pdf-barrierefrei-
umsetzen/.
Einfach für Alle (o. J. c): Übersetzung von »WCAG 2.0 verstehen«. Die vier Prinzipien der Barrierefreiheit verstehen. Online verfügbar unter https://www.einfach-fuer-
alle.de/blog/id/2605/, zuletzt geprüft am 14.06.2021.
Falge, Martin (2015): Leitfaden zur Erstellung barrierearmer Dokumente. Kapitel 6.3 Microsoft Excel. 3. Aufl. Servicestelle zur barrierefreien Aufbereitung von
Lehrmaterialien - Universität Kassel. Online verfügbar unter https://www.uni-
kassel.de/themen/fileadmin/datas/themen/Literaturumsetzung/Leitfaden_1315_Homepage_3Excel.pdf, zuletzt geprüft am 14.06.2021.
Forschungsinstitut Technologie und Behinderung (Hg.) (2013): Barrierefreie Dokumente. Anleitungen zur Erstellung barrierefreier Textdokumente und Präsentationen mit
Microsoft Office, OpenOffice, Adobe InDesign und Acrobat Pro. Wetter. Online verfügbar unter http://www.di-
ji.de/images/stories/leitfaden/Barrierefreie_Dokumente_gesamt_07-2013.pdf, zuletzt geprüft am 14.06.2021.
Google Support (o. J.): Untertitel bearbeiten oder entfernen. Youtube-Hilfe. Online verfügbar unter https://support.google.com/youtube/answer/2734705, zuletzt geprüft am
14.06.2021.
H5P (2020): Content types recommendations. Online verfügbar unter https://documentation.h5p.com/content/1290410474004879128, zuletzt aktualisiert am 27.11.2020,
zuletzt geprüft am 14.06.2021.
Hochschule Niederrhein (2019): Guideline zur Erstellung von Websiten. Online verfügbar unter https://intern.hs-
niederrhein.de/fileadmin/dateien/hochschulkommunikation/Social_Media_Web/2019-11-05_webguideline_01.pdf, zuletzt geprüft am 14.06.2021.
Hochschule Niederrhein (2021): Erklärung zur Barrierefreiheit. Online verfügbar unter https://www.hs-niederrhein.de/startseite/erklaerung-zur-barrierefreiheit/, zuletzt
aktualisiert am 02.03.2021, zuletzt geprüft am 14.06.2021.
788 Literatur
Klein, Rebecca (2021): WebVTT Captions: How to Create a Web Video Text Track File. 3PLAYMEDIA. Online verfügbar unter https://www.3playmedia.com/blog/how-to-
create-a-webvtt-file/, zuletzt aktualisiert am 09.06.2021, zuletzt geprüft am 14.06.2021.
Microsoft Support (o. J. a): Gestalten barrierefreier Excel-Dokumente für Personen mit Behinderungen. Online verfügbar unter https://support.microsoft.com/de-
de/office/gestalten-barrierefreier-excel-dokumente-f%C3%BCr-personen-mit-behinderungen-6cc05fc5-1314-48b5-8eb3-683e49b3e593, zuletzt geprüft am 14.06.2021.
Microsoft Support (o. J. b): Präsentationen mit automatischen Echtzeit-Beschriftungen oder -Untertiteln in PowerPoint. Online verfügbar unter
https://support.microsoft.com/de-de/office/pr%C3%A4sentationen-mit-automatischen-echtzeit-beschriftungen-oder-untertiteln-in-powerpoint-68d20e49-aec3-456a-939d-
34a79e8ddd5f, zuletzt geprüft am 14.06.2021.
MiniTool® Software Ltd. (2021): Der beste YouTube zu MP3 Converter. Hg. v. MiniTool® Software Ltd. Online verfügbar unter https://de.minitool.com/youtube/.
Moodle (2021): Barrierefreiheit. Online verfügbar unter https://docs.moodle.org/310/de/Barrierefreiheit, zuletzt aktualisiert am 02.02.2021, zuletzt geprüft am 14.06.2021.
NDR (2015): Untertitel-Standards. Online verfügbar unter https://www.ndr.de/fernsehen/barrierefreie_angebote/untertitel/Untertitel-Standards,untertitelstandards102.html,
zuletzt aktualisiert am 30.03.2015, zuletzt geprüft am 14.06.2021.
NDR (2019): Vorgaben für Audiodeskription. Online verfügbar unter https://www.ndr.de/fernsehen/barrierefreie_angebote/audiodeskription/Vorgaben-fuer-
Audiodeskriptionen,audiodeskription140.html, zuletzt aktualisiert am 25.06.2019, zuletzt geprüft am 14.06.2021.
SaveSubs (o. J.): Laden sie Untertitel von Youtube, Facebook, Viki, Dailymotion & more herunter. Online verfügbar unter https://savesubs.com/de, zuletzt geprüft am
14.06.2021.
Schweizerische Stiftung zur behindertengerechten Technologienutzung (Hg.) (o. J.): PDF Accessibility Checker. Zugang für alle. Online verfügbar unter https://www.access-
for-all.ch/ch/pdf-werkstatt/pdf-accessibility-checker-pac.html.
TechSmith (o. J.): Alternativtexte für Bilder sind wichtig für Barrierefreiheit und SEO. Online verfügbar unter https://www.techsmith.de/blog/alternativtext/, zuletzt geprüft am
14.06.2021.
Wave (o. J.): WAVE Web Accessibility Evaluation Tool. Online verfügbar unter https://wave.webaim.org/, zuletzt geprüft am 14.06.2021.
79Impressum Autorin: Marieke Vomberg für Hochschule Niederrhein 2021 Titel: Barrierefreie Dokumente und Webseiten Webseite: Das Lernbüro – www.daslernbuero.de Webseite: Projekt IDiT – https://idit.online Das dieser Veröffentlichung zugrunde liegende Vorhaben „IDiT – Including.Digital.Twins. Inklusives Mentoring und mediale Kompetenzen für RehabilitandInnen und Azubis in kaufmännischen Berufen/Berufsausbildung“ wurde im Rahmen der Förderrichtlinie „Inklusion durch digitale Medien in der beruflichen Bildung“ durch das Bundesministerium für Bildung und Forschung sowie den Europäischen Sozialfonds unter dem Förderkennzeichen 01PE18015C von 2018 bis 2021 gefördert. Es wurde von der TH Köln, der Hochschule Niederrhein und dem Berufsförderungswerk Köln (Leitung) durchgeführt.
Sie können auch lesen
