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.
25 September 2018
Accessibility testing a multi-channel form wizard
Vernon Fowler @vfowler
Photo by Buzz Andersen on Unspl...
Agenda
1
2
3
4
5
Form wizard
Validation imperceptible
Progress for all
Buttons ≠ mental model of radio inputs
Log issues &...
The form before …
https://www.instagram.com/p/Bn3a2c3nl5q/
by Vernon Fowler on September 18, 2018
Before wizardry
https://www.instagram.com/p/Bn7A3BSDdDh/
by Vernon Fowler on September 20, 2018
Wizards: Definition and Design Recommendations
by Raluca Budiu on June 25, 2017 https://www.nngroup.com/articles/wizards/
...
Validation imperceptible

Error Messages: Designing for Error — Part 3
by Krisztina Szerovay on September 18, 2018 https:...
Visible progress steps
Wizard Design Pattern
by Nick Babich on April 8, 2017 https://uxplanet.org/wizard-design-pattern-8c...
Styled Progress Bar
by Scott O'Hara on July 28, 2018 https://scottaohara.github.io/a11y_styled_form_controls/src/progress-...
Perceivable progress
Screenreaders · Bootstrap
https://getbootstrap.com/docs/4.1/utilities/screenreaders/

Buttons?
<button type=“submit”
name=“confirm” value=“sms”>
<button type=“submit”
name=“confirm” value=“email”>
Buttons ≠ mental mod...
Inclusive design for radio inputs
Customise radio buttons without compromising accessibility
by Hui Jing Chen on September...
Log issues & iterate
The Importance Of Manual Accessibility Testing
by Eric Bailey on September 12, 2018 https://www.smash...
Thank you. Comments & questions?
@vfowler
Upcoming SlideShare
Loading in …5
×

Accessibility testing a multi-channel form wizard

652 views

Published on

A lightning talk on lessons learnt from our pre-launch test of a multi-channel form wizard. See https://twitter.com/vfowler/status/1044468802786922497 for links to references cited.

Part of World Interaction Design Day #IxDD for @a11ymelb meetup (Melbourne Web Accessibility and Inclusive Design).

Published in: Design
  • Be the first to comment

  • Be the first to like this

Accessibility testing a multi-channel form wizard

  1. 1. 25 September 2018 Accessibility testing a multi-channel form wizard Vernon Fowler @vfowler Photo by Buzz Andersen on Unsplash
  2. 2. Agenda 1 2 3 4 5 Form wizard Validation imperceptible Progress for all Buttons ≠ mental model of radio inputs Log issues & iterate
  3. 3. The form before … https://www.instagram.com/p/Bn3a2c3nl5q/ by Vernon Fowler on September 18, 2018
  4. 4. Before wizardry https://www.instagram.com/p/Bn7A3BSDdDh/ by Vernon Fowler on September 20, 2018
  5. 5. Wizards: Definition and Design Recommendations by Raluca Budiu on June 25, 2017 https://www.nngroup.com/articles/wizards/ Bring in the form wizard “a powerful design pattern … to simplify complex processes performed infrequently or by novice users.”
  6. 6. Validation imperceptible  Error Messages: Designing for Error — Part 3 by Krisztina Szerovay on September 18, 2018 https://uxknowledgebase.com/error-messages-designing-for-error-part-3-8bfb547f9246
  7. 7. Visible progress steps Wizard Design Pattern by Nick Babich on April 8, 2017 https://uxplanet.org/wizard-design-pattern-8c86e14f2a38
  8. 8. Styled Progress Bar by Scott O'Hara on July 28, 2018 https://scottaohara.github.io/a11y_styled_form_controls/src/progress-bar/ Perceivable progress “treat the progress bar as a visual decoration, hide it from screen readers, and provide visually hidden text as a means to consistently convey the information.”
  9. 9. Perceivable progress Screenreaders · Bootstrap https://getbootstrap.com/docs/4.1/utilities/screenreaders/ 
  10. 10. Buttons?
  11. 11. <button type=“submit” name=“confirm” value=“sms”> <button type=“submit” name=“confirm” value=“email”> Buttons ≠ mental model of radio inputs https://gph.is/1ea79Xa
  12. 12. Inclusive design for radio inputs Customise radio buttons without compromising accessibility by Hui Jing Chen on September 3, 2018 https://www.chenhuijing.com/blog/customise-radios-without-compromising-accessibility/
  13. 13. Log issues & iterate The Importance Of Manual Accessibility Testing by Eric Bailey on September 12, 2018 https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/
  14. 14. Thank you. Comments & questions? @vfowler

×