Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.

4.974 Aufrufe

Veröffentlicht am

Gastvorlesung an der Johannes Gutenberg-Universität Mainz am 11. Mai 2010 zu Barrierefreiem Web.

Veröffentlicht in: Technologie, Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS 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 THIS 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 eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, 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, Ebooks, 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 THIS 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 THIS 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 THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Slideshare hat mal wieder nicht mitbekommen, dass es Notizen zu den Folien gibt. Bitte einfach die Präsentation downloaden.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Abgesenkte Bordsteine im Web. Warum von Barrierefreiheit Alle profitieren.

  1. 1. Abgesenkte Bordsteine im Web.Warum von Barrierefreiheit Alle profitieren.<br />Martin Kliehm. Senior Frontend Engineer.Namics.<br />11. Mai 2010. Johannes Gutenberg-Universität Mainz.<br />Foto: http://flic.kr/p/55Sh6D<br />
  2. 2. /me<br />11.05.2010<br />Barrierefreiheit. Universität Mainz. <br />2<br />Kompetenzen<br /><ul><li>Webstandards & Browser-Technologien
  3. 3. Barrierefreiheit, Usability, Geräteunabhängigkeit
  4. 4. Internationalisierung (i18n) &Lokalisierung (L10N)
  5. 5. Technische Konzeption und Beratung
  6. 6. Internationale Konferenzbeiträge</li></ul>Gremien<br /><ul><li>Invited Expert der W3C HTML Arbeitsgruppe
  7. 7. Invited Expert der W3C Accessibility Task Force
  8. 8. Stakeholder der authorisierten deutschen Übersetzung der W3C Richtlinien für barrierefreie Webinhalte (WCAG 2.0)
  9. 9. Mitglied in der International Liaison Group des Web Standards Projects
  10. 10. Mitglied bei den Webkrauts</li></ul>Martin Kliehm.Senior Frontend Engineer.Entwicklung, Barrierefreiheit,Mobile Endgeräte, i18n<br />Berufserfahrung<br />Seit 1996, Barrierefreiheit seit 1999, bei Namics seit 2008<br />Kontakt<br />http://namics.comhttp://klie.hm/profilehttp://twitter.com/kliehm<br />
  11. 11. Interdisziplinäre Teams.<br />Namics vorgestellt.<br />11.05.2010<br />Barrierefreiheit. Universität Mainz. <br />3<br />Projekt Management<br />Technologie<br />Consulting<br />Kreation<br />
  12. 12. Namics vorgestellt.<br />11.05.2010<br />Barrierefreiheit. Universität Mainz. <br />4<br />
  13. 13. Barrierefreiheit im Web<br /><ul><li>Begriff der Behinderung
  14. 14. Demographie: Barrierefreiheit als Wirtschaftsfaktor
  15. 15. Barrierefreiheit von Websites
  16. 16. Herausforderungen für die Zukunft</li></ul>11.05.2010<br />5<br />Barrierefreiheit. Universität Mainz. <br />
  17. 17. Barrierefreiheit<br />„Barrierefrei sind […] Systeme der Informationsverarbeitung […], wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind.“<br />Behindertengleichstellungsgesetz<br />6<br />Barrierefreiheit. Universität Mainz.<br />21.05.2010<br />
  18. 18. Paradigmenwandel: Behinderung warursprünglich ein medizinisches Gebrechen.<br />11.05.2010<br />7<br />Barrierefreiheit. Universität Mainz.<br />http://flic.kr/p/2Vcqt5<br />
  19. 19. Behinderung alsindividuelles Problem<br />11.05.2010<br />8<br />Barrierefreiheit. Universität Mainz.<br />Menschenwürde?<br />http://flic.kr/p/ws4tD<br />
  20. 20. 11.05.2010<br />9<br />Barrierefreiheit. Universität Mainz.<br />Nicht der Rollstuhl ist die Barriere,die Architektur ist es …<br />oder die Gesellschaft.<br />“Disability results from an interaction betweena non-inclusive society and individuals.”<br />UN-Konventionüber die Rechtevon MenschenmitBehinderungen<br />http://failblog.org/2008/09/05/ramp-fail/<br />
  21. 21. 11.05.2010<br />10<br />Fokuswechsel: „Behinderte“ setzt die Behinderung in den Vordergrund.<br />„Menschen mit Behinderungen“setzt den Menschen in den Mittelpunkt.<br />http://flic.kr/p/6SEier<br />Barrierefreiheit. Universität Mainz. Namics.<br />
  22. 22. 11.05.2010<br />11<br />Fokuswechsel: „Behinderte“ setzt die Behinderung in den Vordergrund.<br />http://flic.kr/p/6SEier<br />Barrierefreiheit. Universität Mainz. Namics.<br />
  23. 23. 11.05.2010<br />12<br />„Menschen mit Behinderungen“setzt den Menschen in den Mittelpunkt.<br />http://flic.kr/p/6SEier<br />Barrierefreiheit. Universität Mainz. Namics.<br />
  24. 24. Paradigmenwandel:Barrierefreiheit alsnachträglicher Einfall,drangedübelt<br />11.05.2010<br />13<br />Barrierefreiheit. Universität Mainz.<br />http://flic.kr/p/8H1Q<br />
  25. 25. 11.05.2010<br />14<br />Barrierefreiheit. Universität Mainz.<br />Andreas Slominski:„Rollstuhl zum Queren derTreppe in Odessa“<br />Museum für Moderne Kunst, Frankfurt<br />http://flic.kr/p/rZh2F<br />
  26. 26. Potemkin-Treppe in Odessa<br />http://de.wikipedia.org/wiki/Potemkinsche_Treppe<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />15<br />
  27. 27. Barrierefreiheit als integrales Element<br />http://flic.kr/p/55Sh6D<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />16<br />
  28. 28. http://flic.kr/p/4dqGWd<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />17<br />
  29. 29. http://flic.kr/p/6VCacm<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />18<br />
  30. 30. http://flic.kr/p/5o8k42<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />19<br />
  31. 31. http://flic.kr/p/8W93u<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />20<br />
  32. 32. http://youtu.be/ffrq6cUoE5A<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />21<br />
  33. 33. 11.05.2010<br />22<br />Barrierefreiheit. Universität Mainz.<br />
  34. 34. 2. Demographie: Barrierefreiheit als Wirtschaftsfaktor<br />11.05.2010<br />23<br />http://flic.kr/p/8VHFb<br />Barrierefreiheit. Universität Mainz.<br />
  35. 35. 10-12%<br />http://flic.kr/p/dMFYb<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />24<br />
  36. 36. Menschen mit Behinderungen<br />MenschenmitBehinderungen in Deutschland:ca. 8-10 Mio. (10-12%)<br />MenschenmitBehinderungenweltweit:ca. 680-816 Mio.1<br />Schwerbehinderteimerwerbsfähigen Alter in Deutschland: 3 Mio. (3,6%)‏<br />Schwerbehinderteimerwerbsfähigen Alter in Europa: ca. 39 Mio.<br />1 Mont, D., Measuring Disability Prevalence, World Bank, March 2007<br />Demographie<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />25<br />
  37. 37. Familie, Freunde, Ärzte und Pflegepersonalfolgen:<br />“We could see how viral the community was. If you do something good, everyone knows about it.”<br />Barbara Kaplan, Verizon Wireless, National Marketing Operations Manager<br />“There’s a good deal of disposable income in the disability community. We’ve learned if you gain the community’s loyalty, they’re going to travel with you and recommend you to friends.”<br />Lisa Anderson, Southwest Airlines, Head of Customer Insight Group <br />MenschenmitBehinderungenalsMultiplikatoren.<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />26<br />
  38. 38. Die Herausforderungen.<br />$225Mrd.<br />http://flic.kr/p/4MqfGZ<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />27<br />
  39. 39. Wennnur 1% derBritenmitBehinderungeneineVersicherungspoliceüber £300 bestellt, verdientLegal & General £27 Mio. — die Umsatzsteigerungdurch die generellverbesserte Usability nichtmitgerechnet.<br />“The cost of making the site accessible pales into insignificance.”<br />David Wilton, Legal & General <br />Case Study: Legal & General.<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />28<br />
  40. 40. Nachhaltigen und langfristigenErfolgnurmitUnterstützung auf Vorstandsebene<br />Accessibility PolicyalsTeilderUnternehmenskultur<br />Barrierefreiheitvon Beginn an in einProjekteinbinden<br />Pragmatischsein: Klein anfangen.“Harvest the low hanging fruit.”<br />ErfolgreichmitBarrierefreiheit<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />29<br />
  41. 41. Kollateralnutzen. Barrierefreiheit für Alle.<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />30<br />
  42. 42. 41%<br />http://flic.kr/p/38rGwd<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />31<br />
  43. 43. http://destatis.de/bevoelkerungspyramide/<br />Die Herausforderungen.<br />11.05.2010<br />32<br />Barrierefreiheit. Universität Mainz. Namics.<br />
  44. 44. 50-65jährige: 17 Mio. (21%; 2010)1<br />50+: 33,2 Mio. (41%; 2010), Tendenz steigend,1davonim Internet: 14,9 Mio. (44,9%; 2009) 2<br />JährlicheZuwachsrateInternetnutzer 60-69 Jahre:6,9% (2009) 2<br /> 1StatistischesBundesamt, http://destatis.de/bevoelkerungspyramide/2 (N)Onliner Atlas 2009, http://initiatived21.de/category/nonliner-atlas<br />Designing for our future selves.<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />33<br />
  45. 45. Das RisikoeinerBehinderungsteigtim Alter‏<br />Wahrnehmung von Kontrasten, räumlicheWahrnehmung und Auge-Hand-Koordinationnehmenab<br />Owlsley, C.J., Sekuler, R. & Siemensne, D. (1983). Contrast sensitivity through adulthood. Vision Research 23, 689-699<br />Oft Anfänger, brauchenintuitive Nutzerführung<br />ÄltereMenschen.<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />34<br />
  46. 46. MenschenmitLernschwierigkeiten: 5-10%<br />EinwohnermitDeutsch alsFremdsprache: 5,7 Mio. (7%)‏<br />PISA 2003 untersteKompetenzstufeLesenoderdarunter: 22,3%<br />Schulabgänger 2005 ohnemittlereReife: 33%<br />KognitiveFähigkeiten. Lesekompetenz.<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />35<br />
  47. 47. 3. Barrierefreiheit von Websites<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />36<br />
  48. 48. mehr ...mehr ...mehr ...<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />37<br />
  49. 49. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />38<br />
  50. 50. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />39<br />
  51. 51. Wahrnehmbarkeit<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />40<br />
  52. 52. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />41<br />
  53. 53. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />42<br />
  54. 54. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />43<br />
  55. 55. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />44<br />
  56. 56. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />45<br />
  57. 57. Schriftgröße im CSS: 11px = 68%<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />46<br />
  58. 58. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />47<br />
  59. 59. Schriftgröße: 16px<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />48<br />
  60. 60. Inhalt.<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />49<br />
  61. 61. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />50<br />
  62. 62. Die Herausforderungen.<br />1:20<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />51<br />
  63. 63. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />52<br />
  64. 64. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />53<br />
  65. 65. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />54<br />
  66. 66. Captcha<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />55<br />
  67. 67. Zielgruppe: Alle. One Web for All.Niemanden ausgrenzen. Keine Diskriminierung.<br />http://flic.kr/p/5PYudB<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />56<br />
  68. 68. KleinerBildschirm<br />KeineMaus<br />KeinePopups<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />57<br />
  69. 69. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />58<br />
  70. 70. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />59<br />
  71. 71. Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />60<br />
  72. 72. Inhalte anreichern:Accessible Rich Internet Applications (ARIA)<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />61<br />
  73. 73. <input type="text"aria-required="true" /><br />11.05.2010<br />62<br />http://flic.kr/p/5EqqLe<br />Barrierefreiheit. Universität Mainz. Namics.<br />
  74. 74. <input type="text"aria-required="true"aria-invalid="true" /><br />11.05.2010<br />63<br />http://flic.kr/p/5EuQYq<br />Barrierefreiheit. Universität Mainz. Namics.<br />
  75. 75. http://flic.kr/p/48LXf9<br />
  76. 76. http://flic.kr/p/6F8N8Q<br />http://webaim.org/blog/spam_free_accessible_forms/<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />65<br />
  77. 77. http://flic.kr/p/6F8Phy<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />66<br />
  78. 78. <ulrole="menu navigation"><br /><li role="menuitem"><a href="…">Über Fraunhofer</a></li><br /></ul><br />11.05.2010<br />Barrierefreiheit. Universität Mainz. Namics.<br />67<br />
  79. 79. <arole="button" aria-controls="nav-direct-third"tabindex="0" title="Untermenü">Schnellzugriff</a><br /><ul id="nav-direct-third"role="menu navigation"aria-expanded="true"><br /><li role="menuitem"> <a href="…">Presse / Medien</a></li><br /></ul><br />11.05.2010<br />Barrierefreiheit. Universität Mainz. Namics.<br />68<br />
  80. 80. ARIA + JavaScript<br />11.05.2010<br />69<br />Barrierefreiheit. Universität Mainz. Namics.<br />
  81. 81. http://flic.kr/p/6F4FUk<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />70<br />
  82. 82. <ulrole="tablist"><br /> <lirole="tab">Bahn</li> <lirole="tab">Mietwagen</li> <lirole="tab">Hotel</li><br /> <lirole="tab">Mobilität</li><br /></ul><br /><!-- TabpanelBahn --><br /><div role="tabpanel"><br />…<br /></div><br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />71<br />
  83. 83. tabindex="0" setzen<br />Event capturing: click, focus, keydown,keypress<br />Tabpanel einblenden<br />Tastatursteuerung: Pfeiltasten, ctrl + tab,ctrl + shift + tab<br />Event-Bubbling stoppen<br /> ggf. Screenreader-Buffer aktualisieren<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />72<br />
  84. 84. <div aria-live="polite"aria-atomic="true"aria-relevant="additions text"><br />Die Seite wurde Ihrem Merkzettel hinzugefügt.<br /></div><br />http://flic.kr/p/6F4Gin<br />Barrierefreiheit. Universität Mainz. Namics.<br />11.05.2010<br />73<br />
  85. 85. 4. Herausforderungen für die Zukunft<br />21.05.2010<br />74<br />Barrierefreiheit. Universität Mainz.<br />
  86. 86. 11.05.2010<br />75<br />HTML5 <video><br />Barrierefreiheit. Universität Mainz. Namics.<br />
  87. 87. 11.05.2010<br />76<br />Barrierefreier Zugang zu Canvas 2D<br />Barrierefreiheit. Universität Mainz. Namics.<br />
  88. 88. 11.05.2010<br />77<br />Barrierefreie Interaktion in 3D-Welten<br />http://youtu.be/Ol3qQ4CEUTo<br />Barrierefreiheit. Universität Mainz. Namics.<br />
  89. 89. 11.05.2010<br />78<br />Neue Interaktionsformen<br />http://vimeo.com/10903243<br />Barrierefreiheit. Universität Mainz. Namics.<br />
  90. 90. 11.05.2010<br />79<br />Gesichtserkennung und Gestensteuerung<br />http://youtu.be/kkNxbyp6thM<br />Barrierefreiheit. Universität Mainz. Namics.<br />
  91. 91. Danke.<br />twitter: @kliehm<br />Folien: http://goo.gl/QdCg<br />Kontakt: http://klie.hm/profile<br />Barrierefreiheit. Universität Mainz.<br />21.05.2010<br />80<br />

×