SlideShare ist ein Scribd-Unternehmen logo
1 von 58
Accessibility 1x1
@wp1x1 #accessibility1WordCamp Cologne 2017
Über mich
• Maja Benke
• Webdesignerin + Bloggerin auf WP1x1.de
• WordPress Contributor im Bereich 

Design & Accessibility
• Twitter: @WP1x1
2 @wp1x1 #accessibilityWordCamp Cologne 2017
@wp1x1 #accessibilityWordCamp Cologne 2017
1. Einführung
2. Warum Accessibility wichtig ist
3. A11y für Content Manager
4. A11y für Webdesigner
5. A11y für Entwickler
6. Strategien für barrierefreie Webseiten
3
Gliederung
Einführung Barrierefreiheit
• Barrierefreiheit = Accessibility
• Kurz A11y
• Zugang für alle erleichtern
• Online und Offline
4 @wp1x1 #accessibilityWordCamp Cologne 2017
Für wen?
5 @wp1x1 #accessibilityWordCamp Cologne 2017
Statistiken
6 @wp1x1 #accessibilityWordCamp Cologne 2017
Statistiken
2015
• 81.69 Mio Einwohner in Deutschland
Davon:
• Schwerstbehinderung: 7.6 Millionen —> 9.3%
• Farbenblindheit: 3.24 Millionen Männer & 168 Tausend Frauen
—> 8% der Männer und 0,4% der Frauen
• Legasthenie und Dyskalkulie: 3.24 Mio Menschen —> 4%
21.7% der Bevölkerung = Jeder 5 Mensch
7 @wp1x1 #accessibilityWordCamp Cologne 2017
Hinzu kommen:
8 @wp1x1 #accessibilityWordCamp Cologne 2017
Kurzzeitige Einschränkungen
• Unfall (Arm gebrochen, …)
• Krankheit (Augeninfektion, Ohreninfektionen, …)
• Alltag
• Brille verlegt
• essen vorm Laptop
• Sonnenlicht
• Keine Kopfhörer zur Hand
• Arbeiten im Großraumbüro
• fremde Sprachen
• fremder Laptop
• Ablenkungen oder Stress
9 @wp1x1 #accessibilityWordCamp Cologne 2017
Barrierefreiheit
ist für alle!
More: Talk „Selfish Accessibility“ from Adrian Rosselli

—> https://wordpress.tv/2017/06/21/adrian-roselli-selfish-
accessibility-3/
10 @wp1x1 #accessibilityWordCamp Cologne 2017
Accessibility für 

Content Manager
11 @wp1x1 #accessibilityWordCamp Cologne 2017WordCamp Cologne 2017
Content Formate
• Text
• Bilder und Grafiken
• Videos
• Audio
12 @wp1x1 #accessibilityWordCamp Cologne 2017
Text
13 @wp1x1 #accessibilityWordCamp Cologne 2017
Text
Text ist super für:
• schnell konsumieren und überfliegen
• zum nachlesen von Informationen
• geeignet zum scannen
• blinde und taube Menschen
14 @wp1x1 #accessibilityWordCamp Cologne 2017
Text
Text ist schlecht für:
• Legastheniker
• Lesefaule Menschen
• schlecht strukturierte Texte sind schlecht für (fast)
jeden
15 @wp1x1 #accessibilityWordCamp Cologne 2017
Text-Struktur
Worst Case
16 @wp1x1 #accessibilityWordCamp Cologne 2017
Text-Struktur
Ein bisschen besser
B
Aber:
wichtigste Info 

versteckt im Text
17 @wp1x1 #accessibilityWordCamp Cologne 2017
Text-Struktur
Do
Wichtigste Info

