Als PDF, PPTX herunterladen
Digtale Barrierefreiheit für NGO's
- 1.
- 2. Über mich ▸ MajaBenke ▸ Webdesignerin aus Berlin ▸ UX und Accessibility begeistert ▸ WordPress Community Mitglied seit 2015 ▸ @MajaBenke
- 3. Themen ▸ Was bedeutetBarrierefreiheit ▸ Rechtliche Grundlagen Deutschland und Europa ▸ Was macht eine barrierefreie Webseite aus ▸ Wie kann man die Webseiten auf Barrierefreiheit testen?
- 4.
- 5. „Barrierefreie Webseiten sindvon allen Anwender*innen nutzbar, unabhängig von eventuell vorhandener physischer oder kognitiver Besonderheiten oder Verwendung von unterstützender Technologie“ „Barrierefreie Webseiten sind für alle da.“ Oder kurz Barrierefreiheit bedeutet
- 6. Warum Barrierefreiheit wichtigist ▸ Menschen mit Beeinträchtigungen können die Webseiten benutzen und werden nicht ausgeschlossen ▸ Verbessert die Benutzer-Erfahrung für alle Anwender*innen ▸ Rechtlich erforderlich für bestimmte Webseiten (steigend) ▸ Aus ethischer Sicht das Richtige - inkludiert Menschen ▸ Verbessert die Code Qualität der Website und macht sie robuster ▸ Verbessert das SEO der Webseite
- 7. Benutzergruppen die barrierefreieWebseiten benötigen Physische Kognitive Auditive Visuelle + temporäre, situationsabhängige Beeinträchtigungen Icons von Freepik: freepik.com auf flaticon.com
- 8. Jede fünfte Personbenötigt eine barrierefreie Website
- 9.
- 10. Rechtslage ▸ Europa: EU-2016/2102(seit dem 23. September 2019) ; * EN 301 549 -Orientiert sich an WCAG Verpflichtet öffentliche Stellen EU-weit zu barrierefreien Internetseiten und Apps und zur Veröffentlichung einer Erklärung zur Barrierefreiheit. ▸ Deutschland: Behindertengleichstellungsgesetz (BGG) + Verordnung BITV ▸ Bundesländer: eigene Verordnungen die die EU-Richtlinie 2102 umsetzen. Auflistung nach Bundesland: https://bik- fuer-alle.de/gesetzgebung-und-standards.html#anker1
- 11. Richtlinien zur digitalen Barrierefreiheit ▸International: WCAG (Level AA, in Ausnahmen AAA) - Web Content Accessibility Guidelines (internationaler Webstandard für Barrierefreiheit) - https:// www.w3.org/Translations/WCAG20-de/ ▸ Deutschland: BITV 2.0 - https://www.gesetze-im- internet.de/bitv_2_0/BJNR184300011.html , https:// www.berlin.de/sen/inneres/moderne-verwaltung/ digitale-barrierefreiheit/recht/#faq_1_14
- 12. Einfache Erklärung Projekte mit> 50% öffentliche Gelder ▸ haben eine Pflicht für barrierefreie Webseiten und Apps ▸ müssen Erklärung zur Barrierefreiheit auf der Webseite abgeben ▸ Dabei muss man sich an die BITV halten (definiert die digitale Barrierefreiheit in Deutschland)
- 13. „Erklärung zur Barrierefreiheit“ ▸Wie Impressum oder Datenschutzerklärung erforderlich ▸ Es muss Folgendes beinhalten ▸ Angaben über Inhalte und Funktionen die nicht barrierefrei sind und die barrierefreie Alternative ▸ Information wann diese Barrieren behoben werden und warum diese noch nicht barrierefrei sind ▸ Kontaktformular zum melden von Barrieren und Ansprechpartner. Transparenz über den Feedback-Prozess ▸ Weitere Infos unter: https://www.bitvtest.de/bitv_test/ das_testverfahren_im_detail/vertiefend/die_erklaerung_zur_barrierefreiheit.html ▸ https://www.e-recht24.de/barrierefreiheitserklaerung.html
- 14. Bald (2022 und 2025) ▸Europe: European Accessibility Act (EAA) ▸ eCommerce Angebote, Betriebssysteme und andere Privatwirtschaftliche Bereiche müssen barrierefrei sein ▸ https://www.bundesfachstelle-barrierefreiheit.de/DE/ Themen/European-Accessibility-Act/european- accessibility-act.html
- 15. Was macht einebarrierefreie Webseite aus
- 16. Was macht einebarrierefreie Webseite aus Design Inhalt Code
- 17.
- 18. Planung ▸ Barrierefreiheit byDesign! ▸ Barrierefreiheit so normal wie SEO, Responsive oder Sicherheit in Projekten behandeln ▸ Von Anfang an Barrierefreiheit in Planung integrieren ▸ Reduziert Kosten durch aufwendiges Umbauen ▸ Barrierefreiheit nach jedem Zwischenschritt testen
- 19. Bestehende Webseite barrierefrei umbauen/ erhalten
- 20.
- 21. Design - HäufigeFehler ▸ Focus Style wurde gelöscht ▸ Klickbare Bereiche sind sehr klein ▸ Design zerstört die Funktionalität ▸ Informationen nur über Farbe ▸ Schlechter Farbkontrast ▸ Schlecht lesbare Schriften (zu klein, zu hell, verschnörkelte Schrift) ▸ Wenig Weißraum
- 22.
- 23. Information nur überFarbe Links sind nicht unterstrichen Graphen in Schwarz / Weiß nicht erkennbar
- 24. Design ▸ Verstehe deinDesign als Unterstützung für: ▸ Die Anwender*innen ▸ Die Funktionalität und Inhalte der Webseite ▸ Design ist keine Kunst! ▸ Mach es nicht nur schön, sondern benutzbar! ▸ Finde kreative Wege dein Design barrierefrei zu machen
- 25. Barrierefreies Design ▸ EindeutigesLayout ▸ Genug Weißraum ▸ Farbkontrast mindestens Level AA (WCAG) oder höher ▸ Zusätzlicher Style für Informationen neben Farbe ▸ Website in Schwarz/Weiß testen ▸ Links innerhalb von Text immer unterstreichen! ▸ Focus Style zusammen mit Hover Style designen ▸ Sparsam mit Uppercase und Kursiv sein
- 26.
- 27.
- 28. Inhalte - HäufigeFehler ▸ Überschriften nicht korrekt gesetzt ▸ Lange Textabschnitte ohne Auflockerung ▸ Keine klare Beschriftung von Überschriften, Buttons und Links ▸ Link-Text wie „Klicke hier“ ▸ Alt-Texte fehlen ▸ Informationen nur Visuell, nicht in Textform
- 29. Tipps für barrierefreieInhalte ▸ Lockere deinen Text mit Text Elementen auf ▸ Leichter zum Überfliegen und Lesen ▸ Achte auf die richtige Hierarchie der Überschriften ▸ Die wichtigen Informationen an den Anfang ▸ Klare Beschreibung der Links ▸ Statt „Klicke hier“, besser „zu unserem Programm“ ▸ Vermeide „Links im neuen Tab öffnen“ ▸ Vermeide Abkürzungen. Wenn Abkürzungen verwendet werden, sollten diese zu Beginn erklärt werden ▸ Lange Wörter kann man mit einem Bindestrich trennen
- 30.
- 31.
- 32. Tipps für barrierefreieInhalte ▸ Kombination von Inhalts Formaten ▸ Füge Alt-Text zu Bildern hinzu ▸ Biete Inhalte aus Videos, Gifs und Bildern zusätzlich als Text an ▸ Biete Untertitel und Transkription an ▸ Kein Autostart für Videos, Audios, Sliders und so weiter! ▸ Verwende keine flackernden oder stark bewegenden Elemente!
- 33.
- 34.
- 35. Was ist nurgut gemeint, aber nicht sinnvoll ▸ Addons für Webseiten um Schriftgrößen oder Helligkeit zu ändern ▸ Ausnahme: "Dark Mode“ und Option für „Bewegungen aktivieren“ ▸ Eine barrierefreie Version der Webseite neben der Hauptwebseite ▸ Ausnahme: Leichte Sprache ▸ Font wie „Open Dyslexia“ oder andere als Haupt-Font verwenden ▸ iFrames
- 36. Wie kann manWebseiten auf Barrierefreiheit testen?
- 37. Barrierefreiheit per Checkliste ▸Testing-Tools können nur bedingt alle Probleme finden ▸ Barrierefreiheit nach Checkliste macht nicht unbedingt eine barrierefreie Webseite aus ▸ Besser ist es, sich die Webseite als Ganzes anzuschauen
- 38. Wie kann mandie Webseiten auf Barrierefreiheit testen? ▸ Tastaturnavigation - mit dem Keyboard durch die Webseiten tabben. Maus nicht verwenden ▸ Erkennst du wo du bist? ▸ Kannst du das Menü und die Untermenüpunkte benutzen ▸ Kannst du alles erreichen und damit interagieren? (Kontaktformulare, Akkordeons, Videos, Tabellen …) ▸ Macht die Tab-Reihenfolge Sinn?
- 39. Wie kann mandie Webseiten auf Barrierefreiheit testen? ▸ Seite in schwarz und Weiß und bei niedriger Helligkeit ansehen (entweder Screenshot machen und diesen in Schwarz und Weiß umwandeln (oder mit einem Tool wie Sim Daltonism) und Helligkeit dämpfen) ▸ Kannst du alle Links erkennen? ▸ Kannst du Grafiken und andere visuelle Informationen gut erkennen und verstehen? ▸ Kannst du Texte, Menüs und anderes gut lesen und erkennen?
- 40. Wie kann mandie Webseiten auf Barrierefreiheit testen? ▸ Webseite in einer stressigen Situation testen Setzte dich künstlich unter Druck (Zeitlimit setzen) und sorge für starke Ablenkungen (jemand redet mit dir, deine Kinder wollen was von dir, Fernseher oder Radio laufen laut usw.). Alternative nutze dein Smartphone mit schlechtem Internet (Bitte achte auf deine eigene Belastungsgrenze!) ▸ Du kannst auch den Browser Add On „Funkify“ verwenden ▸ Versuche die Webseite zu bedienen und bestimmte Informationen oder Funktionen schnell auszuführen. ▸ Z.B. Öffnungszeiten herausfinden, Support-Hotline suchen, oder ähnliches ▸ Lenken dich Dinge auf der Webseite ab? (z.b. Silber, Videos die automatisch laufen, Pop Ups, die du wegblicken musst) ▸ Findest du die Informationen schnell? Sind die Überschriften und Link- Beschreibungen hilfreich?
- 41. Wie kann mandie Webseiten auf Barrierefreiheit testen? ▸ Teste deine Medien abwechselnd ohne Ton und mit geschlossenen Augen ▸ Videos: Kannst du die wichtigen Informationen in deinen Videos hören (Augen geschlossen bzw. Bildschirm dunkel)? ▸ Verstehst du deine Videos auch ohne Ton?
- 42. Testing Tools 1. Axe(Browser Extension) - Findet Fehler im Code, fehlende Alt-Texte, falsche Semantik usw. 2. Wave (Browser Extension) -Findet Fehler im Code, fehlende Alt-Texte, falsche Semantik usw. 3. Entwickler Tools in Chrome + Firefox (Lighthouse) 4. contrastchecker.com 5. Sim Daltonism (simuliert Farbenblindheit, für Mac) 6. headingsMap (Browser Extension)
- 43.
- 44. Erste Schritte fürdie Barrierefreiheit ▸ Fange mit den „Low Hanging Fruits“ an ▸ Unterstreiche Links im Inhalt ▸ Farbanpassungen bei zu schwachem Kontrast ▸ Keine Links mehr mit „Klick hier“ ▸ Alt-Texte nachrüsten (Webseite + Social Media Kanäle) ▸ Habe keine Angst Fehler zu machen. Wir lernen alle ständig dazu ▸ Du musst kein*e Accessibility-Expert*in werden. Versuche die Aspekte in deinem Wirkungsbereich zu lernen und umzusetzen
- 45. Grundprinzipien für mehr Barrierefreiheit ▸Sei Emphatisch ▸ Achte auf "Best-Practice" in jedem Bereich, an dem du beteiligt bist ▸ Lasse den Benutzer*innen die Wahl, keine Bevormundung ▸ Design ist keine Kunst. Design folgt der Funktion! ▸ Integriere Barrierefreiheit von Anfang an! ▸ Trainiere deine „Accessibility-Thinking-Muscle“ ▸ Frag nach bei der Benutzergruppe
- 46.
- 47. Weitere Ressourcen ▸ A11yPosters and more: gov.uk https:// accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on- designing-for-accessibility/ ▸ WordPress A11y Handbook: https://make.wordpress.org/ accessibility/handbook/ ▸ WordPress Dev Handbook: developer.wordpress.org/ coding-standards/wordpress-coding-standards/accessibility/ ▸ "Accessibility for everyone“ - Laura Kalbag ▸ Accessibility Checklists: wp1x1.de/checklists-for-accessibility
- 48.
- 49.