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.

Simple techniques to make your site more Accessible

1,393 views

Published on

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.

Published in: Internet
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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?

×