zu Beginn
18 @wp1x1 #accessibilityWordCamp Cologne 2017
Text-Struktur
• verwende semantische und eindeutige Überschriften um Text zu
strukturieren & aufzulockern
• Überspringe keine Überschriften-Hierarchie
• verwende Listen und andere Elemente zum auflockern
• Machen deinen Text „scannbar“
• Wichtige Information sollten am Anfang stehen und leicht zugänglich sein
• Halte es kurz und knackig
• zentriere deinen Text links (kein Blocksatz)
•Versuche auf italic und bold zu verzichten. Es unterbricht den
Leseprozess für Legastheniker
19 @wp1x1 #accessibilityWordCamp Cologne 2017
Links
• Beschrifte deine Links vernünftig (kein „Klick hier“).
Besser „Lade unser Programm herunter“
• Kein „Öffnen im neuen Tab“ als Default
• Unterstreiche deine Links im Fließtext (alternative:
nutze „—>“)
20 @wp1x1 #accessibilityWordCamp Cologne 2017
Bilder und Grafiken
21 @wp1x1 #accessibilityWordCamp Cologne 2017
Bilder und Grafiken
Bilder und Grafiken sind super für:
• Komplexe Sachverhalte schnell visualisieren
• Für Legastheniker
• für Lese-Faule
• schnellen Auffinden von Informationen
• für taube Menschen
22 @wp1x1 #accessibilityWordCamp Cologne 2017
Bilder und Grafiken
Bilder und Grafiken sind schlecht für:
• Blinde Menschen
• zum Teil auch für Farbenblinde Menschen
• bei schlechten Kontrasten —> Helles Sonnenlicht,
Beamer,…
23 @wp1x1 #accessibilityWordCamp Cologne 2017
Bilder und Grafiken
• Bilder und Grafiken als Ergänzung zu Text verwenden
• Screenshots sind super bei Tutorials (ein Bild sagt mehr als
tausend Worte)
• Alt-Text festlegen für Bilder und Grafiken mit
Informationsgehalt (nicht rein dekorativ)
• stelle sicher, dass man Grafiken auch in schwarz/weiß
versteht
• Slider nicht automatisch starten lassen
• Twitter hat ebenfalls diese Option unter „Barrierefreiheit“
24 @wp1x1 #accessibilityWordCamp Cologne 2017
Videos
25 @wp1x1 #accessibilityWordCamp Cologne 2017
Videos
Videos sind super für:
• Komplexe Sachverhalte schnell visualisieren
• Tutorials
• Für Legastheniker
• für Lese-Faule
• Taube Menschen (wenn Untertitel vorhanden)
26 @wp1x1 #accessibilityWordCamp Cologne 2017
Videos
Videos sind schlecht für:
• Blinde Menschen
• Taube Menschen (wenn Untertitel fehlt)
• Menschen ohne Kopfhörer an öffentlichen Orten,
Großraumbüros, …(wenn Untertitel fehlt)
27 @wp1x1 #accessibilityWordCamp Cologne 2017
Videos
• Untertitel hinzufügen (geht bei Youtube automatisch)
• Dadurch wird Content übersetzbar = mehr
Reichweite
• wichtige Inhalte und Eckpunkte zusätzlich in
Textform bereitstellen (ebenfalls Grafiken/
Screenshots, wenn es sich anbietet)
• Videos nicht automatisch abspielen lassen
28 @wp1x1 #accessibilityWordCamp Cologne 2017
Audio
29 @wp1x1 #accessibilityWordCamp Cologne 2017
Audio
Audios sind super für:
• Für Legastheniker
• für Lese-Faule
• Blinde Menschen
• Nebenbeihören im Alltag
30 @wp1x1 #accessibilityWordCamp Cologne 2017
Audio
Audios sind schlecht für:
• Taube und Hörgeschädigte Menschen
• schnell Informationen finden
• Menschen ohne Kopfhörer an öffentlichen Orten,
Großraumbüros, …
31 @wp1x1 #accessibilityWordCamp Cologne 2017
Audio
• Eckdaten und Sprungmarken in Shownotes
• wichtige Information zusätzlich als Textform und/
oder Grafiken bereitstellen
• Audio nicht automatisch abspielen lassen
32 @wp1x1 #accessibilityWordCamp Cologne 2017
Content Strategie planen
• unterschiedliche Contenformate von Anfang an
einplanen
• einen Mix aus Text, Bilder, Grafiken, Videos, Audios
anbieten
• Unterschiedliche Menschen bevorzugen
unterschiedlichen Formate
• Unterschiedliche Situationen erfordern
unterschiedliche Formate
33 @wp1x1 #accessibilityWordCamp Cologne 2017
Accessibility für 

