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.

Formvollendet - Fortgeschrittene Techniken für barrierefreie Formulare

3,014 views

Published on

Anhand eines selbst entwickelten auf jQuery basierenden Frameworks zeigt WIENFLUSS wie moderne Webformulare und Interaktionstechniken zugänglich gestaltet werden können. Insbesondere wird auf die essentielle Rolle von Design Patterns (bewährten Lösungs-Schablonen) und deren Weiterentwicklung aus Sicht der Accessibility eingegangen.

Published in: Technology

Formvollendet - Fortgeschrittene Techniken für barrierefreie Formulare

  1. 1. FORMVOLLENDETFORTGESCHRITTENE TECHNIKEN FÜR BARRIEREFREIER FORMULARE A-TAG WIEN 05.11.2010 VON PETER MINARIK TWITTER.COM/PIETROPIZZI WWW.WIENFLUSS.NET
  2. 2. PETER MINARIK
  3. 3. FRONTEND http://www.flickr.com/photos/nullprozent/4667861083
  4. 4. WIENFLUSS
  5. 5. BARRIEREFREIHEIT http://www.flickr.com/photos/pasukaru76/4506167525
  6. 6. USABILITY http://www.flickr.com/photos/tashmahal/2724175411/
  7. 7. ICH
  8. 8. HTML http://www.flickr.com/photos/kk/106960641
  9. 9. CSS http://www.flickr.com/photos/exey/3142529230
  10. 10. JAVASCRIPT http://www.flickr.com/photos/vincentgallegos/3962933306
  11. 11. User Interface Design http://www.flickr.com/photos/quacktaculous/3143079032
  12. 12. SIND WIR MAL EHRLICH SINDLANGWEILIG FORMULARE
  13. 13. ein neuer Name?
  14. 14. Formulare im Web
  15. 15. Formulare im Web
  16. 16. Formulare im Web
  17. 17. Formulare im Web
  18. 18. Unser Mittel einer Website zu sagen was wir machen wollen Formulare im Web
  19. 19. Ich habe eine Aufgabe z.B. Musik kaufen
  20. 20. Ich habe eine Aufgabe z.B. Musik kaufen
  21. 21. MOTIVIERT? http://www.flickr.com/photos/icedsoul/2323857199
  22. 22. http://www.flickr.com/photos/eyefruit/179553810
  23. 23. WIESOLLTENFORMULARESEIN? UNSERBAUPLAN
  24. 24. http://www.flickr.com/photos/aidan_jones/3575000735 <li>NOTWENDIG? <li>zeitpunkt <li>schon vorhanden <li>AUSBLENDBAR? <li> = PLANUNG Nehmen wir die BenutzerIn an der Hand
  25. 25. http://www.flickr.com/photos/aidan_jones/3575000735 <li>FEHLER <li>FEHLERFREI => ZIEL <li>klarheit schaffen <li>fehler schmerzlos machen Nehmen wir die BenutzerIn an der Hand
  26. 26. WIEHABENWIR ESUMGESETZT? UNSERFRAMEWORK
  27. 27. <li>ZIELGRUPPE? <li>EINE MÖGLICHKEIT 2 ANMERKUNGEN http://www.flickr.com/photos/mikebaird/398077070
  28. 28. <li>WO BIN ICH? (=KONTEXT) <li>WAS WOLLT IHR WISSEN? FEHLER IM VORHINEIN VERMEIDEN http://www.flickr.com/photos/nocklebeast/2612663390
  29. 29. http://www.flickr.com/photos/donsolo/2472473711 Box TOOLTIP
  30. 30. http://www.flickr.com/photos/donsolo/2472473711 Box TOOLTIP A contextual popup that displays a description for an element. The tooltip typically becomes visible in response to a mouse hover, or after the owning element receives keyboard focus. [...]
  31. 31. http://www.flickr.com/photos/donsolo/2472473711 TOOLTIP <li>MOUSEOVER UND FOKUS <li>title & zusätzliches element <li>role tooltip & aria-describedby
  32. 32. http://www.flickr.com/photos/meddygarnet/4174187631 KONTEXTHILFE Polytetrafluoroethylene Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  33. 33. http://www.flickr.com/photos/meddygarnet/4174187631 KONTEXTHILFE <li>AUSFÜLLEN & LESEN <li>nicht modaler overlay <li>verschiebbar <li>TASTATUR FUNKTIONALITÄT <li>öffnen,schließen, fokus
  34. 34. DEMO http://www.flickr.com/photos/alexkoch/4055906447
  35. 35. <li>WO? <li>WARUM? <li>WAS MUSS ICH TUN? OH NEIN, EIN FEHLER! http://www.flickr.com/photos/niamhzer/2862198723
  36. 36. http://www.flickr.com/photos/donsolo/3271552182 VALIDIERUNG onBLUR onSUBMIT
  37. 37. http://www.flickr.com/photos/donsolo/3271552182 onBLUR <li>DIREKT NACH VERLASSEN <li>fehler einzeln <li>kontext, nähe <li>WÄHREND AUSFÜLLEN? <li>timing / verzögerung http://www.alistapart.com/articles/inline-validation-in-web-forms
  38. 38. http://www.flickr.com/photos/donsolo/3271552182 onBLUR <li>SCREENREADER <li>aria-invalid <li>role alert <li>aria-labelledby
  39. 39. http://www.flickr.com/photos/donsolo/3271552182 onSUBMIT <li>VOR DEM ABSENDEN <li>ZUSAMMENFASSUNG <li>zu feldern gelangen <li>SERVERSEITIG?
  40. 40. DEMO http://www.flickr.com/photos/alexkoch/4055906447
  41. 41. http://www.flickr.com/photos/donsolo/3271552182 onBLUR
  42. 42. http://www.flickr.com/photos/donsolo/3271552182 onBLUR
  43. 43. http://www.flickr.com/photos/donsolo/3271552182 onBLUR
  44. 44. http://www.flickr.com/photos/donsolo/3271552182 onBLUR
  45. 45. DIE HEUTE SCHON DA IST INDIEZUKUNFT EINAUSBLICK
  46. 46. http://www.flickr.com/photos/remysharp/4014144810 <li>VIELE NEUE INPUT TYPES <li>email, url <li>search <li>number, range <li>date, datetime, month <li>color HTML5
  47. 47. HTML5 emailurlnumber
  48. 48. HTML5 range search date
  49. 49. <li>REQUIRED ATTRIBUT <li>VALIDIERUNG => BROWSER <li>SUPPORT HTML5
  50. 50. JA DAS WARS! WARSDAS? FRAGEN? VON PETER MINARIK TWITTER.COM/PIETROPIZZI WWW.WIENFLUSS.NET A-TAG WIEN 05.11.2010 ACH JA NOCHWAS WIENFLUSSSUCHTEINEN FRONTENDDEVELOPER

×