Why Won't You Take My Money

Presented at PAYMENTSfn 2018.

Abstract:
Roughly 1 in 5 people around the world live with a disability, and in the United States alone people with disabilities control $175 billion in discretionary income. Unfortunately, many sites and apps on the web can be near-impossible to use, even with assistive technology. Payment flows are generally designed to be usable, with minimal steps and clear directions, because it's known that that increases conversion and purchases. At the same time, though, many of the same flows neglect accessibility concerns and make it difficult for a significant portion of the population to buy.

In this talk, I'll discuss the basics of web accessibility, reveal accessibility mistakes that are common on payment forms and in payment flows, and give you some practical tips on how to improve the payment experience for your own users.

Transcript

1. Why Won't You Take My Money? @sublimemarch
2. Stephanie Slattery @sublimemarch @sublimemarch
3. What is accessibility? @sublimemarch
4. The design of products, devices, services, or environments for people who experience disabilities. @sublimemarch
5. Accessibility is about inclusion. @sublimemarch
6. People with disabilities are using the technology you create. @sublimemarch
7. 1 in 5 Americans have a disability @sublimemarch
8. Accessibile design helps everyone! @sublimemarch
9. Why would we make something accessible? @sublimemarch
10. To improve the lives of people with disabilities @sublimemarch
11. We are responsible for what we create. @sublimemarch
12. It's the law. @sublimemarch
13. Lawsuits Scribd Five Guys Dick Blick Peapod H&R Block eBay Hilton Carnival Cruise Lines Ace Hardware GrubHub @sublimemarch
14. "Plaintiff found the gift card page confusing and was unable to purchase products from the website because the checkout feature did not work properly." -- Sean Gorecki vs Hobby Lobby Stores, Inc. (2017) @sublimemarch
15. "For over 20 years, the DOJ has consistently maintained that the ADA applies to private websites that meet the definition of a public accommodation. ... Hobby Lobby had more than sufficient notice ... to determine that its website must comply with the ADA." -- Judge John F. Walter, U.S. District Judge @sublimemarch
16. To capitalize on a wider audience or consumer base. @sublimemarch
17. $175 billion in discretionary income @sublimemarch
18. Take my money! @sublimemarch
19. So how do we build things accessibly and inclusively? @sublimemarch
20. Listen to people with disabilities. @sublimemarch
21. Follow best practices. @sublimemarch
22. How can we make sure payment forms are accessible? @sublimemarch
23. Screen Readers @sublimemarch
24. Forms should be easy to use. @sublimemarch
25. Ensure forms are keyboard accessible. @sublimemarch
26. Clear instructions are necessary. @sublimemarch
27. Associate labels with form components. @sublimemarch
28. Use fieldset and legend for groups of form components. @sublimemarch
29. Basic text input <label for="first-name">First Name</label> <input id="first-name" type="text"> @sublimemarch
30. What if we don't want to see the label? @sublimemarch
31. If necessary, use CSS to visually hide an item. .hidden { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } @sublimemarch
32. What if I have help text that's not quite a label? @sublimemarch
33. <label for="cvv">CVV</label> <input type="number" id="cvv"> <span>For Visa, Mastercard, and Discover etc</span> @sublimemarch
34. ARIA to the rescue! @sublimemarch
35. aria-describedby <label for="cvv">CVV</label> <input type="number" id="cvv" aria-describedby="cvv-help"> <span id="cvv-help">For Visa, Mastercard, and Discover etc</span> @sublimemarch
36. And so much more... • understandable placeholder text • cart timers and valid business exceptions • clear error messages • avoiding Javascript for form functionality • submit buttons as inputs, not links @sublimemarch
37. You can do it! @sublimemarch
38. Accessible payment forms are doable! @sublimemarch
39. Why Won't You Take My Money? Stephanie Slattery @sublimemarch @sublimemarch