Formvollendet - Fortgeschrittene Techniken für barrierefreie Formulare
•
2 j'aime•1,525 vues
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.
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (20)
Formvollendet - Fortgeschrittene Techniken für barrierefreie Formulare
- 1. FORMVOLLENDETFORTGESCHRITTENE TECHNIKEN FÜR BARRIEREFREIER FORMULARE A-TAG WIEN 05.11.2010 VON PETER MINARIK TWITTER.COM/PIETROPIZZI WWW.WIENFLUSS.NET
- 4. WIENFLUSS
- 7. ICH
- 12. SIND WIR MAL EHRLICH SINDLANGWEILIG FORMULARE
- 14. ein neuer Name?
- 15. Formulare im Web
- 16. Formulare im Web
- 17. Formulare im Web
- 18. Formulare im Web
- 19. Unser Mittel einer Website zu sagen was wir machen wollen Formulare im Web
- 20. Ich habe eine Aufgabe z.B. Musik kaufen
- 21. Ich habe eine Aufgabe z.B. Musik kaufen
- 25. 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
- 26. 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
- 28. <li>ZIELGRUPPE? <li>EINE MÖGLICHKEIT 2 ANMERKUNGEN http://www.flickr.com/photos/mikebaird/398077070
- 29. <li>WO BIN ICH? (=KONTEXT) <li>WAS WOLLT IHR WISSEN? FEHLER IM VORHINEIN VERMEIDEN http://www.flickr.com/photos/nocklebeast/2612663390
- 33. 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. [...]
- 34. http://www.flickr.com/photos/donsolo/2472473711 TOOLTIP <li>MOUSEOVER UND FOKUS <li>title & zusätzliches element <li>role tooltip & aria-describedby
- 35. 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.
- 36. 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
- 38. <li>WO? <li>WARUM? <li>WAS MUSS ICH TUN? OH NEIN, EIN FEHLER! http://www.flickr.com/photos/niamhzer/2862198723
- 40. 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
- 42. http://www.flickr.com/photos/donsolo/3271552182 onSUBMIT <li>VOR DEM ABSENDEN <li>ZUSAMMENFASSUNG <li>zu feldern gelangen <li>SERVERSEITIG?
- 48. DIE HEUTE SCHON DA IST INDIEZUKUNFT EINAUSBLICK
- 49. 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
- 52. <li>REQUIRED ATTRIBUT <li>VALIDIERUNG => BROWSER <li>SUPPORT HTML5
- 53. 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