<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#0E0047" data-background-opacity="0.5"--> # Barrieren abbauen mit Open Source & OER 🧱⛏ <br> <p style="font-size: 0.5em;font-style: italic;"><img src="https://i.imgur.com/fbCt30B.jpg" width="100px" style="background-color:transparent;border-style:none"><br> gilt nicht für eingebettete und explizit ausgenommene Inhalte</p> --- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#0E0047" data-background-opacity="0.5"--> ## Disclaimer 🎯 für das Thema sensibilisieren<!-- .element: class="fragment" data-fragment-index="1" --> 🎯 grundlegende Regeln<br/> für Barrierefreiheit vermitteln<!-- .element: class="fragment" data-fragment-index="2" --> --- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"--> ## Was ist Barrierefreiheit? 🤔 ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"--> > "Barrierefrei sind [...] gestaltete Lebensbereiche, wenn sie <span style="color:orange;">für Menschen mit Behinderungen</span> in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich <span style="color:orange;">ohne fremde Hilfe auffindbar, zugänglich und nutzbar</span> sind. [...]" ([BGG §4](https://www.gesetze-im-internet.de/bgg/__4.html)) ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"--> ### Bspw. Einschränkungen bzgl. * Sehvermögen<!-- .element: class="fragment" data-fragment-index="1" --> * Hörvermögen<!-- .element: class="fragment" data-fragment-index="2" --> * motorische Fähigkeiten bzgl. der Bedienung<!-- .element: class="fragment" data-fragment-index="3" --> * kognitive Fähigkeiten<!-- .element: class="fragment" data-fragment-index="4" --> ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"--> ### Statistiken <span>7,8 Mio<!-- .element: class="fragment" data-fragment-index="1" --></span> schwerbehinderte Menschen <span>(9,4%)<!-- .element: class="fragment" data-fragment-index="1" --></span> 25% davon sind >64 Jahre alt<!-- .element: class="fragment" data-fragment-index="2" --> <span style="font-size: 0.5em;font-style: italic;">Quelle: [Statistisches Bundesamt 2017](https://www.destatis.de/DE/Themen/Gesellschaft-Umwelt/Gesundheit/Behinderte-Menschen/Tabellen/geschlecht-behinderung.html#fussnote-1-119014)</span> ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"--> ### Statistiken <span>0,4%<!-- .element: class="fragment" data-fragment-index="1" --></span> Blindheit oder Sehbehinderung >50% <span>≈0,1%<!-- .element: class="fragment" data-fragment-index="3" --></span> <span>Gehörlosigkeit oder starke Schädigung<!-- .element: class="fragment" data-fragment-index="2" --></span> <span>Rot-Grün-Sehschwäche:<!-- .element: class="fragment" data-fragment-index="4" --></span> <span>♂️ 9% | ♀️ 0,8%<!-- .element: class="fragment" data-fragment-index="5" --></span> <span style="font-size: 0.5em;font-style: italic;">Quellen: [Statistisches Bundesamt 2017](https://www.destatis.de/DE/Themen/Gesellschaft-Umwelt/Gesundheit/Behinderte-Menschen/Tabellen/geschlecht-behinderung.html#fussnote-1-119014), [Deutscher Gehörlosenbund 2019](http://www.gehoerlosen-bund.de/sachthemen/statistik%20der%20geh%C3%B6rlosen%20menschen) & [Wikipedia](https://de.wikipedia.org/wiki/Rot-Gr%C3%BCn-Sehschw%C3%A4che)</span> ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"--> > "[...] Hierbei ist die Nutzung behinderungsbedingt notwendiger <span style="color:orange;">Hilfsmittel</span> zulässig." ([BGG §4](https://www.gesetze-im-internet.de/bgg/__4.html)) ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"--> ### Braillezeile  <p style="font-size: 0.5em;font-style: italic;"><a href="https://www.flickr.com/photos/visualpunch/5201363064/">René Jaun's braille display</a> by <a href="https://www.flickr.com/photos/visualpunch/">visualpun.ch</a> (Lizenz: <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>)</p> ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"--> ### Braillezeile  <p style="font-size: 0.5em;font-style: italic;"><a href="https://www.flickr.com/photos/quinnanya/4698377528/">Day 162: Beauty is in the Hands of the Beholder</a> by <a href="https://www.flickr.com/photos/quinnanya/">Quinn Dombrowski</a> (Lizenz: <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>)</p> ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"--> ### Hilfsmittel * Braillezeile * Screenreader<!-- .element: class="fragment" data-fragment-index="1" --> * Bildschirmlupe<!-- .element: class="fragment" data-fragment-index="2" --> * Apps (Braille-Eingabe, oder Speziallösungen wie bspw. [Greta & Starks](http://www.gretaundstarks.de/greta/home))<!-- .element: class="fragment" data-fragment-index="3" --> * Sprachassistent:innen (Alexa, Google Home)<!-- .element: class="fragment" data-fragment-index="4" --> ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"--> <a href="https://kulturkapital.org/kk030-blindtwittern/"><img src="https://kulturkapital.org/wp-content/uploads/2017/04/Kopie-von-Kulturkapital-Teaser2.png" width="500" style="background-color:transparent;border-style:none"/></a> mit Matthias Schäfer <p style="font-size: 0.5em;font-style: italic;"><a href="https://kulturkapital.org/kk030-blindtwittern/">Blindtwittern</a> by Tine Nowak (Lizenz: <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en">CC BY-SA 3.0</a>)</p> ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"--> ### "Nebeneffekte" * plattformübergreifend<!-- .element: class="fragment" data-fragment-index="1" --> * responsive Design<!-- .element: class="fragment" data-fragment-index="2" --> * wir werden alle älter...<!-- .element: class="fragment" data-fragment-index="3" --> * Deutsch als Fremdsprache<!-- .element: class="fragment" data-fragment-index="4" --> --- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#6b0264" data-background-opacity="0.5"--> ## Barrierefreiheit in der Praxis Worauf kommt es an? (unvollständige Aufzählung) ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#6b0264" data-background-opacity="0.5"--> ### Skalierbare Schriften STRG + Mausrad ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#6b0264" data-background-opacity="0.5"--> ### Korrektes Layout * echte Überschriften statt fettem großen Text<!-- .element: class="fragment" data-fragment-index="1" --> * keine Leerzeilen<!-- .element: class="fragment" data-fragment-index="2" --> * Listen statt Bindestriche<!-- .element: class="fragment" data-fragment-index="3" --> * `div`-Tags statt Tabellen zur Gestaltung nutzen<!-- .element: class="fragment" data-fragment-index="4" --> ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#6b0264" data-background-opacity="0.5"--> ### Sprechende Links sinnvolle Linktexte ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#6b0264" data-background-opacity="0.5"--> ### Alternativtexte für Grafiken außer für reine Layout-Zwecke ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#6b0264" data-background-opacity="0.5"--> #### Alternative Darstellungen ermöglichen * Text statt Bild (`alt`-Text)<!-- .element: class="fragment" data-fragment-index="1" --> * Text statt Audio (Transkripte)<!-- .element: class="fragment" data-fragment-index="2" --> * Text (Untertitel) oder Gebärden statt Video<!-- .element: class="fragment" data-fragment-index="3" --> * ...<!-- .element: class="fragment" data-fragment-index="4" --> ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#6b0264" data-background-opacity="0.5"--> ### ausreichende Kontraste ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#6b0264" data-background-opacity="0.5"--> ### Ist mein Lernangebot barrierearm? [WAVE](https://wave.webaim.org/) (Web Accessibility Evaluation Tool) [ein Beispiel](https://wave.webaim.org/report#/https://www.oercamp.de/webinare/onlinekurs/inklusiv/) --- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#821717" data-background-opacity="0.5"--> ## Was tragen Open Source und OER zur Barrierefreiheit bei? ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#821717" data-background-opacity="0.5"--> ### Open vs. Closed Source or Content per se: keine Unterschiede bspw. YouTube ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#821717" data-background-opacity="0.5"--> ### Open ➡ Erweiterung & Remix erlaubt * Moodle ([Dokumentation & SIGs](https://docs.moodle.org/dev/Accessibility)) * H5P ([Accessibility von Content-Typen](https://documentation.h5p.com/content/1290410474004879128)) ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#821717" data-background-opacity="0.5"--> ### Best Practice * Barrierearme Praktiken angewöhnen (Überschriften, sprechende Links etc.)<!-- .element: class="fragment" data-fragment-index="1" --> * `alt`-Texte ausfüllen<!-- .element: class="fragment" data-fragment-index="2" --> * auf Smartphone gegenprüfen<!-- .element: class="fragment" data-fragment-index="3" --> * Änderungen durch andere erlauben<!-- .element: class="fragment" data-fragment-index="4" --> * auf spezifische Anfragen reagieren (Aufwand)<!-- .element: class="fragment" data-fragment-index="5" --> --- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#0E0047" data-background-opacity="0.5"--> # Danke fürs Zuhören! *Anja Lorenz, [@anjalorenz](https://twitter.com/anjalorenz)* <br> <p style="font-size: 0.5em;font-style: italic;"><img src="https://i.imgur.com/fbCt30B.jpg" width="80px" style="background-color:transparent;border-style:none"><br> gilt nicht für eingebettete und explizit ausgenommene Inhalte</p> ---- <!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#0E0047" data-background-opacity="0.5"--> ## zum Nachlesen * [Barrierefreie Webseiten: Worauf Sie achten können](https://blog.hrz.tu-chemnitz.de/urzcommunity/2020/05/08/barrierefreie-webseiten-worauf-sie-achten-koennen/), URZ-Community der TU Chemnitz * [Barrierefreies Internet](https://de.wikipedia.org/wiki/Barrierefreies_Internet) (Wikipedia) * Thomas Marstrander: [Accessibility in H5P](https://www.youtube.com/watch?v=7pD8hzXsfaI) auf der H5P-Konferenz 2018 * [The A11Y Project](https://a11yproject.com/) * [Lighthouse in Chrome](https://developers.google.com/web/tools/lighthouse/) (F12)