Is eCommerce intentionally inaccessible?

is eCommerce intentionally inaccessible?

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