Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Screendesign und Web-Accessibility

4 635 vues

Publié le

Präsentation von Maria Putzhuber beim A-Tag 08 in Wien

Publié dans : 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, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • 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, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • 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, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Screendesign und Web-Accessibility

  1. 1. Screendesign und Web-Accessibility Katze und Hund
  2. 2. putzhuber.net
  3. 3. Web-DesignerInnen finden Design wichtiger als Web-NutzerInnen <ul><li>Quelle: IDEA, Finding Information, 2008, idea.org </li></ul>Ist gutes Design wichtig? Fähigkeit, sich auf Webseiten zu orientieren
  4. 4. 30 % der Befragten finden Web Accessibility sehr wichtig <ul><li>idea.org 2008 </li></ul><ul><li>Nur ca. 4% öffentlicher Webauftritte in Europa sind „barrierefrei“ (automatisiert getestet WCAG 1.0 AA konform). </li></ul><ul><li>eiao.net 2008 </li></ul>
  5. 5. Nur mit Profi Design und Profi Informations Architektur kann Barrierefreiheit Mainstream werden Katze im Boot
  6. 6. Barrierefreies Web hat ein Imageproblem <ul><li>= nicht cool, nicht hype </li></ul><ul><li>= nicht schön </li></ul><ul><li>= nicht businesstauglich </li></ul><ul><li>= ein Spaßverderber </li></ul><ul><li>= eine Nische für AmateurInnen </li></ul>
  7. 7. Wir predigen seit Jahren dagegen an... <ul><li>aber es ist schwerer, ein lädiertes Image zu reparieren, als ein neues aufzubauen. </li></ul>eraseo.com
  8. 8. 3 Gründe für den schlechten Ruf Katze ohne Fell
  9. 9. 1. Die Bewegung ist von AmateurInnen ausgegangen <ul><li>Von Menschen mit Behinderung selbst </li></ul><ul><li>Von Gutmenschen </li></ul><ul><li>Von technisch Interessierten, gestalterisch weniger Begabten </li></ul>
  10. 10. Googeln nach Barrierefreiheit... bizeps.or.at
  11. 11. wai-austria.at
  12. 12. Institut Integriert Studieren Linz
  13. 13. accessiblemedia.at
  14. 14. mainweb.at/blog
  15. 15. Frankfurter <ul><li>Low Budget </li></ul><ul><li>einfach </li></ul><ul><li>informativ </li></ul><ul><li>Fokus auf Inhalt </li></ul><ul><li>...Verstärken diese Seiten das Image mangelnder Businesstauglichkeit ?? </li></ul>
  16. 16. Gut: Typografie atag.accessiblemedia.at
  17. 17. 2. Barrierefreiheit wird mit Behördenseiten und Pflicht assoziiert <ul><li>oft konservatives Design </li></ul><ul><li>mäßiger Gestaltungsfreiraum </li></ul>
  18. 18. <ul><li>Aber auch hier: die Accessibility Vorreiter sind nicht die Design Vorreiter </li></ul>Schwarzer Peter
  19. 19. wien.at Bei 1280px Bildschirmauflösung am Laptop
  20. 20. help.gv.at
  21. 21. <ul><li>Eyetracking Simulation / Heatmap, feng-gui.com Visuelle Wahrnehmung in den ersten 5 sec. </li></ul>Heatmap help.gv.at
  22. 22. Wiener Schnitzel <ul><li>Seriös </li></ul><ul><li>textlastig </li></ul><ul><li>vollgefüllt </li></ul><ul><li>Inhalt hängt über den Teller </li></ul><ul><li>„in der Panier“ (nicht schlecht, nicht außergewöhnlich) </li></ul><ul><li>eher statisches, klassisches Design </li></ul>
  23. 23. Die Design Herausforderung ist der Umgang mit sehr viel Information
  24. 24. Nicht so gut: herkömmlicher Umgang mit Informationsflut Finanzministerium - bmf.gv.at
  25. 25. Besser: mehr Übersicht Leitung des Blicks, weniger imposant Bundeskanzleramt - bka.gv.at
  26. 26. Interessant: Web 2.0 Ansatz gruene.at
  27. 27. 3. Behinderung ist nicht ästhetisch und cool <ul><li>GrafikerInnen haben ästhetischen Zugang zur Welt und Angst vor Einschränkung der Gestaltungsfreiheit. </li></ul><ul><li>ProgrammiererInnen wollen komplexe Funktionalitäten. </li></ul>
  28. 28. Sie wollen Gourmet Teller bauen Gourmet Essen <ul><ul><li>Sie wollen sich nicht intensiv mit Behinderung auseinandersetzen. </li></ul></ul>
  29. 29. Das Verständnis bleibt an der Oberfläche <ul><li>Richtlinien sind schwere, kreativitätshemmende Kost. </li></ul><ul><li>DesignerInnen orientieren sich eher an Vorbildern. </li></ul>
  30. 30. Veterinäermedizinische Universität Wien - vu-wien.ac.at DesignerInnen glauben vielleicht, barrierefreie Seiten müssen etwas streng aussehen
  31. 31. Top DesignerInnen kommen oft aus dem Print Bereich
  32. 32. Standardkonform, etwas skalierbar, trotzdem eher ein Printdesign wombats.at
  33. 33. Zur Sache <ul><li>Was geben die </li></ul><ul><li>WCAG 2.0 in </li></ul><ul><li>punkto Design </li></ul><ul><li>vor? </li></ul>Eingemachtes
  34. 34. Wahrnehmbarkeit <ul><li>1. Struktur / Präsentation Bezug (A) </li></ul><ul><li>2. Farbunabhängigkeit von Info (A) </li></ul><ul><li>3. gute Kontraste (AA, AAA) </li></ul><ul><li>4. Textvergrößerung (AA) </li></ul><ul><li>5. Text als Text (AA) </li></ul><ul><li>6. Vorgaben für Textblöcke (AAA) </li></ul>
  35. 35. Bedienbarkeit <ul><li>B ewegter Inhalt (A) </li></ul><ul><li>Verständliche Links (A) </li></ul><ul><li>Mehrfache Navigations Möglichkeit (AA), Konsistente Navigation (AA) </li></ul><ul><li>Überschriften und Labels (AA) </li></ul><ul><li>Standort - Orientierung (AA) </li></ul><ul><li>Tastaturbedienbarkeit (A, AA) </li></ul>
  36. 36. 1. Semantische Struktur entspricht Präsentation <ul><li>Überschrift <h 1-6> </li></ul><ul><li>Absatz <p> </li></ul><ul><li>Navigation <ul> </li></ul><ul><li>... </li></ul><ul><li>optische Struktur = eine Frage von Usability und gutem Design </li></ul>
  37. 37. bundesrat.de Gut: Hierarchien Bildung, Leitung des Blicks, Weißraum
  38. 38. Gut: klares Raster, Konventionen bundesrat.de
  39. 39. tibus.fr Gut: unkonventioneller, klare Gruppierung, nicht überladen tibus.fr, AccessiWeb Label Argent 2008
  40. 40. Gut: Reduzierte Information, große Icons, Web 2.0 Vereinfachung femonco.net
  41. 41. Kreuztabelle Bundesligasaison 1977/78 Gut: klar strukturierte Datentabelle einfach-fuer-alle.de
  42. 42. Gut: Formulare, die auch gezoomt gut bedienbar sind Anmeldeformular Atag
  43. 43. 2. Farbunterschiede sind nicht allein bedeutungstragend <ul><li>Links, Formularfehler nicht nur farblich markieren. </li></ul><ul><li>Ist bei Farbfehlsichtigkeit, in Graustufen noch alles klar lesbar und verständlich? </li></ul>
  44. 44. Gut: mit Screen Reader lesbare Diagramme Barrierefreie Diagramme filamentgroup.com
  45. 45. Lesbar mit Blendfilter bei Farbenblindheit Schwarz-Weiß Ausdruck? Barrierefreie Diagramme
  46. 46. Rot-Grün Blindheit Flash: Wahlergebnisse Österreich 2008 - Farbenblindheitssimulation
  47. 47. Gut: Klare, mehrfach markierte Fehlermeldungen duesselenergie.de
  48. 48. 3. Kontrast Verhältnis von 5:1 <ul><li>Unter 150% (120% bold) font-size </li></ul><ul><li>Sehr anspruchsvolle Forderung </li></ul><ul><li>Messtools: Verhältnis Farbsättigung zu Kontrast </li></ul>
  49. 49. Kontrast gut trotz zarter Farben, bis auf Menü oben - weiß auf blau Zürcher Kantonalbank - zbk.ch
  50. 50. Kontrast nicht immer ausreichend gerade bei kräftigen Farben BM für Gesundheit - bmg.bund.de
  51. 51. Firefox - Color Contrast Analyzer Farbkontrastmessung
  52. 52. 4. Text ist auf 200% vergrößerbar <ul><li>2 Größensprünge im IE 6, Zoomen </li></ul><ul><li>Skalierbares Layout (zumindestens vertikal) </li></ul><ul><li>Spielraum für Zoomfunktion von modernen Browsern </li></ul>
  53. 53. Fixes Layout jak-stat.at
  54. 54. Spielraum für Textvergrößerung jak-stat.at - Größere Schrift
  55. 55. Elastisches Layout ( Zoom Layout - Breiten in em) Bundeskanzleramt Bei Bildschirmauflösung 1680px
  56. 56. Erst bei 1680px hat 200% gezoomtes 800px Layout ohne Scrollen Platz Bundeskanzleramt
  57. 57. Liquides - fluides (flexibles) Layout (in %, mit Maximalbreite) linz.at
  58. 58. 5. Text ist Text, wenn möglich, nicht Grafik <ul><li>Webtaugliche Schriften </li></ul><ul><li>webtaugliche Schriftgrößen </li></ul><ul><li>Wichtige Info nicht als Hintergrundbild per CSS </li></ul>
  59. 59. Menüs als Hintergrundbilder Screen Reader tauglich eingebunden West-Vlaamse Intercommunale - wvi.be wvi.be, AnySurfer Label
  60. 60. wvi.be ohne Farben, ohne Menü Beim Wegschalten der Farben verschwinden Hintergrundbilder
  61. 61. Grafisches Menü mit Alternativtext forschungmachtschule.at
  62. 62. 6. Visuelle Präsentation von Textblöcken (AAA) <ul><li>- nicht breiter als 80 Buchstaben - kein text-align:justified - Zeilenabstand von 1,5 in Absätzen - Absatzabstand 1,5x Zeilenhöhe </li></ul><ul><li>- Textvergrößerung ohne assistive Technologien ist bis auf 200% möglich, ohne Querscrollen bei häufigsten Bildschirmgrößen. </li></ul>
  63. 63. 7. Animationen mit Stopp Button hauptbahnhof-wien.at
  64. 64. 7. Videos mit Captions hauptbahnhof-wien.at
  65. 65. 8. Links im unmittelbaren Kontext verständlich (gleicher Absatz, Tabelle..) oder title Attribut asap.at
  66. 66. theologisches-seminar-elstal.de 9: Klare Navigation, Überschaubare Infoblöcke
  67. 67. OK: Lesbare, bedienbare Dropdownmenüs + Submenüs hei.at
  68. 68. Gut: Versteckte Hilfe progressive Disclosure clean-it.at
  69. 69. 12. Große Klickflächen, sichtbarer Tastatur Fokus, sichtbarer Skiplink atag.accessiblemedia.at
  70. 70. Fazit <ul><li>Gutes, „barrierefreies“ Design ist nutzerInnenzentriertes Design. </li></ul><ul><li>100% barrierefrei gibt es nicht! </li></ul>

×