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.

Accessibility testing a multi-channel form wizard

667 Aufrufe

Veröffentlicht am

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).

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

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

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