Webdesigner
34 @wp1x1 #accessibilityWordCamp Cologne 2017WordCamp Cologne 2017
Farbe + Kontrast
Kontrast zwischen Schrift und Hintergrund sollte hoch
genug sein
Don't Do

35 @wp1x1 #accessibilityWordCamp Cologne 2017
Farbe + Kontrast
• Schriften nicht zu dünn machen
„Internet is becoming unreadable because of a
trend towards lighter, thinner fonts“ - Telegraph
—> http://www.telegraph.co.uk/science/2016/10/23/
internet-is-becoming-unreadable-because-of-a-trend-
towards-light/
36 @wp1x1 #accessibilityWordCamp Cologne 2017
Farbe + Kontrast
Unterstreiche deine Links!!!
Don’t Do
37 @wp1x1 #accessibilityWordCamp Cologne 2017
Schriftarten und -größen
Sei sparsam mit uppercase
Don’t Do
38 @wp1x1 #accessibilityWordCamp Cologne 2017
Text
• verwende eine einfach zu lesende Schrift
• Schriftgröße sollte groß genug sein
Sonst können es User vielleicht nicht lesen
• Verwende genug line-hight für ein besseres
Leseerlebnis
•Verzichte auf Blocksatz
39 @wp1x1 #accessibilityWordCamp Cologne 2017
Farbe + Kontrast
Farbe nicht als einziger Indikator für Infos verwenden
Don’t Do
40 @wp1x1 #accessibilityWordCamp Cologne 2017
Farbe + Kontrast
..Farbenblinden entgehen sonst Informationen



Don’t Do
41 @wp1x1 #accessibilityWordCamp Cologne 2017
Farbe + Kontrast
Farbwahl mit unterschiedlichen Grauschattierungen



Don’t Do
42 @wp1x1 #accessibilityWordCamp Cologne 2017
Animationen
• vermeide blinkende, Hüpfende, rotierende Elemente
- diese können sehr verwirrend und ablenkend sein
• Slider nicht automatisch rotieren lassen
43 @wp1x1 #accessibilityWordCamp Cologne 2017
Zusammenfassung
• Stelle sicher, dass deine Webseite auch in schwarz und weiß
funktioniert
• Verwende eine einfach zu lesende Schrift
• Schriftgröße sollte groß genug sein
Sonst kann es schwer werden sie zu lesen
• line-height sollte hoch genug sein
• Unterstreiche alle Links im Fließtext
• versuche auf italic und bold zu verzichten - es erschwert das
Lesen für Legasthiner
44 @wp1x1 #accessibilityWordCamp Cologne 2017
Accessibility für 

Webentwickler
45 @wp1x1 #accessibilityWordCamp Cologne 2017WordCamp Cologne 2017
semantic HTML
• Vergebe immer den am Besten passenden Tag für
Elemente
• <p> für Fließtext, <address> für Adresse, <time> für
Zeiten und Datum. <a> für eine URL’s, <button> für
Buttons die Aktionen triggern (z.B. Dropdown Menu)
• Tabellen für Daten, nicht fürs Layout
• verwende. <header>, <nav>, <main> (nur 1x pro
Seite), sowie <aside>, and <footer>
46 @wp1x1 #accessibilityWordCamp Cologne 2017
Links
• Vermeide das „target Attribute“ in anchor tags
• Stelle :focus and :active zur Verfügung
• öffne es nicht bei default im neuen Tab
47 @wp1x1 #accessibilityWordCamp Cologne 2017
Menü
• Untermenüpunkte sollen navigierbar sein über
Tastatur
• gutes Beispiel.: Theme TwentySeventeen
48 @wp1x1 #accessibilityWordCamp Cologne 2017
Formulare
• <label> element für alle Formularfelder
Bezeichnungen
• Placeholder Text gerne zusätzlich (nicht gleiche
Bezeichnung wie Label und niemals als Ersatz fürs
Label)
• vergebe kein tabindex attribute - die Tab-
Reihenfolge geht sonst durcheinander

