Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive Design Through Testing

Slides for a meetup hosted and run by Expedia London (https://www.meetup.com/Expedia-London/events/232106564/). It is part of a series called "Know How" where subject matter experts from Expedia London talk all sorts of tech, from Java to Front-End.

Transcript

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 Robust Understandable 1 2 3 4
34. Perceivable 1 Can I find it?
35. Operable 2 Can I use it?
36. Understandable 3 Can I understand what to do, and what will happen?
37. Robust 4 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