Beginner's guide to making the web accessible
•
1 like•99 views
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.
Recommended
More Related Content
Similar to Beginner's guide to making the web accessible
Similar to Beginner's guide to making the web accessible (20)
Recently uploaded
Recently uploaded (20)
Beginner's guide to making the web accessible
- 1. 1 Making the web accessible The beginner’s guide to Presentation by Elena Akaliyska
- 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
- 5. 5 People with disabilities worldwide 1 of 5 1 bln in the USA worldwide 1 of 7 in the EU
- 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
- 11. 11 Accessibility Guidelines by Voxmedia • Writers • Designers • Developpers • QA • Project Managers The Checklist
- 12. 12
- 14. 14
- 15. 15 Accessibility for people who have motor impairments • Enable keyboard navigation • Allow keyboard shortcuts • Enable voice commands
- 17. 17 Impaired hearing due to health condition or context Deaf Bartender Foreigner
- 18. 18 Accessibility for people who have impaired hearing • Captioning • Custom captions for videos
- 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
- 22. 22 Assistive technology for the blind Screen readers - VoiceOver for mac
- 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.
- 28. 28 Accessibility for people with moderately impaired vision or color blindness • Pick legible fonts
- 29. 29 bd pq lI1 Avenir Next bd pq lI1 Helvetica bd pq lI1 PT Sans bd pq lI1 Roboto bd pq lI1 Lato bd pq lI1 Montserrat bd pq lI1 Source Sans Pro bd pq lI1 Noto Sans bd pq lI1 Open Sans
- 30. 30
- 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
- 38. 38 colorsafe.co
- 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
- 45. 45