Implementation of Accessibility guidelines by following WCAG or Section 508 might be perceived as a daunting task. WCAG 2.0 pertains 3 levels and 4 principles with 61 guidelines. WCAG 2.1 became effective from 2018 June with 17 more guidelines, totalling 78 guidelines to design experience for all abilities. This presentation will simplify the complex WCAG and 508 standards into 9 simple strategies to design Inclusive Experience.

1. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
9 Simple Strategies for
Designing Inclusive
Experiences
Rajesh Kalidindi
@rajeshdesign | in/rajeshdesign

2. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
Inclusive Experience
Vision Hearing Speech Mobility Mobility Cognitive

3. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
Impact of Exclusion
ONE BILLION PEOPLE
ON THE PLANET
1 IN 4 AMERICANS $2 TRILLION NET
WORTH

4. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
Web Content Accessibility Guidelines
(WCAG)
4 Principles 2 Versions 3 Levels 78 Guidelines

5. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
9 Strategies
Design
Test
Change

6. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
1. Layout (Design)

7. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
1. Layout (Design) - Landmarks

8. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
1. Layout (Design) – Page Title
Visual Title: None
<title>SPL - Home | The Seattle Public
Library </title>
Visual Title: Online Resources
<title>Online Resources | The Seattle Public
Library</title>
Visual Title: Event Calendar
<title>Event Calendar | The Seattle Public
Library</title>

9. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
1. Layout (Design) – Headings

10. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
1. Layout (Design) – Orientation

11. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
1. Layout (Design) – Responsive

12. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
2. Navigation (Design) - Bypass Blocks

13. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
2. Navigation (Design) –Models

14. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
2. Navigation (Design) - Keyboard Focus
& Order

15. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
3. Content (Design) - Text Contrast

16. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
3. Content (Design) – Images / Graphics
<img src="smiley.gif"
alt="Smiley face">

17. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
3. Content (Design) - Animations

18. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
3. Content (Design) - Color, Shape, Size,
Sound

19. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
3. Content (Design) - Data Tables

20. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
3. Content (Design) - Videos & Audios

21. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
3. Content (Design) - Documents

22. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
4. Data Entry (Design) - Labels

23. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
4. Data Entry (Design) - Instructions

24. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
4. Data Entry (Design) - Keyboard Shortcuts

25. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
4. Data Entry (Design) - Enough Time

26. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
4. Data Entry (Design) - Dynamic Content &
Custom Widgets

27. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
5. Compliance Test
• Automated Tests
• Manual Tests
• Compatibility with Assistive Technology

28. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
6. Usability Test
• Feedback is more important than testing process

29. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
7. Champions

30. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
8. Executive Support

31. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
9. Persistence

32. #UXPA2019
@rajeshdesign
Download our mobile app at UXPA.org/2019app
and share feedback via the conference survey!
9 Strategies for Designing Inclusive
Experiences
Design
• Layout
• Navigation
• Content
• Data Entry
Test
• Compliance
• Usability
Change
• Champions
• Exec Support
• Persistence
Purpose
Conformance
Impact