Elena Akaliyska, Digital Product Designer at Kickflip shares some useful tips and resources that every digital designer could use to start making more inclusive user interfaces during Sofia Dribbble Meetup on April 3, 2019.
Kickflip is a digital product studio. We team up with human beings, organizations, and societies to help them bring customer-centric mindset to their environments. Together we constantly transform and create positive impact for their users and businesses.
To learn more, visit www.kickflip.digital or reach out to hi@kickflip.digital.
3. 3
What this have to do with web…or tech…or me?
User centred design
Understand
context of use
Specify user
requirements
Design
solutions
Evaluate against
requirements
4. 4
What this have to do with web…or tech…or me?
User centred design
Understand
context of use
Specify user
requirements
Design
solutions
Evaluate against
requirements
Who
How
When
Why
6. 6
“Disabled” is a matter of context
Data from the USA. Source Inclusive Toolkit Manual by Microsoft.
One arm
Permanent
26 K
Broken arm
Temporary
13 M
Holding a baby
Situational
8 M
7. 7
“Disabled” is a matter of context
Data from the USA. Source Inclusive Toolkit Manual by Microsoft.
One arm
Permanent
26 K
Broken arm
Temporary
13 M
Holding a baby
Situational
8 M
8. 8
“Disabled” is a matter of context
Data from the USA. Source Inclusive Toolkit Manual by Microsoft.
One arm
Permanent
26 K
Broken arm
Temporary
13 M
Holding a baby
Situational
8 M
9. 9
“Disabled” is a matter of context
Data from the USA. Source Inclusive Toolkit Manual by Microsoft.
One arm
Permanent
26 K
Broken arm
Temporary
13 M
Holding a baby
Situational
8 M
10. 10
W3C
World Wide Web Consortium
Web Accessibility Initiative (WAI)
• Writers
• Designers
• Developpers
• QA
• Project Managers
20. 20
Impaired vision
• People who are legally (completely) blind
• People who have impaired vision
• People with color blindness
• People with temporary or situational vision impairment
• Hurt their eyes In a dim/dark room
• Using device with insufficient contrast
21. 21
36 mln
blind people worldwide
217 mln
people have moderate to severe visual impairment
Accessibility for people who are blind or have very low vision
23. 23
Accessibility for people who are blind or have very low vision
• Clearly define hierarchy in the content
• Add alt text to images and graphics
24. 24
• Clearly define hierarchy in the content
• Add alt text to images and graphics
• Links should have clear labels
Accessibility for people who are blind or have very low vision
25. 25
Click here to read the guidelines
See gallery with examples here
This is our favourite contrast checker.
26. 26
Click here to read the guidelines
See gallery with examples here
This is our favourite contrast checker.
Click here to read the guidelines
See gallery with examples here
This is our favourite contrast checker.
27. 27
Click here to read the guidelines
See gallery with examples here
This is our favourite contrast checker.
31. 31
Accessibility for people with moderately impaired vision or color blindness
• Pick legible fonts
• Don’t use capitalisation for important information
32. 32
DO YOU READ ME?
Do You Read Me?
Do you read me?
DO YOU READ ME?
Do You Read Me?
Do you read me?
33. 33
Accessibility for people with moderately impaired vision or color blindness
• Pick legible fonts
• Don’t use capitalisation for important information
• Don’t use fonts that are too small
35. 35
Accessibility for people with moderately impaired vision or color blindness
• Pick legible fonts
• Don’t use capitalisation for important information
• Don’t use fonts that are too small
• Ensure good contrast
39. 39
• Pick legible fonts
• Don’t use capitalisation for important information
• Don’t use fonts that are too small
• Ensure good contrast
• Don’t really on color only to communicate key information
Accessibility for people with moderately impaired vision or color blindness