(in wenigen Fällen ist tabindex=“-1“ in Ordnung)
49 @wp1x1 #accessibilityWordCamp Cologne 2017
Shortcodes
• lerne Shortcodes
• teste deine Webseite - versuche sie nur über die
Tastatur zu bedienen
50 @wp1x1 #accessibilityWordCamp Cologne 2017
Strategien für
barrierefreie Webseiten
51 @wp1x1 #accessibilityWordCamp Cologne 2017
Strategien für barrierefreie
Webseiten
1. Form follows the function!
2. Integriere Accessibility von Anfang an in der
Projektplanung - Entwicklung, Design, Content Marketing
3. trainiere deinen „Accessibility-Thinking-Muskel“
4. verwende immer „best-practice“ in jedem Bereich in dem
du mitarbeitest
5. Sei auf dem neusten Stand!
6. Sei emphatisch!
52 @wp1x1 #accessibilityWordCamp Cologne 2017
Tools + Ressourcen
53 @wp1x1 #accessibilityWordCamp Cologne 2017
Tools
Contrast Checker:
• http://webaim.org/resources/contrastchecker/
• http://contrastchecker.com/
• https://itunes.apple.com/us/app/sim-daltonism/
id693112260?mt=12
• http://wave.webaim.org/ - Scans your site for problems
(inclusive explanation)
• More Tools: A11y-Team-Handbook —> Tools

https://make.wordpress.org/accessibility/handbook/testing-
and-development-tools/other-plugins-to-improve-
accessibility/
 
54 @wp1x1 #accessibilityWordCamp Cologne 2017
Ressources
WordPress A11y-Handbook

—> https://make.wordpress.org/core/handbook/best-
practices/coding-standards/accessibility-coding-standards/
https://wordpress.tv/2017/06/21/adrian-roselli-selfish-
accessibility-3/


UK Government Webseite

—> https://www.gov.uk/help/accessibility

—> https://accessibility.blog.gov.uk/2016/09/02/dos-and-
donts-on-designing-for-accessibility/ 

55 @wp1x1 #accessibilityWordCamp Cologne 2017
Quellen Statistik
https://www.destatis.de/DE/PresseService/Presse/
Pressemitteilungen/2016/10/PD16_381_227.html
http://www.sozialpolitik-aktuell.de/tl_files/sozialpolitik-
aktuell/_Politikfelder/Bevoelkerung/Datensammlung/
PDF-Dateien/abbVIII3.pdf
http://www.legasthenie-lvl-bw.de/Fs0faq.htm
56 @wp1x1 #accessibilityWordCamp Cologne 2017
Danke
57 @wp1x1 #accessibilityWordCamp Cologne 2017
Fragen?
58 @wp1x1 #accessibilityWordCamp Cologne 2017

Weitere ähnliche Inhalte

Ähnlich wie Accessibility1x1

Barrierefreiheit – Internet fuer alle
Barrierefreiheit – Internet fuer alleBarrierefreiheit – Internet fuer alle
Barrierefreiheit – Internet fuer alleElisabeth Hölzl
 
Was Sie schon immer über barrierefreie PDFs wissen wollten
Was Sie schon immer über barrierefreie PDFs wissen wolltenWas Sie schon immer über barrierefreie PDFs wissen wollten
Was Sie schon immer über barrierefreie PDFs wissen wolltenMarkus Erle
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0thoemmes
 
Design Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und PflegeDesign Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und PflegeWolf Brüning
 
Mehrsprachigkeit und semantische Technologien
Mehrsprachigkeit und semantische TechnologienMehrsprachigkeit und semantische Technologien
Mehrsprachigkeit und semantische TechnologienGeorg Rehm
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Andreas Wissel
 
Custom Post Types mit PODS.io
Custom Post Types mit PODS.ioCustom Post Types mit PODS.io
Custom Post Types mit PODS.iofrankstaude
 
Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)Paul Bakaus
 
Veranstaltungsreihe WEBverständlich: Webseitenerstellung
Veranstaltungsreihe WEBverständlich: WebseitenerstellungVeranstaltungsreihe WEBverständlich: Webseitenerstellung
Veranstaltungsreihe WEBverständlich: WebseitenerstellungeBusiness-Lotse Potsdam
 
