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.

Iterating a form wizard | from research to design

132 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

×