FORMVOLLENDETFORTGESCHRITTENE TECHNIKEN
FÜR BARRIEREFREIER FORMULARE
A-TAG WIEN 05.11.2010
VON PETER MINARIK
TWITTER.COM/P...
PETER MINARIK
FRONTEND
http://www.flickr.com/photos/nullprozent/4667861083
WIENFLUSS
BARRIEREFREIHEIT
http://www.flickr.com/photos/pasukaru76/4506167525
USABILITY
http://www.flickr.com/photos/tashmahal/2724175411/
ICH
HTML
http://www.flickr.com/photos/kk/106960641
CSS
http://www.flickr.com/photos/exey/3142529230
JAVASCRIPT
http://www.flickr.com/photos/vincentgallegos/3962933306
User Interface Design
http://www.flickr.com/photos/quacktaculous/3143079032
SIND WIR MAL EHRLICH
SINDLANGWEILIG
FORMULARE
ein neuer Name?
Formulare im Web
Formulare im Web
Formulare im Web
Formulare im Web
Unser Mittel einer Website zu
sagen was wir machen wollen
Formulare im Web
Ich habe eine Aufgabe
z.B. Musik kaufen
Ich habe eine Aufgabe
z.B. Musik kaufen
MOTIVIERT?
http://www.flickr.com/photos/icedsoul/2323857199
http://www.flickr.com/photos/eyefruit/179553810
WIESOLLTENFORMULARESEIN?
UNSERBAUPLAN
http://www.flickr.com/photos/aidan_jones/3575000735
<li>NOTWENDIG?
<li>zeitpunkt
<li>schon vorhanden
<li>AUSBLENDBAR?
<li> ...
http://www.flickr.com/photos/aidan_jones/3575000735
<li>FEHLER
<li>FEHLERFREI => ZIEL
<li>klarheit schaffen
<li>fehler schm...
WIEHABENWIR ESUMGESETZT?
UNSERFRAMEWORK
<li>ZIELGRUPPE?
<li>EINE MÖGLICHKEIT
2 ANMERKUNGEN
http://www.flickr.com/photos/mikebaird/398077070
<li>WO BIN ICH? (=KONTEXT)
<li>WAS WOLLT IHR WISSEN?
FEHLER IM VORHINEIN VERMEIDEN
http://www.flickr.com/photos/nocklebeast...
http://www.flickr.com/photos/donsolo/2472473711
Box
TOOLTIP
http://www.flickr.com/photos/donsolo/2472473711
Box
TOOLTIP
A contextual popup that displays a
description for an element. ...
http://www.flickr.com/photos/donsolo/2472473711
TOOLTIP
<li>MOUSEOVER UND FOKUS
<li>title & zusätzliches element
<li>role t...
http://www.flickr.com/photos/meddygarnet/4174187631
KONTEXTHILFE
Polytetrafluoroethylene
Lorem ipsum dolor sit amet, consect...
http://www.flickr.com/photos/meddygarnet/4174187631
KONTEXTHILFE
<li>AUSFÜLLEN & LESEN
<li>nicht modaler overlay
<li>versch...
DEMO
http://www.flickr.com/photos/alexkoch/4055906447
<li>WO?
<li>WARUM?
<li>WAS MUSS ICH TUN?
OH NEIN, EIN FEHLER!
http://www.flickr.com/photos/niamhzer/2862198723
http://www.flickr.com/photos/donsolo/3271552182
VALIDIERUNG
onBLUR onSUBMIT
http://www.flickr.com/photos/donsolo/3271552182
onBLUR
<li>DIREKT NACH VERLASSEN
<li>fehler einzeln
<li>kontext, nähe
<li>W...
http://www.flickr.com/photos/donsolo/3271552182
onBLUR
<li>SCREENREADER
<li>aria-invalid
<li>role alert
<li>aria-labelledby
http://www.flickr.com/photos/donsolo/3271552182
onSUBMIT
<li>VOR DEM ABSENDEN
<li>ZUSAMMENFASSUNG
<li>zu feldern gelangen
<...
DEMO
http://www.flickr.com/photos/alexkoch/4055906447
http://www.flickr.com/photos/donsolo/3271552182
onBLUR
http://www.flickr.com/photos/donsolo/3271552182
onBLUR
http://www.flickr.com/photos/donsolo/3271552182
onBLUR
http://www.flickr.com/photos/donsolo/3271552182
onBLUR
DIE HEUTE SCHON DA IST
INDIEZUKUNFT
EINAUSBLICK
http://www.flickr.com/photos/remysharp/4014144810
<li>VIELE NEUE INPUT TYPES
<li>email, url
<li>search
<li>number, range
<l...
HTML5
emailurlnumber
HTML5
range search date
<li>REQUIRED ATTRIBUT
<li>VALIDIERUNG => BROWSER
<li>SUPPORT
HTML5
JA DAS WARS!
WARSDAS?
FRAGEN?
VON PETER MINARIK
TWITTER.COM/PIETROPIZZI
WWW.WIENFLUSS.NET
A-TAG WIEN 05.11.2010
ACH JA NOC...
Formvollendet - Fortgeschrittene Techniken für barrierefreie Formulare
Formvollendet - Fortgeschrittene Techniken für barrierefreie Formulare
Formvollendet - Fortgeschrittene Techniken für barrierefreie Formulare
Upcoming SlideShare
Loading in …5
×

Formvollendet - Fortgeschrittene Techniken für barrierefreie Formulare

2,497
-1

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
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,497
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×