Mehrsprachige Webseiten mit Drupal
Mehrsprachige Webseiten mit DrupalMehrsprachige Webseiten mit Drupal
Mehrsprachige Webseiten mit DrupalNETNODE AG
 
Gratis-Webinar HTML5 und CSS3 - Eduvision Ausbildungen
Gratis-Webinar HTML5 und CSS3 - Eduvision AusbildungenGratis-Webinar HTML5 und CSS3 - Eduvision Ausbildungen
Gratis-Webinar HTML5 und CSS3 - Eduvision AusbildungenEduvision Ausbildungen
 
Mythos und Wahrheit: Wikis für die Technische Dokumentation at tekom-Regional...
Mythos und Wahrheit: Wikis für die Technische Dokumentation at tekom-Regional...Mythos und Wahrheit: Wikis für die Technische Dokumentation at tekom-Regional...
Mythos und Wahrheit: Wikis für die Technische Dokumentation at tekom-Regional...K15t
 
design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfAndreas Wissel
 
design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfAndreas Wissel
 
Desktop Publishing war 1985. Jetzt geht mehr!
Desktop Publishing war 1985. Jetzt geht mehr!Desktop Publishing war 1985. Jetzt geht mehr!
Desktop Publishing war 1985. Jetzt geht mehr!Haeme Ulrich
 
Perl@Hamburg – meine Sicht als Team-Leiter
Perl@Hamburg – meine Sicht als Team-LeiterPerl@Hamburg – meine Sicht als Team-Leiter
Perl@Hamburg – meine Sicht als Team-LeiterGregor Goldbach
 
AG Softwaretechnik
AG SoftwaretechnikAG Softwaretechnik
AG SoftwaretechnikRoland M
 
Suche war gestern – Mit Facettierter Navigation schneller zum Ziel
Suche war gestern – Mit Facettierter Navigation schneller zum ZielSuche war gestern – Mit Facettierter Navigation schneller zum Ziel
Suche war gestern – Mit Facettierter Navigation schneller zum Zielfrankstaude
 

Ähnlich wie Accessibility1x1 (20)

Barrierefreiheit – Internet fuer alle
Barrierefreiheit – Internet fuer alleBarrierefreiheit – Internet fuer alle
Barrierefreiheit – Internet fuer alle
 
Was Sie schon immer über barrierefreie PDFs wissen wollten
Was Sie schon immer über barrierefreie PDFs wissen wolltenWas Sie schon immer über barrierefreie PDFs wissen wollten
Was Sie schon immer über barrierefreie PDFs wissen wollten
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
 
Design Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und PflegeDesign Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und Pflege
 
Mehrsprachigkeit und semantische Technologien
Mehrsprachigkeit und semantische TechnologienMehrsprachigkeit und semantische Technologien
Mehrsprachigkeit und semantische Technologien
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
Custom Post Types mit PODS.io
Custom Post Types mit PODS.ioCustom Post Types mit PODS.io
Custom Post Types mit PODS.io
 
Content Lifecycle Management
Content Lifecycle ManagementContent Lifecycle Management
Content Lifecycle Management
 
Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)
 
Veranstaltungsreihe WEBverständlich: Webseitenerstellung
Veranstaltungsreihe WEBverständlich: WebseitenerstellungVeranstaltungsreihe WEBverständlich: Webseitenerstellung
Veranstaltungsreihe WEBverständlich: Webseitenerstellung
 
Mehrsprachige Webseiten mit Drupal
Mehrsprachige Webseiten mit DrupalMehrsprachige Webseiten mit Drupal
Mehrsprachige Webseiten mit Drupal
 
Gratis-Webinar HTML5 und CSS3 - Eduvision Ausbildungen
Gratis-Webinar HTML5 und CSS3 - Eduvision AusbildungenGratis-Webinar HTML5 und CSS3 - Eduvision Ausbildungen
Gratis-Webinar HTML5 und CSS3 - Eduvision Ausbildungen
 
Mythos und Wahrheit: Wikis für die Technische Dokumentation at tekom-Regional...
Mythos und Wahrheit: Wikis für die Technische Dokumentation at tekom-Regional...Mythos und Wahrheit: Wikis für die Technische Dokumentation at tekom-Regional...
Mythos und Wahrheit: Wikis für die Technische Dokumentation at tekom-Regional...
 
