SlideShare ist ein Scribd-Unternehmen logo
Digitale Barrierefreiheit
für NGO’s
Über mich
▸ Maja Benke
▸ Webdesignerin aus Berlin
▸ UX und Accessibility
begeistert
▸ WordPress Community
Mitglied seit 2015
▸ @MajaBenke
Themen
▸ Was bedeutet Barrierefreiheit
▸ Rechtliche Grundlagen Deutschland und Europa
▸ Was macht eine barrierefreie Webseite aus
▸ Wie kann man die Webseiten auf Barrierefreiheit
testen?
Was bedeutet Barrierefreiheit
„Barrierefreie Webseiten sind von 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
Warum Barrierefreiheit wichtig ist
▸ 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
Benutzergruppen die barrierefreie Webseiten
benötigen
Physische
Kognitive Auditive Visuelle
+ temporäre, situationsabhängige Beeinträchtigungen
Icons von Freepik: freepik.com auf flaticon.com
Jede fünfte Person benötigt eine
barrierefreie Website
Rechtliche Rahmenbedingungen
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
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
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)
„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
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
Was macht eine barrierefreie
Webseite aus
Was macht eine barrierefreie
Webseite aus
Design
Inhalt
Code
Planung einer
barrierefreien Webseite
Planung
▸ Barrierefreiheit by Design! 
▸ 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
Bestehende Webseite barrierefrei
umbauen / erhalten
Barrierefreies
Design
Design - Häufige Fehler
▸ 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
Design zerstört Funktionalität
Information nur über Farbe
Links sind nicht unterstrichen Graphen in Schwarz / Weiß nicht
erkennbar
Design
▸ Verstehe dein Design 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
Barrierefreies Design
▸ Eindeutiges Layout
▸ 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
▸ wp1x1.de/checklists-for-
accessibility
Barrierefreie
Inhalte
Inhalte - Häufige Fehler
▸ Ü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
Tipps für barrierefreie Inhalte
▸ 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
Strukturierter Text
Überschriften Hierarchie
Tipps für barrierefreie Inhalte
▸ 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!
Untertitel in YouTube
youtube.com/watch?v=P2YBkZCRTGA
▸ wp1x1.de/checklists-for-
accessibility
Was ist nur gut 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
Wie kann man Webseiten auf
Barrierefreiheit testen?
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
Wie kann man die 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?
Wie kann man die 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?
Wie kann man die 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?
Wie kann man die 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?
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)
Und jetzt?!?
Erste Schritte für die 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
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
Ressourcen
Weitere Ressourcen
▸ A11y Posters 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
Barrierefreie Webseite
Fragen?
Twitter @MajaBenke

Webseite: webstyle4you.com

Weitere ähnliche Inhalte

Ähnlich wie Digtale Barrierefreiheit für NGO's

A11y ist für alle da - auch für Dich!
A11y ist für alle da - auch für Dich!A11y ist für alle da - auch für Dich!
A11y ist für alle da - auch für Dich!
NilsChr
 
Deutsche Übersetzung der WCAG 2.0
Deutsche Übersetzung der WCAG 2.0Deutsche Übersetzung der WCAG 2.0
Deutsche Übersetzung der WCAG 2.0
Tomas Caspers
 
Erfolge erzielen in Anti-Content-Arbeitsumfeldern
Erfolge erzielen in Anti-Content-ArbeitsumfeldernErfolge erzielen in Anti-Content-Arbeitsumfeldern
Erfolge erzielen in Anti-Content-Arbeitsumfeldern
Diane Sieger
 
Einfach barrierefrei
Einfach barrierefreiEinfach barrierefrei
Einfach barrierefrei
Domingos de Oliveira
 
Vortrag Dim Bernecker Dresden 12 06 08
Vortrag Dim Bernecker Dresden 12 06 08Vortrag Dim Bernecker Dresden 12 06 08
Vortrag Dim Bernecker Dresden 12 06 08
Deutsches Institut für Marketing
 
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
eMBIS GmbH - Akademie für Online Marketing
 
