O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Accessibility testing a multi-channel form wizard

667 visualizações

Publicada em

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

Publicada em: Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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