Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibility1x1

1,404 views

Published on

Accessibility für Webseiten Projekte. Für Content Manager, Webdesigner und Webentwickler

Published in: Design
  • Login to see the comments

Accessibility1x1

  1. 1. Accessibility 1x1 @wp1x1 #accessibility1WordCamp Cologne 2017
  2. 2. Über mich • Maja Benke • Webdesignerin + Bloggerin auf WP1x1.de • WordPress Contributor im Bereich 
 Design & Accessibility • Twitter: @WP1x1 2 @wp1x1 #accessibilityWordCamp Cologne 2017
  3. 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. 4. Einführung Barrierefreiheit • Barrierefreiheit = Accessibility • Kurz A11y • Zugang für alle erleichtern • Online und Offline 4 @wp1x1 #accessibilityWordCamp Cologne 2017
  5. 5. Für wen? 5 @wp1x1 #accessibilityWordCamp Cologne 2017
  6. 6. Statistiken 6 @wp1x1 #accessibilityWordCamp Cologne 2017
  7. 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. 8. Hinzu kommen: 8 @wp1x1 #accessibilityWordCamp Cologne 2017
  9. 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. 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. 11. Accessibility für 
 Content Manager 11 @wp1x1 #accessibilityWordCamp Cologne 2017WordCamp Cologne 2017
  12. 12. Content Formate • Text • Bilder und Grafiken • Videos • Audio 12 @wp1x1 #accessibilityWordCamp Cologne 2017
  13. 13. Text 13 @wp1x1 #accessibilityWordCamp Cologne 2017
  14. 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. 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. 16. Text-Struktur Worst Case 16 @wp1x1 #accessibilityWordCamp Cologne 2017
  17. 17. Text-Struktur Ein bisschen besser B Aber: wichtigste Info 
 versteckt im Text 17 @wp1x1 #accessibilityWordCamp Cologne 2017
  18. 18. Text-Struktur Do Wichtigste Info
 zu Beginn 18 @wp1x1 #accessibilityWordCamp Cologne 2017
  19. 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. 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. 21. Bilder und Grafiken 21 @wp1x1 #accessibilityWordCamp Cologne 2017
  22. 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. 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. 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
  25. 25. Videos 25 @wp1x1 #accessibilityWordCamp Cologne 2017
  26. 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. 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. 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
  29. 29. Audio 29 @wp1x1 #accessibilityWordCamp Cologne 2017
  30. 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. 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. 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. 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. 34. Accessibility für 
 Webdesigner 34 @wp1x1 #accessibilityWordCamp Cologne 2017WordCamp Cologne 2017
  35. 35. Farbe + Kontrast Kontrast zwischen Schrift und Hintergrund sollte hoch genug sein Don't Do
 35 @wp1x1 #accessibilityWordCamp Cologne 2017
  36. 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. 37. Farbe + Kontrast Unterstreiche deine Links!!! Don’t Do 37 @wp1x1 #accessibilityWordCamp Cologne 2017
  38. 38. Schriftarten und -größen Sei sparsam mit uppercase Don’t Do 38 @wp1x1 #accessibilityWordCamp Cologne 2017
  39. 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. 40. Farbe + Kontrast Farbe nicht als einziger Indikator für Infos verwenden Don’t Do 40 @wp1x1 #accessibilityWordCamp Cologne 2017
  41. 41. Farbe + Kontrast ..Farbenblinden entgehen sonst Informationen
 
 Don’t Do 41 @wp1x1 #accessibilityWordCamp Cologne 2017
  42. 42. Farbe + Kontrast Farbwahl mit unterschiedlichen Grauschattierungen
 
 Don’t Do 42 @wp1x1 #accessibilityWordCamp Cologne 2017
  43. 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. 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. 45. Accessibility für 
 Webentwickler 45 @wp1x1 #accessibilityWordCamp Cologne 2017WordCamp Cologne 2017
  46. 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. 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. 48. Menü • Untermenüpunkte sollen navigierbar sein über Tastatur • gutes Beispiel.: Theme TwentySeventeen 48 @wp1x1 #accessibilityWordCamp Cologne 2017
  49. 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. 50. Shortcodes • lerne Shortcodes • teste deine Webseite - versuche sie nur über die Tastatur zu bedienen 50 @wp1x1 #accessibilityWordCamp Cologne 2017
  51. 51. Strategien für barrierefreie Webseiten 51 @wp1x1 #accessibilityWordCamp Cologne 2017
  52. 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. 53. Tools + Ressourcen 53 @wp1x1 #accessibilityWordCamp Cologne 2017
  54. 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. 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
  56. 56. 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
  57. 57. Danke 57 @wp1x1 #accessibilityWordCamp Cologne 2017
  58. 58. Fragen? 58 @wp1x1 #accessibilityWordCamp Cologne 2017

×