Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How we became accessibility champions and how you could to!

176 views

Published on

We will start the session with an introduction into inclusive design. We will be exploring varying accessibility personas such as motor impairments like arthritis, visual loss or colour blindness and cognitive examples of dyslexia or autism.

We'll then move into our case study, what we have learnt in our accessibility journey at Auto Trader, how we challenged the 'norm' and in doing so, helped bring about change that's lead - indirectly - to the creation of a core pattern library; fledgling accessibility testing to new projects; a new careers site designed, built and audited to WCAG 2.0 AA, as well as running awareness workshops: all to ensure accessibility is at the core of design and development across all of Auto Trader.

Finally, we will invite workshop attendees to participate in some live accessibility testing. Users will be grouped to various impairments (motor/visual/cognitive), with the aim for them to complete tasks and in doing so empathise will real world users.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

How we became accessibility champions and how you could to!

  1. 1. How we became accidental accessibility champions, and how you could too! 1 Section title Chris Gibbons Senior UX Developer @_gbbns Anya Braun UX Researcher @ux_lady
  2. 2. What we’re going to do: • Talk about how we accidently become the face of accessibility • Things that helped us along the way • Establishing an inclusive design culture • What we’ve still got to learn 2 Section title
  3. 3. You’ll get a chance to: • Empathise with a range of impairments • Carry out your own accessibility testing (ethically) • Takeaway practical tips & advice to enable you to do this 3 Section title
  4. 4. Auto Trader 4 Section title
  5. 5. 5
  6. 6. 12t h biggest UK Page views, ComScore CY2017 website 55mmonthly 585,000 Vehicles listed per day (average) 4xmore Auto searches than Google Engagement compared with all other portals COMBINED 2.5x 95 Adviews per second 140kvehicles moved with MTD cross-platform visits ComScore –Nov 17 2xmore influential for new car buyers than nearest competitor Annual Car Buying Report 2016
  7. 7. Diversity & Inclusion Culture Section title 7
  8. 8. Globally, how many people have some form of disability?
  9. 9. 1 Billion! (approx. 15%!) 9 http://www.who.int/disabilities/world_report/2011/en/
  10. 10. How many people in the UK do you think have access needs?
  11. 11. 13.9 million people in the UK Family resources survey - financial year 2016/17 https://www.scope.org.uk/media/disability-facts-figures
  12. 12. In 2011 what % of websites failed to meet WCAG guidelines? 12
  13. 13. 98%! 13 http://www.accessiq.org/learn/content/web-accessibility-infographic
  14. 14. POUR 4 principles of accessibility 14
  15. 15. POUR https://www.youtube.com/watch?v=hs8sykCaf3E 15 https://twitter.com/dugboticus
  16. 16. POUR • Perceivable • Operable • Understandable • Robust
  17. 17. What is inclusive design?
  18. 18. Over to you
  19. 19. “Digital inclusion, or rather, reducing digital exclusion, is about making sure that people have the capability to use the internet to do things that benefit them day to day” https://www.gov.uk/government/publications/government-digital-inclusion- strategy/government-digital-inclusion-strategy
  20. 20. 'The design of mainstream products and/or services that are accessible to, and usable by, as many people as reasonably possible...
  21. 21. Predictive text
  22. 22. 22
  23. 23. Subtitles
  24. 24. 24
  25. 25. OXO Good Grips
  26. 26. 26 http://americanhistory.si.edu/collections/search/object/nmah_1417719
  27. 27. Types of impairment
  28. 28. Vision
  29. 29. Hearing
  30. 30. Motor
  31. 31. Cognitive
  32. 32. Web Accessibility Perspectives: Keyboard Compatibility https://www.youtube.com/watch?v=93UgG72os8 M
  33. 33. Accessibility Research How would you make users feel comfortable? 33
  34. 34. Things to consider: • Assistive tech/equipment • Home visit • Consider meet & greet? • Ensure safety & comfort Section title 34
  35. 35. Inclusive Design Personas
  36. 36. Steps we’ve taken • Building awareness • Audit & Integrate with product life cycle • Building up a case study • Creating a working group • Getting stakeholder buying in
  37. 37. Building awareness
  38. 38. http://uxinthecity.net/2017/manchester/
  39. 39. 39
  40. 40. Are we digitally inclusive? Section title 41
  41. 41. Chris Bush @southern Molly Watt @mollywatttalks
  42. 42. “But blind people dont drive cars?” Section title 43
  43. 43. Workshops & Awareness 44
  44. 44. Retinitis Pigmentosa 45
  45. 45. Arthritis simulation gloves 46 www.inclusivedesigntoolkit.com
  46. 46. What next? Section title 47
  47. 47. Product life cycle
  48. 48. 49 Research How can we prove that these users exist?
  49. 49. 51 Unique events per month 1k – 3k
  50. 50. 52 <a href="#content" class="tracking-standard-link at- accessibility-link" data-label="accessibility-skip-to- content"> Skip to content </a>
  51. 51. Lab Study Goal: Observe how users with different impairments interact with Auto Trader 53
  52. 52. 5 participants • Visually impaired • Dyslexic • ADHD • Motor Impairment • Colour Blind 54
  53. 53. What did we learn? 55 Recruitment is key
  54. 54. What did we learn? 56 Choice overload
  55. 55. What did we learn? 57 Colour Contrast
  56. 56. Design
  57. 57. Re-brand
  58. 58. The colour palette 60 #FFD5D1 255,213,209 pink #5D7199 93,113,153 blue-light #FFEBB6 255,235,182 yellow-light #FF4436 255,68,54 at-red #313C53 49,60,83 at-blue #FFC400 255,196,0 yellow #FE0600 254,6,0 red-dark #242D3D 36,45,61 blue-dark #FF9A00 255,154,0 orange #F7F7F5 247,247,245 grey-light #86EBE9 134,235,233 aqua-light #B4EDA0 180,237,160 green-light #E8E8E3 232,232,227 grey #00D7D2 0,215,210 at-aqua #7BD500 123,213,0 green #D0D0CB 208,208,203 grey-dark #06A09D 6,160,157 aqua-dark #3F7600 63,118,0 green-dark
  59. 59. Pattern Library 61
  60. 60. Development Section title 62
  61. 61. Recurring themes
  62. 62. Missing attributes 64 <img src="https://placekitten.com/g/200/300" />
  63. 63. Missing attributes 65 <img src="https://placekitten.com/g/200/300" alt="" />
  64. 64. Missing attributes 66 <img src="https://placekitten.com/g/200/300" alt="Kitten looking confused" />
  65. 65. Missing attributes 67
  66. 66. Missing attributes 68
  67. 67. Missing attributes 69
  68. 68. Anchor tags without href. 70 <li> <a class="a-class">a link</a> </li> <li> <a class="a-class">a link</a> </li>
  69. 69. Anchor tags without href. 71 <li> <a class="a-class" href="/path-to-url/">a link</a> </li> <li> <a class="a-class" href="/path-to-url/">a link</a> </li>
  70. 70. Demo https://goo.gl/MsKfU4
  71. 71. Is it a button or a link? 73 “Something that comes up again and again in front-end accessibility is the issue of links versus buttons. You know, the HTML elements that open links in new windows or submit forms? ” https://marcysutton.com/links-vs-buttons-in-modern-web-applications/
  72. 72. :focus 75 /* remember to define focus styles! */ :focus { outline: 0; } http://www.outlinenone.com/
  73. 73. Marking up a things correctly 76 <label>Enter your name:</label> <input type="text” />
  74. 74. Marking up a things correctly: 77 <label for="name">Enter your name:</label> <input type="text" name="name" id="name”/>
  75. 75. Testing Section title 79
  76. 76. Automate all the things 80
  77. 77. Turning CSS off 81
  78. 78. Turning CSS off 82
  79. 79. Take the no mouse challenge https://webaim.org/articles/screenreader_testing/
  80. 80. Keyboard navigation possible? 84
  81. 81. Over to you
  82. 82. Experience it for yourself
  83. 83. Blind film critic https://www.youtube.com/watch?v=P1e7ZCKQfMA
  84. 84. Discussion
  85. 85. Case Study
  86. 86. Careers site
  87. 87. 93 Core Pattern Library “sparkplug”
  88. 88. 94
  89. 89. Working group
  90. 90. Inclusive Design Guild Section title 96
  91. 91. 0.24%! (approx.) Section title 97
  92. 92. How to do this? • Spam communication channels • Biscuits • “Recruit” people after the awareness workshops Section title 98
  93. 93. Training 100 https://eu.udacity.com/course/web-accessibility--ud891
  94. 94. Assistive tech & screen readers 101 https://www.nvaccess.org/
  95. 95. Know your audience
  96. 96. Takeaways • Build awareness • Audit & Integrate with product life cycle • Case study • Working group • Know your audience (stakeholders) 106
  97. 97. • It’s not easy • It’s not quick • But it’s rewarding!
  98. 98. Apple – Accessibility – Sady https://www.youtube.com/watch?v=XB4cjbYywqg Section title 108
  99. 99. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect…” https://www.w3.org/Press/IPO-announce
  100. 100. Section title 110
  101. 101. Thank you. @_gbbns @ux_lady Resources: https://goo.gl/f5KTgK #autotraderlife
  102. 102. Q&A Section title 112

×