PaaS solutions help launch eCommerce stores in record time and provide lots of features out of the box. However, it is critical for developers to understand the UX and accessibility requirements to build inclusive digital solutions. Most projects fail to connect the creative and tech processes, so it's our job as "geek" to better bridge that gap. Let's explore the end-to-end process and best practices so you can ensure your next eCommerce project is compliant and optimised for all.

1. @sylvainreiter
Baking in accessibility throughout the project lifecycle

2. @sylvainreiter

3. @sylvainreiter
INCREASE IN TRAFFIC 12
MONTHS AFTER LAUNCH
77%
INCREASE IN CONVERSION
RATE 12 MONTHS AFTER
LAUNCH (1.4 TO 2.9% CVR)
166%

4. @sylvainreiter
An agency focused on digital transformation through UX and technology
Cyber-Duck
Growing since 2005. Over 80 staff. ISO accredited process. £5m revenue. HQ in London.
Our values: Excellence + Selfless + Relentless + Adaptive

5. @sylvainreiter
WHAT IS ACCESSIBILITY?

6. @sylvainreiter
A SET OF PRINCIPLES
✓ Perceivable
✓ Operable
✓ Understandable
✓ Robust

7. @sylvainreiter
A DIGITAL STANDARD
✓ Several levels of conformance
✓ More stringent criteria as you go up
✓ Used during audits to measure
compliance

8. @sylvainreiter
A DIGITAL STANDARD
✓ Several levels of conformance
• A - 25 criteria
• AA - 38 criteria
• AAA - 61 criteria

9. @sylvainreiter
A COMPLETE MINDSET
✓ Planning & UX
✓ Creative Design
✓ Development & Testing
✓ Ongoing improvements

10. @sylvainreiter
WHY SHOULD YOU CARE?

11. @sylvainreiter
REGULATORY COMPLIANCE
✓ ADA / Section 508 (USA)
✓ Disability Act (UK)
✓ Similar laws in EU / AUS
✓ Negative PR risk

12. @sylvainreiter
BEST PRACTICES
✓ Compatibility with all platforms
✓ Performance improvement
✓ Visual consistency
✓ SEO boost

13. @sylvainreiter
THE BASICS ARE EASY
✓ Images
✓ Links
✓ Form fields
✓ Keyboard navigation

14. @sylvainreiter
THE BASICS ARE EASY
✓ …

15. @sylvainreiter
IT’S GOOD FOR ECOMMERCE
✓ Increased conversions
✓ Untapped audience
✓ Unique differentiator
✓ Cost of customer service

16. @sylvainreiter
IT’S THE RIGHT THING TO DO
✓ It benefits everyone
✓ Equal participation for all
✓ 1 billion people depend on it
✓ Culture of diversity and inclusivity

17. @sylvainreiter
WHERE TO START

18. @sylvainreiter
CHECKLIST
✓ Prepare your team (mindset)
✓ Define KPIs (WCAG)
✓ Pick a platform (theming engine)
✓ Forget overlay solutions (do it yourself)
✓ Allow time for your teams (audits)
✓ Test, test, test

19. @sylvainreiter
TECHNICAL TIPS

20. @sylvainreiter
HTML LANDMARKS
✓ Special markup
<nav aria-
label="Secondary
Navigation">...</nav>

21. @sylvainreiter
SEMANTIC HEADINGS
✓ Ensure compatibility
with screen-readers
✓ Correct orders of <H>
✓ Alt tags on all images
✓ Captions on videos

22. @sylvainreiter
KEYBOARD NAVIGATION
✓ Consider focus triggers
- Navigation dropdown
- Accordions
- Forms

23. @sylvainreiter
KEYBOARD NAVIGATION

24. @sylvainreiter
SKIP LINK
✓ Add a skip link as the 1st
element of any page
<a href="#main-content"
class="skip-link">Skip to
content</a>

25. @sylvainreiter
CSS ELEMENTS
✓ Understand the impact
display: none; or visibility: hidden;
VS
opacity: 0; or overflow: hidden;

26. @sylvainreiter
FORM VALIDATION

27. @sylvainreiter
TESTING
DESKTOP SCREEN READERS SCREEN MAGNIFIERS
VoiceOver for iOS
Android Accessibility
Suite
Apple Magni
fi
er
Windows Magnifier
SPEECH RECOGNITION
MOBILE SCREEN READERS
CI / CD Tool

28. @sylvainreiter
TESTING
✓ Automated solutions

29. @sylvainreiter
TESTING

30. @sylvainreiter
TESTING
✓ Manual reports
✓ Gorilla testing
✓ Professional audits
✓ In-labs audits

31. @sylvainreiter
TESTING

32. @sylvainreiter
TESTING

33. @sylvainreiter
TALE OF CAUTION
✓ Do NOT use overlay solutions
• Don’t work as expected
• Don’t protect legally
• Expensive

34. @sylvainreiter
KEY TAKEAWAYS
✓ The internet is for everyone
✓ Accessible design is beautiful design
✓ Accessible websites improve conversions
✓ Accessibility is everyone’s responsibility

35. @sylvainreiter
TO CONCLUDE…

36. @sylvainreiter
ARE YOU READY
TO START
TOMORROW?

37. Let’s connect!
@SylvainReiter
cyber-duck.co.uk