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.
From research to design
Iterating a form wizard
@vfowler
Outline
•Form wizard designs
•Manual testing & issues identified
•Addressed issues
•Next steps
Form wizard designs
Onsite kiosks Other devices
Manual accessibility
testing scenarios
1. Laptop + Firefox + JAWS → email
2. iPhone + Safari + VoiceOver → SMS
7 issues identified
•Validation errors imperceptible
•Mismatch to user’s mental model
•Spinners on postcode input
•<articl...
Perceptible validation
<button>s weren’t matching
Automated testing won’t pick up on this.
Photo by Adeolu Eletu on Unsplash
<h2>Your preferred contact</h2>
Mismatch to user’s mental model
Radio buttons, fieldset & legend
Spinners on postcode input
type=“number” → type=“text” pattern=“[0-9]*”
When to use the number input by Adam Silver
Photo by Matthew Guay on Unsplash
<article> on a form
Confusing.
Driver’s licence
Ineligible.
Photo by Laura Gariglio on Unsplash
Next steps
Photo by Ant Rozetsky on Unsplash
• Require WCAG 2.1 AA up front.
• Align with Australian Government Design Sys...
Thank you
Comments & questions?
@vfowler
Upcoming SlideShare
Loading in …5
×

Iterating a form wizard | from research to design

424 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

×