Simple techniques to make your site more Accessible

271 Aufrufe

Veröffentlicht am

Ist die eigene Web-App/Seite für Blinde zugänglich? Fragende Blicke und zuckende Schultern sind oftmals das Ergebnis dieser Frage. Dabei kann man die meisten Hürden, mit denen körperlich eingeschränkte Menschen im Web tagtäglich kämpfen, mit ein wenig Know-How und geringem Extra-Aufwand im Vorbeigehen erledigen. Der Vortrag bespricht einfache Lösungen für die häufigsten Fallstricke.

Veröffentlicht in: Internet
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
271
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Simple techniques to make your site more Accessible

  1. 1. Simple techniques to make your site more Moritz Gießmann TecDay 17.11.2016 @ 1&1 Accessible!
  2. 2. 7 https://commons.wikimedia.org/wiki/File:1-19-Martin-Luther-King-ftr.jpg
  3. 3. 7 https://commons.wikimedia.org/wiki/File:1-19-Martin-Luther-King-ftr.jpg „Life's most persistent and urgent question is, – Martin Luther King 'What are you doing for others?' “
  4. 4. 9https://flic.kr/p/4xtq5o
  5. 5. @MoritzGiessmann Frontend @ 3C Development moritz-giessmann.de
  6. 6. A11Y == Accessibility
  7. 7. A11Y == Accessibility 11
  8. 8. Barrierefrei?
  9. 9. Barrierefrei?
  10. 10. Accessible?
  11. 11. Zugänglich!
  12. 12. „Web accessibility means that people with disabilities can use the Web. More specifically,Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web,and that they can contribute to the Web. Web accessibility also benefits others,including older people with changing abilities due to aging.“ – W3C Web Accessibility Initiative http://www.w3.org/WAI/intro/accessibility.php 19
  13. 13. http://www.who.int/mediacentre/factsheets/fs352/en/index.html Einer von sieben Menschen hat eine Behinderung
  14. 14. http://www.who.int/mediacentre/factsheets/fs352/en/index.html Einer von sieben Menschen hat eine Behinderung
  15. 15. http://www.who.int/mediacentre/factsheets/fs352/en/index.html Einer von sieben Menschen hat eine Behinderung 15%
  16. 16. A11Y ist für Menschen mit Behinderungen?
  17. 17. A11Y ist für ALLE* *Es ist nur eine Frage der Zeit, wann es für uns wichtig wird.
  18. 18. A11Y == Usability
  19. 19. Barrieren?
  20. 20. Akustisch Motorisch Kognitiv Visuell Barrieren
  21. 21. Akustisch
  22. 22. https://www.youtube.com/watch?v=2v79hFGGcGo
  23. 23. Motorisch
  24. 24. https://en.wikipedia.org/wiki/Boxer%27s_fracture#/media/File:Neck_Fracture_of_the_Fourth_ Metacarpal_Bone.png
  25. 25. Maus http://www.integramouse.com/startseite/
  26. 26. Kognitiv
  27. 27. http://www.nachrichtenleic ht.de/streit-ueber- schokolade.2046.de.html?dr am:article_id=355252
  28. 28. Visuell
  29. 29. 42 https://flic.kr/p/8VCm2w
  30. 30. https://flic.kr/p/r2zzf5
  31. 31. Nur das Wichtigste wird in diesem Vortrag besprochen
  32. 32. Sehr wichtige Sache
  33. 33. Akustisch Motorisch Kognitiv Visuell Barrieren
  34. 34. Akustisch Motorisch Kognitiv Visuell Barrieren
  35. 35. 1 2 43 Wahrnehmbar Bedienbar Verständlich Robust
  36. 36. Wahrnehmbar
  37. 37. Semantisches HTML
  38. 38. Screenreader navigieren via Semantik
  39. 39. http://ajaxian.com/wp-content/images/periodic_table.png
  40. 40. ??? http://ajaxian.com/wp-content/images/periodic_table.png
  41. 41. Standardmäßig fokussierbare Elemente!
  42. 42. Interaktionselement <span class=“button“ onclick=“alert(‘…‘)“> Delete Mail </span>
  43. 43. Interaktionselement <span class=“button“ onclick=“alert(‘…‘)“> Delete Mail </span>
  44. 44. Interaktionselement <button class=“button“ onclick=“alert(‘…‘)“> Delete Mail </button>
  45. 45. Content verstecken
  46. 46. Screenreader lesen nichts vor was mit display:none; versteckt wurde!
  47. 47. display:none; ? .is-insivible { display:none; }
  48. 48. display:none; ? .is-insivible { display:none; }
  49. 49. Screenreader Element .is-invisible { position: absolute; left: -9999px; }
  50. 50. Alternativen für Nicht-Text-Content
  51. 51. 1. Welchen Zweck erfüllt das Bild? 2. Was beinhaltet das Bild? 3. Fehlt ohne das Bild eine wichtige Aussage? Fragen!
  52. 52. Textgrafik <img src=“[…]“ alt=“GMX“>
  53. 53. Foto, Grafik, etc. <img src=“[…]“ alt=“Heino Cyrus“> http://web.de/magazine/unterhaltung/stars/heino-18418494
  54. 54. <a class=“ico-back“ style=“text-indent:-9999px;“> Back to mail list </a> Funktionsgrafik <button > <img src=“#“ alt=“Delete this mail“> </button>
  55. 55. Schmuckgrafik, Tracking Pixel etc. <span style=“background: url(bg.png)“></span> <img src=“tracking.pixel. gif“ alt=““>
  56. 56. Farben
  57. 57. Farbe !== alleiniges Unterscheidungsmerkmal
  58. 58. 1 2 43 Wahrnehmbar Bedienbar Verständlich Robust
  59. 59. 71http://9gag.com/gag/aGwwgQ7
  60. 60. Bedienbar
  61. 61. Alle Formularfelder brauchen <label>!
  62. 62. <input type=“text“ placeholder=“name“/>
  63. 63. <input type=“text“ placeholder=“name“/>
  64. 64. Formulare ohne <label> können vom Screenreader-Nutzer nicht verstanden werden
  65. 65. <label for=“name“>Name</label> <input type=“text“id=“name“[…]/> Alle Formularfelder brauchen <label>!
  66. 66. <label for=“name“ class=“is-invisible“> Name</label> <input type=“text“id=“name“[…]/> Alle Formularfelder brauchen <label>!
  67. 67. Pinch to Zoom
  68. 68. https://www.raywenderlich.com/50398/opengl-es-transformations-gestures
  69. 69. Zoom verbieten? <meta name="viewport" content=„[…], user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1">
  70. 70. Zoom verbieten? <meta name="viewport" content=„[…], user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1">
  71. 71. Zoom zulassen! <meta name="viewport" content=„[…], user-scalable=yes,initial-scale=1, minimum-scale=1,maximum-scale=3">
  72. 72. Tastatur
  73. 73. Fokus
  74. 74. https://www.youtube.com/watch?v=jHgQHq5FEhU
  75. 75. https://www.youtube.com/watch?v=oY77G4O-zUo
  76. 76. Niemals! :focus{outline: none}
  77. 77. Niemals! :focus{outline: none}
  78. 78. Sichtbarer Fokus a:hover,a:focus { text-decoration:underline; was: dem-designer-so-einfällt; } input { outline: 2px solid #dac0de; }
  79. 79. 1 2 43 Wahrnehmbar Bedienbar Verständlich Robust
  80. 80. 89 https://flic.kr/p/6fvfLy
  81. 81. Verständlich
  82. 82. LANG=?
  83. 83. Sag deiner Seite in welcher Sprache der Inhalt vorliegt
  84. 84. Lang Attribut <html lang=“de“> […] <p>Hallo Freund!</p> <p lang=“en“>Hello,friend!</p>
  85. 85. 1 2 43 Wahrnehmbar Bedienbar Verständlich Robust
  86. 86. Robust
  87. 87. Progressive Enhancement
  88. 88. http://alistapart.com/article/understandingprogressiveenhancement
  89. 89. 1.HTML 2.CSS 3.JavaScript
  90. 90. Robust Verlässlich Fehlertolerant Zugänglich
  91. 91. „You start by establishing a basic level of user experience that all browsers will be able to provide when rendering your web site,but you also build in more advanced functionality that will automatically be available to browsers that can use it.“ – W3C Blog
  92. 92. „The first Web pages ever were responsive from the start [...] also accessible by default. We do things [...] to make them un- responsive and un-accessible. Instead of talking about making Web pages accessible and responsive, we need to talk about keeping Web pages accessible and responsive.“ – Jeremy Keith
  93. 93. http://info.cern.ch/hypertext/WWW/TheProject.html
  94. 94. 1 2 43 Wahrnehmbar Bedienbar Verständlich Robust
  95. 95. Ressourcen!  Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG/  The Web Accessibility Basics https://www.marcozehe.de/2015/12/14/the-web- accessibility-basics/  Apps for all Book https://shop.smashingmagazine.com/products/apps- for-all
  96. 96. Tools!  Screenreader (kostenlos): Mac:Voiceover(integriert),Windows:NVDA, Linux:Orca  Mobile Screenreader: Android Talkback (integriert),iOS Voiceover (integriert)  Testing Tools: Chrome #a11y devtools (Plugin),chrome://accessibility/ tota11y bookmarklet
  97. 97. https://www.youtube.com/watch?v=NJbAjxkaxnA
  98. 98. https://de.wikipedia.org/wiki/Tim_Berners-Lee#/media/File:Sir_Tim_Berners-Lee.jpg
  99. 99. https://en.wikipedia.org/wiki/Tim_Berners-Lee#/media/File:This_is_for_Everyone.jpg
  100. 100. https://en.wikipedia.org/wiki/Tim_Berners-Lee#/media/File:This_is_for_Everyone.jpg This is for everyone!
  101. 101. What are YOU doing for others?

×