A presentation at #a11yTOConf by Hector Osborne Rodriguez
Is eCommerce intentionally inaccessible? Hector Osborne Rodriguez @HecOsborneRod
Hector Osborne Rodriguez Front-End Development Manager at Accenture Linked In: @HectorOsborneRodriguez Twitter: @HecOsborneRod
Slides: bit.ly/a11y-eCommerce @HecOsborneRod
How do I wish to buy something online? 1 2 3 Search Add To Cart Checkout @HecOsborneRod
1 Search for a product
What we design Search 1 Search @HecOsborneRod
What we (might) need Shorts Shorts Men shorts Women shorts Basketball shorts Running shorts 1 Search @HecOsborneRod
What we didn’t know we need Shorts Top Results Shorts Men shorts Women shorts Basketball shorts Evolution Short $200.00 Evolution Short $120.25 Running shorts Rise Short $150.00 $100.00 Categories Short $150.00 Shorts Women Clothing Women 1 Search See more results @HecOsborneRod
Search results page HEADER FILTERS MAIN FOOTER 1 Search @HecOsborneRod
Keyboard navigation HEADER 1 MAIN FILTERS N+1 2 3 4 5 6 7 … N Navigating through filters requires multiple interactions 1 Search @HecOsborneRod
Keyboard navigation HEADER 1 MAIN FILTERS 2 FOOTER 1 Search @HecOsborneRod
Keyboard navigation HEADER 1 2 MAIN Skip Filters 3 Adding “skip filters” potentially reduces multiple interactions 1 Search @HecOsborneRod
takeaway #1 Keep it simple
2 Add to Cart
Listing pages BEST-SELLERS See more Add to Cart See all Add to Cart Add to Cart Add to Cart SCI-FI Add to Cart See all See more Add to Cart Add to Cart Add to Cart Add to Cart HORROR Add to Cart 2 Add to Cart Add to Cart See all Add to Cart Add to Cart Add to Cart Repeated elements are a sign of warning Add to Cart @HecOsborneRod
Product Cards 2 Add to Cart 1 2 3 Add to Cart Add to Cart Add to Cart 4 5 6 Add to Cart Add to Cart Add to Cart @HecOsborneRod
Product Cards Category Label Clearance Colour variant Product name Brand Rating Price Call to action 2 Add to Cart Everywhere backpack by Brand Name (200) $119.97 $199.99 Add to Cart @HecOsborneRod
Product Cards Clearance clickable clickable clickable Everywhere backpack clickable by Brand Name clickable (200) $119.97 $199.99 clickable 2 Add to Cart Add to Cart @HecOsborneRod
Product Cards Clearance 1 2 3 4 5 6 7 8 Everywhere backpack 9 by Brand Name 10 (200) $119.97 $199.99 11 2 Add to Cart Add to Cart @HecOsborneRod
Product Cards Clearance :hover :focus :blur :hover :focus click click Everywhere backpack by Brand Name (200) click $119.97 $199.99 Add to Cart 2 Add to Cart @HecOsborneRod
Alternative Add To Cart Help us keep your account safe by clicking on the checkbox below. Press & Hold Please try again 2 Add to Cart @HecOsborneRod
Modals Choose a store Product Name See more Find store near you: Product Name See more $10.00 Add to Cart Add to Cart Add to Cart Add to Cart Add to Cart Shop here Shop here Shop here Add to Cart Set my store before showing list of products 2 Add to Cart @HecOsborneRod
Modals See more Enter your email to win a 10% discount: Add to Cart Add to Cart Add to Cart Product Name Email Submit See more Add to Cart 2 Add to Cart Add to Cart Add to Cart @HecOsborneRod
Modals Item added to the cart Product Name $10.00 See more Add to Cart Add to Cart View Cart (2) Add to Cart Checkout Sometimes: Continue Shopping See more Add to Cart Add to Cart Add to Cart Any “fly out” must shift focus to or within itself. Esc returns focus to the launcher element. 2 Add to Cart @HecOsborneRod
takeaway #2 Design with intent
3 Checkout
Secure Checkout Guest Checkout Sign In No account? No problem. Checkout faster and keep track of your orders Create an account later to keep track of your orders. by signing into your account. Continue as guest Email address: Password: Show Sign In 3 Checkout Forgot your password? @HecOsborneRod
Secure Checkout Guest Checkout Sign In No account? No problem. Checkout faster and keep track of your orders Create an account later to keep track of your orders. by signing into your account. Continue as guest Email address: Password: Show Sign In 3 Checkout Forgot your password? @HecOsborneRod
Secure Checkout - autocomplete Email address: First Name: Last Name: Company (optional): Address: City: Country: Province: Zip Code: Phone Number: 3 Checkout @HecOsborneRod
Secure Checkout - autocomplete Email address: hector.osborne.rodrriguez@shopping.com First Name: Last Name: Hector Is it really necessary? Osborne Rodriguez Company (optional): Address: 1 King St City: Toronto Country: Canada Province: Ontario Zip Code: M5A 2A8 Phone Number: (416) 555-5555 3 Checkout @HecOsborneRod
Secure Checkout – credit card information We accept the following cards. Card Number 1234 5555 3333 0000 Name on card: Hector Osborne Rodriguez Expiry Month 01 3 Checkout Expiry Year 01 CVV
@HecOsborneRod
takeaway #3 Use accessible form patterns
Thank you Linked In: @HectorOsborneRodriguez Twitter: @HecOsborneRod
In this talk Hector will dissect the structure of an eCommerce website and highlight the areas were are potentially creating unaccessible experiences by design. You will learn what you need to watch out for when creating accessible eCommerce experiences, identify which components are unintentionally unaccessible and present some ideas on how to make them more usable.
for free. You
can too.