Accessible design is good design. In this talk, we will discover the importance of web accessibility, and highlight how we all benefit from the accessible design choices all around us. Gain an understanding of the four principles of web accessibility, before exploring three keys for applying those principles naturally to your design and development process. This presentation will include experiences of advocating for and leading company initiatives toward accessibility, as well as practical examples demonstrating the before and after of our keys to an accessibility mindset.

1. The Keys To An
Accessibility Mindset
DANIEL YUSCHICK

2. Table Of Contents
1 Relating To Accessibility
2 The POUR Principles Of Accessibility
3 The Keys To An Accessibility Mindset

3. Relating To Accessibility

4. Accessible design
is good design

5. ➔ Requires cross-team collaboration
➔ Is never ‘done’
➔ Benefits an ever-expanding audience
➔ Directly impacts conversion and sales
➔ A person expects their hardware to be
supported
➔ Products only require responsive design
The benefits of responsive design
are the benefits of accessible design

6. Tell me why

7. Web accessibility is
fundamentally misunderstood

8. An estimated 1 in 6 people worldwide
experience significant disability
World Health Organization, 2022

9. The POUR Principles
Of Accessibility

10. P
Perceivable
O
Operable
U
Understandable
R
Robust

11. The Keys To An
Accessibility Mindset

12. Markup is functional
Not visual
Visit CodePen Demo

13. Markup must communicate
as clearly as design

14. How To Know When Content Needs
Perceivable Markup
1 When design visually communicates state
E.g. Active page, active tab, loading, disabled
2 When information is outside the flow of content
E.g. Toast message, dialogs, error messages, tooltips
3 When content is dynamic or live
E.g. Notifications, chat, tabs
4 When recreating standard elements
E.g. Progress bars, accordions, select menus

15. Use more than color
to indicate state

16. Recap

17. Recap
1 Perceivable, Operable, Understandable, Robust
2 Markup Is Functional, Not Visual
3 Markup Must Communicate As Clearly As Design
4 Use More Than Color To Indicate State

18. Questions

19. Thank You!
@DANIELYUSCHICK