Vortrag BOA Düsseldorf 2008
Vortrag BOA Düsseldorf 2008Vortrag BOA Düsseldorf 2008
Vortrag BOA Düsseldorf 2008
Nils Pooker
 
eTourismus
eTourismuseTourismus
eTourismus
Ed Wohlfahrt
 
QR/Webapp/Mobile Marketing
QR/Webapp/Mobile MarketingQR/Webapp/Mobile Marketing
QR/Webapp/Mobile Marketing
qr-scan
 

Ähnlich wie Digtale Barrierefreiheit für NGO's (9)

A11y ist für alle da - auch für Dich!
A11y ist für alle da - auch für Dich!A11y ist für alle da - auch für Dich!
A11y ist für alle da - auch für Dich!
 
Deutsche Übersetzung der WCAG 2.0
Deutsche Übersetzung der WCAG 2.0Deutsche Übersetzung der WCAG 2.0
Deutsche Übersetzung der WCAG 2.0
 
Erfolge erzielen in Anti-Content-Arbeitsumfeldern
Erfolge erzielen in Anti-Content-ArbeitsumfeldernErfolge erzielen in Anti-Content-Arbeitsumfeldern
Erfolge erzielen in Anti-Content-Arbeitsumfeldern
 
Einfach barrierefrei
Einfach barrierefreiEinfach barrierefrei
Einfach barrierefrei
 
Vortrag Dim Bernecker Dresden 12 06 08
Vortrag Dim Bernecker Dresden 12 06 08Vortrag Dim Bernecker Dresden 12 06 08
Vortrag Dim Bernecker Dresden 12 06 08
 
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
 
Vortrag BOA Düsseldorf 2008
Vortrag BOA Düsseldorf 2008Vortrag BOA Düsseldorf 2008
Vortrag BOA Düsseldorf 2008
 
eTourismus
eTourismuseTourismus
eTourismus
 
QR/Webapp/Mobile Marketing
QR/Webapp/Mobile MarketingQR/Webapp/Mobile Marketing
QR/Webapp/Mobile Marketing
 

Digtale Barrierefreiheit für NGO's

  • 2. Über mich ▸ Maja Benke ▸ Webdesignerin aus Berlin ▸ UX und Accessibility begeistert ▸ WordPress Community Mitglied seit 2015 ▸ @MajaBenke
  • 3. Themen ▸ Was bedeutet Barrierefreiheit ▸ Rechtliche Grundlagen Deutschland und Europa ▸ Was macht eine barrierefreie Webseite aus ▸ Wie kann man die Webseiten auf Barrierefreiheit testen?
  • 5. „Barrierefreie Webseiten sind von 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 wichtig ist ▸ 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 barrierefreie Webseiten benötigen Physische Kognitive Auditive Visuelle + temporäre, situationsabhängige Beeinträchtigungen Icons von Freepik: freepik.com auf flaticon.com
  • 8. Jede fünfte Person benötigt eine barrierefreie Website
  • 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 eine barrierefreie Webseite aus
  • 16. Was macht eine barrierefreie Webseite aus Design Inhalt Code
  • 18. Planung ▸ Barrierefreiheit by Design!  ▸ 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
  • 21. Design - Häufige Fehler ▸ 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
  • 23. Information nur über Farbe Links sind nicht unterstrichen Graphen in Schwarz / Weiß nicht erkennbar
  • 24. Design ▸ Verstehe dein Design 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 ▸ Eindeutiges Layout ▸ 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
  • 28. Inhalte - Häufige Fehler ▸ Ü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 barrierefreie Inhalte ▸ 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
  • 32. Tipps für barrierefreie Inhalte ▸ 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!
  • 35. Was ist nur gut 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 man Webseiten 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 man die 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 man die 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 man die 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 man die 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)
  • 44. Erste Schritte für die 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
  • 47. Weitere Ressourcen ▸ A11y Posters 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