This document discusses inclusive design and accessibility. It defines inclusive design and disabilities. It outlines tools for making content accessible, including screen readers like NVDA and JAWS. It describes the four main WCAG guidelines of perceivable, operable, understandable and robust. It demonstrates how to use VoiceOver on iOS. It provides four "golden rules" of inclusive design around images, links, markup and color contrast. It recommends a tool for checking color contrast ratios. The overall message is that inclusive design benefits all users and we should aim to understand different user experiences.

1. Beyond WCAG 2.0:
Effective Inclusive Design
Through Testing

2. @jackarmley

4. What is inclusive design?
What is a “disability”
Our toolset for including users
with a disability
Picking a screenreader
4 inclusive design golden rules
An automated quick win
Setting the ground Demo time!

5. http://bit.ly/knowhowquote

6. “The design of products that are
accessible to, and usable by, as many
people as reasonably possible, without
special adaptation or specialised
design”
British Standards Institute (2005) - Edited

7. “The design of products,
devices, services, or
environments for people
with disabilities”
Wikipedia

9. Can we understand the user?
Can we replicate their experience?

12. michellecharlton.co.uk/responsive/

14. ✔
Can we understand the user?
Can we replicate their experience?
✔

17. “...you have a physical or mental impairment that
has a ‘substantial’ and ‘long-term’ negative effect
on your ability to do normal daily activities.”
- gov.uk

18. ...blindness and low vision, deafness and hearing
loss, learning disabilities, cognitive limitations,
limited movement, speech disabilities.
- W3C

19. “In the UK, there are almost 2 million
people living with sight loss.”
- NHS

20. “People with disabilities … includes
anyone who might become
disabled at any point in life through
injury, disease, or aging. (Which is
potentially everyone.)”
- eone-time.com/inclusive-design-is-a-social-justice-issue/

21. Permanent Temporary Acquired

22. Born with blindness Forget glasses at home
for the day
Vision gets poorer with
age
Permanent Temporary Acquired

23. Born with dyspraxia Fall and break an arm Develop arthritis later on
in life
Born with blindness Forget glasses at home
for the day
Vision gets poorer with
age
Permanent Temporary Acquired

24. Born with dyslexia Learning a new subject Develop dementia
when older
Born with dyspraxia Fall and break an arm Develop arthritis later on
in life
Born with blindness Forget glasses at home
for the day
Vision gets poorer with
age
Permanent Temporary Acquired

25. Can we understand the user?
Can we replicate their experience?
✔

26. What is inclusive design?
What is a “disability”
Our toolset for including users
with a disability
Picking a screenreader
4 inclusive design golden rules
An automated quick win
Setting the ground Demo time!
✔
✔

31. w3.org/TR/WCAG20/

32. “Web Content Accessibility Guidelines (WCAG) 2.0
covers a wide range of recommendations for making
Web content more accessible to a wider range of
people with disabilities.
-WCAG 2.0 Spec

33. Perceivable Operable
RobustUnderstandable
1 2
3 4

34. Perceivable1
Can I find it?

35. Operable2
Can I use it?

36. Understandable3
Can I understand what to do, and what will happen?

37. Robust4
Can I use it with my chosen device, browser
and assistive technology?

38. Essential Achievable on all
modern websites
Specialist techniques
only possible on
simpler sites or those
specifically targeted to
a certain need
A AA AAA

44. What is inclusive design?
What is a “disability”
Our toolset for including users
with a disability
Picking a screenreader
4 inclusive design golden rules
An automated quick win
Setting the ground Demo time!
✔
✔
✔

45. Demo time!

47. OS Preinstalled Cost
Recommended
browser
NVDA ✘ $0
JAWS ✘ $895 - $1,095
Voiceover ✔ $0
Talkback ✔ $0

48. OS Preinstalled Cost
Recommended
browser
NVDA ✘ $0
JAWS ✘ $895 - $1,095
Voiceover ✔ $0
Talkback ✔ $0

50. VO key ctrl ⌥
Move item by item VO ← →
Move to the start of
the document VO ⇧ ↓
Rotor VO U
Start VO ⌘ F5

51. Skip by heading VO ⌘ H
Skip by form control VO ⌘ J
⇧Reverse

52. webaim.org

53. What is inclusive design?
What is a “disability”
Our toolset for including users
with a disability
Picking a screenreader
4 inclusive design golden rules
An automated quick win
Setting the ground Demo time!
✔
✔
✔
✔

54. Voiceover tour

55. Golden rule no.1:
Images have an aural equivalent

56. Benefits
Screenreader users can enjoy your images.
Makes images more effectively parsable by robots (like
Google images).

57. Golden rule no.2:
Links make sense out of context

58. Benefits
Screenreader users can more quickly jump to links in any
part of your page, using the element quick nav.
If links are buried within content, they will be generally
more readable by all users.

59. Golden rule no.3:
Markup is fit for purpose

60. Screen curtain VO ⇧ F11

61. Benefits
Screenreader users get an accurate aural equivalent for
rich interactions.
Keyboard-only users can navigate your content.
Often forces you to use more semantic elements (like
buttons) where previously <spans /> or <a /> elements
may have been used.

62. Golden rule no.4:
Colors have sufficient contrast

63. Benefits
Colorblind users can read your content
Your content will be more readable in bright sunlight, or if
someone’s mobile screen is dimmed to save power (for
example)

64. An automated quick win

65. http://leaverou.github.io/contrast-ratio/

67. ✔
Can we understand the user?
Can we replicate their experience?
✔

68. “We are all T.A.B.S
(Temporarily Able Bodied)”
- Robin Christopherson,
Head of Digital Inclusion at AbilityNet

69. Questions?
codepen.io/jackarmley/
bit.ly/knowhowquote