SlideShare a Scribd company logo
1 of 14
25 September 2018
Accessibility testing a multi-channel form wizard
Vernon Fowler @vfowler
Photo by Buzz Andersen on Unsplash
Agenda
1
2
3
4
5
Form wizard
Validation imperceptible
Progress for all
Buttons ≠ mental model of radio inputs
Log issues & iterate
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/
Bring in the form wizard
“a powerful design pattern …
to simplify complex processes performed
infrequently or by novice users.”
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
Visible progress steps
Wizard Design Pattern
by Nick Babich on April 8, 2017 https://uxplanet.org/wizard-design-pattern-8c86e14f2a38
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.”
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 model of radio inputs
https://gph.is/1ea79Xa
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/
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/
Thank you. Comments & questions?
@vfowler

More Related Content

More from Vernon Fowler

Service design 2016 conference sharing
Service design 2016 conference sharingService design 2016 conference sharing
Service design 2016 conference sharingVernon Fowler
 
User centred design and students' library search behaviours
User centred design and students' library search behavioursUser centred design and students' library search behaviours
User centred design and students' library search behavioursVernon Fowler
 
User stories workshop
User stories workshopUser stories workshop
User stories workshopVernon Fowler
 
Apps in language learning
Apps in language learningApps in language learning
Apps in language learningVernon Fowler
 

More from Vernon Fowler (7)

Project wall rooms
Project wall roomsProject wall rooms
Project wall rooms
 
Service design 2016 conference sharing
Service design 2016 conference sharingService design 2016 conference sharing
Service design 2016 conference sharing
 
User centred design and students' library search behaviours
User centred design and students' library search behavioursUser centred design and students' library search behaviours
User centred design and students' library search behaviours
 
User stories workshop
User stories workshopUser stories workshop
User stories workshop
 
UX Australia 2015
UX Australia 2015UX Australia 2015
UX Australia 2015
 
Apps in language learning
Apps in language learningApps in language learning
Apps in language learning
 
Amy pecha kucha
Amy pecha kuchaAmy pecha kucha
Amy pecha kucha
 

Recently uploaded

一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理thubko
 
Software Architecture - Architecture Styles and Patterns-1.pdf
Software Architecture - Architecture Styles and Patterns-1.pdfSoftware Architecture - Architecture Styles and Patterns-1.pdf
Software Architecture - Architecture Styles and Patterns-1.pdfjordantsagmo
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证ugzga
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfoliodhrumibshah13
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxjoshuaclack73
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjjoshuaclack73
 
Morgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity DesignMorgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity Design1508 A/S
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement 210303105569
 
Spring Summer 26 Colors Trend Book Peclers Paris
Spring Summer 26 Colors Trend Book Peclers ParisSpring Summer 26 Colors Trend Book Peclers Paris
Spring Summer 26 Colors Trend Book Peclers ParisPeclers Paris
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证ugzga
 
CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosDuyDo100
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...mikehavy0
 
Rise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintActionRise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintActionVictoria Gaitskell
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Spring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisSpring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisPeclers Paris
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...drmarathore
 
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyIsadora Agency
 

Recently uploaded (20)

一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
 
Software Architecture - Architecture Styles and Patterns-1.pdf
Software Architecture - Architecture Styles and Patterns-1.pdfSoftware Architecture - Architecture Styles and Patterns-1.pdf
Software Architecture - Architecture Styles and Patterns-1.pdf
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
 
Morgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity DesignMorgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity Design
 
Resume all my skills and educations and achievement
Resume all my skills and educations and  achievement Resume all my skills and educations and  achievement
Resume all my skills and educations and achievement
 
Spring Summer 26 Colors Trend Book Peclers Paris
Spring Summer 26 Colors Trend Book Peclers ParisSpring Summer 26 Colors Trend Book Peclers Paris
Spring Summer 26 Colors Trend Book Peclers Paris
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
 
CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product Photos
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
 
Rise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintActionRise of Digital Textiles__Published in PrintAction
Rise of Digital Textiles__Published in PrintAction
 
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UB毕业证书)纽约州立大学水牛城分校毕业证成绩单本科硕士学位证留信学历认证
 
Spring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisSpring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers Paris
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
 
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 

Accessibility testing a multi-channel form wizard

Editor's Notes

  1. Hi everyone. I helped iterate the Become a Library member form a couple of times this year. Our latest iteration “lever[s] existing technology [we previously didn’t] use” – you now confirm that you’re you by email or SMS. Growing complexities also meant converting a single page form into a multistep wizard. I’d like to share some of what we learned from accessibility user testing our new onboarding flow.
  2. First, scaling up to a form wizard; then failing at validation; winning at progress; and breaking mental models. I’ll finish with a note on logging and iteration.
  3. Until last Tuesday we had a simple one page form that many people completed on this computer. They received a plastic card and became a Library member. Members signed up several times: they’d lost their card, forgot they’d already joined, their renewal email went to an old address, and so on. It was also easy for spam bots to submit the form multiple times.
  4. Our project aims: ditch the plastic, minimize delays in providing member benefits, maximize self service, and annihilate those wasteful spam registrations. Oh, and while you’re at it, [Click] make the form work in these kiosks too!
  5. To achieve these, we employed a form wizard: a “design pattern to simplify complex processes performed infrequently or by novice users.” Ideally people would join only once in their life, and we’re all novices the first time, right?
  6. Our participant tested our wizard, first with their laptop. Fail at step 1: Injected validation messages weren’t announced by the screen reader. Even if they could, our message doesn’t indicate what’s wrong with the input, nor how to fix it. [Click]  Show stopper! I had to assist with error recovery… Next.
  7. It’s vital to show your progress, to “Distinguish the current step, and how many steps there are left.” We need to provide a sense of progress to screen reader users too. [Click] Unfortunately the HTML5 progress bar is not accessible!
  8. Scott O'Hara suggests “treat[ing] 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.” (Extra: His testing found that a “progress bar won't be fully accessible in all screen reader and browser pairings”.)
  9. To provide visually hidden text, we use the screen reader only class from the Bootstrap framework. [Click]  Our participant heard and understood they were making progress.  Let’s take a look at buttons…
  10. These buttons completely baffled our participant. We’d been so focused on making easy interactions with large touch targets for our new kiosk devices, that we lost sight of underlying semantics.
  11. Our participant pointed out that the buttons really should be radio inputs, and, unlike previously, this step lacks an explicit Next button. The interface didn’t align with their mental models of interfaces or flow! [Click] We’d chosen interface elements … poorly.
  12. 3 days before our testing session, Hui Jing Chen posted an inclusive design solution that makes radio inputs work for screen reader and touch screen users alike. For our next iteration of the form wizard, we’ll be working on fixing form semantics and the validation issues.
  13. Lastly, I recommend Eric Bailey’s advice: log issues you’ve identified, rate them, and prioritise which ones to iterate in your upcoming sprints.
  14. Thank you for listening to my first ever lightning talk.