Your SlideShare is downloading. ×
Formvollendet - Fortgeschrittene Techniken für barrierefreie Formulare
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Formvollendet - Fortgeschrittene Techniken für barrierefreie Formulare

2,347
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 …

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

2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,347
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
2
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. FORMVOLLENDETFORTGESCHRITTENE TECHNIKEN FÜR BARRIEREFREIER FORMULARE A-TAG WIEN 05.11.2010 VON PETER MINARIK TWITTER.COM/PIETROPIZZI WWW.WIENFLUSS.NET
  • 2. PETER MINARIK
  • 3. FRONTEND http://www.flickr.com/photos/nullprozent/4667861083
  • 4. WIENFLUSS
  • 5. BARRIEREFREIHEIT http://www.flickr.com/photos/pasukaru76/4506167525
  • 6. USABILITY http://www.flickr.com/photos/tashmahal/2724175411/
  • 7. ICH
  • 8. HTML http://www.flickr.com/photos/kk/106960641
  • 9. CSS http://www.flickr.com/photos/exey/3142529230
  • 10. JAVASCRIPT http://www.flickr.com/photos/vincentgallegos/3962933306
  • 11. User Interface Design http://www.flickr.com/photos/quacktaculous/3143079032
  • 12. SIND WIR MAL EHRLICH SINDLANGWEILIG FORMULARE
  • 13. ein neuer Name?
  • 14. Formulare im Web
  • 15. Formulare im Web
  • 16. Formulare im Web
  • 17. Formulare im Web
  • 18. Unser Mittel einer Website zu sagen was wir machen wollen Formulare im Web
  • 19. Ich habe eine Aufgabe z.B. Musik kaufen
  • 20. Ich habe eine Aufgabe z.B. Musik kaufen
  • 21. MOTIVIERT? http://www.flickr.com/photos/icedsoul/2323857199
  • 22. http://www.flickr.com/photos/eyefruit/179553810
  • 23. WIESOLLTENFORMULARESEIN? UNSERBAUPLAN
  • 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. 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. WIEHABENWIR ESUMGESETZT? UNSERFRAMEWORK
  • 27. <li>ZIELGRUPPE? <li>EINE MÖGLICHKEIT 2 ANMERKUNGEN http://www.flickr.com/photos/mikebaird/398077070
  • 28. <li>WO BIN ICH? (=KONTEXT) <li>WAS WOLLT IHR WISSEN? FEHLER IM VORHINEIN VERMEIDEN http://www.flickr.com/photos/nocklebeast/2612663390
  • 29. http://www.flickr.com/photos/donsolo/2472473711 Box TOOLTIP
  • 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. http://www.flickr.com/photos/donsolo/2472473711 TOOLTIP <li>MOUSEOVER UND FOKUS <li>title & zusätzliches element <li>role tooltip & aria-describedby
  • 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. 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. DEMO http://www.flickr.com/photos/alexkoch/4055906447
  • 35. <li>WO? <li>WARUM? <li>WAS MUSS ICH TUN? OH NEIN, EIN FEHLER! http://www.flickr.com/photos/niamhzer/2862198723
  • 36. http://www.flickr.com/photos/donsolo/3271552182 VALIDIERUNG onBLUR onSUBMIT
  • 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. http://www.flickr.com/photos/donsolo/3271552182 onBLUR <li>SCREENREADER <li>aria-invalid <li>role alert <li>aria-labelledby
  • 39. http://www.flickr.com/photos/donsolo/3271552182 onSUBMIT <li>VOR DEM ABSENDEN <li>ZUSAMMENFASSUNG <li>zu feldern gelangen <li>SERVERSEITIG?
  • 40. DEMO http://www.flickr.com/photos/alexkoch/4055906447
  • 41. http://www.flickr.com/photos/donsolo/3271552182 onBLUR
  • 42. http://www.flickr.com/photos/donsolo/3271552182 onBLUR
  • 43. http://www.flickr.com/photos/donsolo/3271552182 onBLUR
  • 44. http://www.flickr.com/photos/donsolo/3271552182 onBLUR
  • 45. DIE HEUTE SCHON DA IST INDIEZUKUNFT EINAUSBLICK
  • 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. HTML5 emailurlnumber
  • 48. HTML5 range search date
  • 49. <li>REQUIRED ATTRIBUT <li>VALIDIERUNG => BROWSER <li>SUPPORT HTML5
  • 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