The slides for the accessible design workshop held at Andela Kenya on 23rd May 2018

1. 1
Accessible Design
Topher Kanyuga
@tistopher

2. Outline
● What is Accessible Design?
● Why should you care?
● What are the principles of accessibility?
● Accessibility dos and don'ts for our focus groups.
● How can I go about implementing accessibility in my
designs?

3. What is Accessible Design?
“Accessibility is the practice of making your
websites usable by as many people as possible.”
- MDN

4. Persons of Interest
Visual Blindness, low vision, colour blindness
Hearing Deafness, low hearing
Mobility Physical, neurological
Cognitive ADHD, dyslexia, persons on the autism spectrum

5. Benefits of Accessible Design
● Enabling Access and Improving Usability for All
● Expanded Customer Base
● Reducing Expenses
○ Employee retention
○ Avoiding litigation
● Positive Public Perception
https://digital.gov/2017/05/09/benefits-of-accessible-design/

6. P
O
U
R
WCAG 2.0 Principles of Accessibility
Perceivable
Operable
Understandable
Robust
https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html

7. Accessibility for Visually Impaired (1/2)
● Provide descriptions/captions/alternative text for images
● Use simple and consistent layouts
● Allow keyboard navigation
● Use semantic HTML i.e. <header>, <nav>,<footer> instead
of <div class=”header”>

8. Accessibility for Visually Impaired (2/2)
● Avoid small font sizes
● Do not rely on colours alone - use text/shapes/icons too
● Contrast Ratio for text and icons:
○ >= 4.5:1 for normal text (>= 14pt),
○ >= 3:1 for large text (>= 18pt)
● Icons should have text descriptions

9. Contrast Example

10. Contrast Example With Values
1.5 1.47 1.27 2.115.79
1.6

11. Colour and Text Tools
● Contrast Ratio Checker - https://contrast-ratio.com
● Contrast Ratio Safe Palette Generator - http://colorsafe.co
● Colour Blindness Overlay -
https://michelf.ca/projects/mac/sim-daltonism/
● OS Accessibility Settings

12. Colour and Text Tools - contrast-ratio.com

13. Colour and Text Tools: colorsafe.co

14. Colour and Text Tools - Sim Daltonism
Colour Blindness Overlay -
https://michelf.ca/projects/mac/sim-daltonism/

15. Accessibility for the Hearing Impaired
● Provide captions and/or transcripts for audio and video
content
● Do not rely solely on audio indicators - Visual or haptic
indicators in addition
● Use plain language to the nuance provided by tone

16. Accessibility for Mobile Impairments
● Use large interaction areas e.g. buttons, form areas
● Allow keyboard navigation
● Design for touchscreen use
● Use semantic HTML

17. Accessibility for Cognitive Impairments
● Use plain language
● Avoid large blocks of text - use headings, images, videos
to break up text
● Keep a consistent layout
● Use images to support text

18. Quick Wins
● Use plain language
● Use a consistent layout and logical structure
● Use contrasting colours and readable font sizes
● Provide captions/transcripts for audio and video content
● Implement large clickable areas and form fields
● Allow normal keyboard use and do not break conventions
● Provide text descriptions for images
● Use semantic HTML

19. UK Govt Accessibility Posters (1/2)

20. UK Govt Accessibility Posters (2/2)

21. In Conclusion
“At some point in the future, we’re all going to
need accessible technology. [...] We are all only
temporarily abled.”
- Allison Shaw - Designing for inclusivity: How and why to get started

22. References
Web Content Accessibility Guidelines - https://www.w3.org/TR/WCAG20/
Material UI - https://material.io/guidelines/usability/accessibility.html
Bootstrap - https://getbootstrap.com/docs/4.0/getting-started/accessibility/
MDN - https://developer.mozilla.org/en-US/docs/Web/Accessibility
iOS - https://developer.apple.com/accessibility/ios/
Contrast Ratio Checker - contrast-ratio.com
Inclusive Design at Microsoft - https://www.microsoft.com/en-us/design/inclusive
UK Government - https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/