design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdf
 
design-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdfdesign-systems-storybook-jsdays-2021.pdf
design-systems-storybook-jsdays-2021.pdf
 
Desktop Publishing war 1985. Jetzt geht mehr!
Desktop Publishing war 1985. Jetzt geht mehr!Desktop Publishing war 1985. Jetzt geht mehr!
Desktop Publishing war 1985. Jetzt geht mehr!
 
Perl@Hamburg – meine Sicht als Team-Leiter
Perl@Hamburg – meine Sicht als Team-LeiterPerl@Hamburg – meine Sicht als Team-Leiter
Perl@Hamburg – meine Sicht als Team-Leiter
 
AG Softwaretechnik
AG SoftwaretechnikAG Softwaretechnik
AG Softwaretechnik
 
Suche war gestern – Mit Facettierter Navigation schneller zum Ziel
Suche war gestern – Mit Facettierter Navigation schneller zum ZielSuche war gestern – Mit Facettierter Navigation schneller zum Ziel
Suche war gestern – Mit Facettierter Navigation schneller zum Ziel
 
CMS Sicherheit
CMS SicherheitCMS Sicherheit
CMS Sicherheit
 

Accessibility1x1

  • 2. Über mich • Maja Benke • Webdesignerin + Bloggerin auf WP1x1.de • WordPress Contributor im Bereich 
 Design & Accessibility • Twitter: @WP1x1 2 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 3. @wp1x1 #accessibilityWordCamp Cologne 2017 1. Einführung 2. Warum Accessibility wichtig ist 3. A11y für Content Manager 4. A11y für Webdesigner 5. A11y für Entwickler 6. Strategien für barrierefreie Webseiten 3 Gliederung
  • 4. Einführung Barrierefreiheit • Barrierefreiheit = Accessibility • Kurz A11y • Zugang für alle erleichtern • Online und Offline 4 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 5. Für wen? 5 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 7. Statistiken 2015 • 81.69 Mio Einwohner in Deutschland Davon: • Schwerstbehinderung: 7.6 Millionen —> 9.3% • Farbenblindheit: 3.24 Millionen Männer & 168 Tausend Frauen —> 8% der Männer und 0,4% der Frauen • Legasthenie und Dyskalkulie: 3.24 Mio Menschen —> 4% 21.7% der Bevölkerung = Jeder 5 Mensch 7 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 8. Hinzu kommen: 8 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 9. Kurzzeitige Einschränkungen • Unfall (Arm gebrochen, …) • Krankheit (Augeninfektion, Ohreninfektionen, …) • Alltag • Brille verlegt • essen vorm Laptop • Sonnenlicht • Keine Kopfhörer zur Hand • Arbeiten im Großraumbüro • fremde Sprachen • fremder Laptop • Ablenkungen oder Stress 9 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 10. Barrierefreiheit ist für alle! More: Talk „Selfish Accessibility“ from Adrian Rosselli
 —> https://wordpress.tv/2017/06/21/adrian-roselli-selfish- accessibility-3/ 10 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 11. Accessibility für 
 Content Manager 11 @wp1x1 #accessibilityWordCamp Cologne 2017WordCamp Cologne 2017
  • 12. Content Formate • Text • Bilder und Grafiken • Videos • Audio 12 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 14. Text Text ist super für: • schnell konsumieren und überfliegen • zum nachlesen von Informationen • geeignet zum scannen • blinde und taube Menschen 14 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 15. Text Text ist schlecht für: • Legastheniker • Lesefaule Menschen • schlecht strukturierte Texte sind schlecht für (fast) jeden 15 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 16. Text-Struktur Worst Case 16 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 17. Text-Struktur Ein bisschen besser B Aber: wichtigste Info 
 versteckt im Text 17 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 18. Text-Struktur Do Wichtigste Info
 zu Beginn 18 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 19. Text-Struktur • verwende semantische und eindeutige Überschriften um Text zu strukturieren & aufzulockern • Überspringe keine Überschriften-Hierarchie • verwende Listen und andere Elemente zum auflockern • Machen deinen Text „scannbar“ • Wichtige Information sollten am Anfang stehen und leicht zugänglich sein • Halte es kurz und knackig • zentriere deinen Text links (kein Blocksatz) •Versuche auf italic und bold zu verzichten. Es unterbricht den Leseprozess für Legastheniker 19 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 20. Links • Beschrifte deine Links vernünftig (kein „Klick hier“). Besser „Lade unser Programm herunter“ • Kein „Öffnen im neuen Tab“ als Default • Unterstreiche deine Links im Fließtext (alternative: nutze „—>“) 20 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 21. Bilder und Grafiken 21 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 22. Bilder und Grafiken Bilder und Grafiken sind super für: • Komplexe Sachverhalte schnell visualisieren • Für Legastheniker • für Lese-Faule • schnellen Auffinden von Informationen • für taube Menschen 22 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 23. Bilder und Grafiken Bilder und Grafiken sind schlecht für: • Blinde Menschen • zum Teil auch für Farbenblinde Menschen • bei schlechten Kontrasten —> Helles Sonnenlicht, Beamer,… 23 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 24. Bilder und Grafiken • Bilder und Grafiken als Ergänzung zu Text verwenden • Screenshots sind super bei Tutorials (ein Bild sagt mehr als tausend Worte) • Alt-Text festlegen für Bilder und Grafiken mit Informationsgehalt (nicht rein dekorativ) • stelle sicher, dass man Grafiken auch in schwarz/weiß versteht • Slider nicht automatisch starten lassen • Twitter hat ebenfalls diese Option unter „Barrierefreiheit“ 24 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 26. Videos Videos sind super für: • Komplexe Sachverhalte schnell visualisieren • Tutorials • Für Legastheniker • für Lese-Faule • Taube Menschen (wenn Untertitel vorhanden) 26 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 27. Videos Videos sind schlecht für: • Blinde Menschen • Taube Menschen (wenn Untertitel fehlt) • Menschen ohne Kopfhörer an öffentlichen Orten, Großraumbüros, …(wenn Untertitel fehlt) 27 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 28. Videos • Untertitel hinzufügen (geht bei Youtube automatisch) • Dadurch wird Content übersetzbar = mehr Reichweite • wichtige Inhalte und Eckpunkte zusätzlich in Textform bereitstellen (ebenfalls Grafiken/ Screenshots, wenn es sich anbietet) • Videos nicht automatisch abspielen lassen 28 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 30. Audio Audios sind super für: • Für Legastheniker • für Lese-Faule • Blinde Menschen • Nebenbeihören im Alltag 30 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 31. Audio Audios sind schlecht für: • Taube und Hörgeschädigte Menschen • schnell Informationen finden • Menschen ohne Kopfhörer an öffentlichen Orten, Großraumbüros, … 31 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 32. Audio • Eckdaten und Sprungmarken in Shownotes • wichtige Information zusätzlich als Textform und/ oder Grafiken bereitstellen • Audio nicht automatisch abspielen lassen 32 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 33. Content Strategie planen • unterschiedliche Contenformate von Anfang an einplanen • einen Mix aus Text, Bilder, Grafiken, Videos, Audios anbieten • Unterschiedliche Menschen bevorzugen unterschiedlichen Formate • Unterschiedliche Situationen erfordern unterschiedliche Formate 33 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 34. Accessibility für 
 Webdesigner 34 @wp1x1 #accessibilityWordCamp Cologne 2017WordCamp Cologne 2017
  • 35. Farbe + Kontrast Kontrast zwischen Schrift und Hintergrund sollte hoch genug sein Don't Do
 35 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 36. Farbe + Kontrast • Schriften nicht zu dünn machen „Internet is becoming unreadable because of a trend towards lighter, thinner fonts“ - Telegraph —> http://www.telegraph.co.uk/science/2016/10/23/ internet-is-becoming-unreadable-because-of-a-trend- towards-light/ 36 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 37. Farbe + Kontrast Unterstreiche deine Links!!! Don’t Do 37 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 38. Schriftarten und -größen Sei sparsam mit uppercase Don’t Do 38 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 39. Text • verwende eine einfach zu lesende Schrift • Schriftgröße sollte groß genug sein Sonst können es User vielleicht nicht lesen • Verwende genug line-hight für ein besseres Leseerlebnis •Verzichte auf Blocksatz 39 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 40. Farbe + Kontrast Farbe nicht als einziger Indikator für Infos verwenden Don’t Do 40 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 41. Farbe + Kontrast ..Farbenblinden entgehen sonst Informationen
 
 Don’t Do 41 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 42. Farbe + Kontrast Farbwahl mit unterschiedlichen Grauschattierungen
 
 Don’t Do 42 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 43. Animationen • vermeide blinkende, Hüpfende, rotierende Elemente - diese können sehr verwirrend und ablenkend sein • Slider nicht automatisch rotieren lassen 43 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 44. Zusammenfassung • Stelle sicher, dass deine Webseite auch in schwarz und weiß funktioniert • Verwende eine einfach zu lesende Schrift • Schriftgröße sollte groß genug sein Sonst kann es schwer werden sie zu lesen • line-height sollte hoch genug sein • Unterstreiche alle Links im Fließtext • versuche auf italic und bold zu verzichten - es erschwert das Lesen für Legasthiner 44 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 45. Accessibility für 
 Webentwickler 45 @wp1x1 #accessibilityWordCamp Cologne 2017WordCamp Cologne 2017
  • 46. semantic HTML • Vergebe immer den am Besten passenden Tag für Elemente • <p> für Fließtext, <address> für Adresse, <time> für Zeiten und Datum. <a> für eine URL’s, <button> für Buttons die Aktionen triggern (z.B. Dropdown Menu) • Tabellen für Daten, nicht fürs Layout • verwende. <header>, <nav>, <main> (nur 1x pro Seite), sowie <aside>, and <footer> 46 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 47. Links • Vermeide das „target Attribute“ in anchor tags • Stelle :focus and :active zur Verfügung • öffne es nicht bei default im neuen Tab 47 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 48. Menü • Untermenüpunkte sollen navigierbar sein über Tastatur • gutes Beispiel.: Theme TwentySeventeen 48 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 49. Formulare • <label> element für alle Formularfelder Bezeichnungen • Placeholder Text gerne zusätzlich (nicht gleiche Bezeichnung wie Label und niemals als Ersatz fürs Label) • vergebe kein tabindex attribute - die Tab- Reihenfolge geht sonst durcheinander
 (in wenigen Fällen ist tabindex=“-1“ in Ordnung) 49 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 50. Shortcodes • lerne Shortcodes • teste deine Webseite - versuche sie nur über die Tastatur zu bedienen 50 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 51. Strategien für barrierefreie Webseiten 51 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 52. Strategien für barrierefreie Webseiten 1. Form follows the function! 2. Integriere Accessibility von Anfang an in der Projektplanung - Entwicklung, Design, Content Marketing 3. trainiere deinen „Accessibility-Thinking-Muskel“ 4. verwende immer „best-practice“ in jedem Bereich in dem du mitarbeitest 5. Sei auf dem neusten Stand! 6. Sei emphatisch! 52 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 53. Tools + Ressourcen 53 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 54. Tools Contrast Checker: • http://webaim.org/resources/contrastchecker/ • http://contrastchecker.com/ • https://itunes.apple.com/us/app/sim-daltonism/ id693112260?mt=12 • http://wave.webaim.org/ - Scans your site for problems (inclusive explanation) • More Tools: A11y-Team-Handbook —> Tools
 https://make.wordpress.org/accessibility/handbook/testing- and-development-tools/other-plugins-to-improve- accessibility/   54 @wp1x1 #accessibilityWordCamp Cologne 2017
  • 55. Ressources WordPress A11y-Handbook
 —> https://make.wordpress.org/core/handbook/best- practices/coding-standards/accessibility-coding-standards/ https://wordpress.tv/2017/06/21/adrian-roselli-selfish- accessibility-3/ 
 UK Government Webseite
 —> https://www.gov.uk/help/accessibility
 —> https://accessibility.blog.gov.uk/2016/09/02/dos-and- donts-on-designing-for-accessibility/ 
 55 @wp1x1 #accessibilityWordCamp Cologne 2017