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.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

Accessibility testing a multi-channel form wizard

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

1,219

On Slideshare

0

From embeds

0

Number of embeds

540

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×