Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Iterating a form wizard | from research to design

434 Aufrufe

Veröffentlicht am

A lightning talk for Global Accessibility Awareness Day 2019 #A11yMelb on accessibility improvements to a registration form wizard.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Iterating a form wizard | from research to design

  1. 1. From research to design Iterating a form wizard @vfowler
  2. 2. Outline •Form wizard designs •Manual testing & issues identified •Addressed issues •Next steps
  3. 3. Form wizard designs Onsite kiosks Other devices
  4. 4. Manual accessibility testing scenarios 1. Laptop + Firefox + JAWS → email 2. iPhone + Safari + VoiceOver → SMS
  5. 5. 7 issues identified •Validation errors imperceptible •Mismatch to user’s mental model •Spinners on postcode input •<article> tag •Driver’s licence as proof of address •<label> lacks a phone format example •Link to a modal
  6. 6. Perceptible validation
  7. 7. <button>s weren’t matching Automated testing won’t pick up on this. Photo by Adeolu Eletu on Unsplash
  8. 8. <h2>Your preferred contact</h2>
  9. 9. Mismatch to user’s mental model
  10. 10. Radio buttons, fieldset & legend
  11. 11. Spinners on postcode input type=“number” → type=“text” pattern=“[0-9]*” When to use the number input by Adam Silver
  12. 12. Photo by Matthew Guay on Unsplash <article> on a form Confusing.
  13. 13. Driver’s licence Ineligible. Photo by Laura Gariglio on Unsplash
  14. 14. Next steps Photo by Ant Rozetsky on Unsplash • Require WCAG 2.1 AA up front. • Align with Australian Government Design System. • Test with low-vision and mobile users.
  15. 15. Thank you Comments & questions? @vfowler

×