O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Accidentally becoming accessibility champions - Chris Gibbons & Anya Braun [Camp Digital 2018]

650 visualizações

Publicada em

Hear how two UX experts challenged the 'norm' and in doing so, helped bring about change that's lead - indirectly - to ensuring accessibility is at the core of design and development across all of Auto Trader.

Publicada em: Tecnologia
  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

Accidentally becoming accessibility champions - Chris Gibbons & Anya Braun [Camp Digital 2018]

  1. 1. Accidental Accessibility Champions. 1 Section title Chris Gibbons Senior UX Developer @_gbbns Anya Braun UX Researcher @ux_lady
  2. 2. We’re going to tell you about: • How we accidently become the face of accessibility • Establishing an inclusive design culture • What we’ve still got to learn 2 Section title
  3. 3. Auto Trader 3 Section title
  4. 4. 4
  5. 5. 12th 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
  6. 6. Diversity & Inclusion Culture Section title 6
  7. 7. http://uxinthecity.net/2017/manchester/
  8. 8. 8
  9. 9. Are we digitally inclusive? Section title 10
  10. 10. Workshops & Awareness 12
  11. 11. Retinitis Pigmentosa 13
  12. 12. Arthritis simulation gloves 14www.inclusivedesigntoolkit.com
  13. 13. What next? Section title 15
  14. 14. “But blind people dont drive cars?” Section title 16
  15. 15. 17 Research How can we prove that these users exist?
  16. 16. 19 Unique events per day 50 - 80
  17. 17. 20 <a href="#content" class="tracking-standard-link at- accessibility-link" data-label="accessibility-skip-to- content"> Skip to content </a>
  18. 18. Lab Study 21 Goal: Observe how users with different impairments interact with Auto Trader
  19. 19. 5 participants 22 • Visually impaired • Dyslexic • ADHD • Motor Impairment • Colour Blind
  20. 20. What did we learn? 23 Recruitment is key
  21. 21. What did we learn? 24 Choice overload
  22. 22. What did we learn? 25 Colour Contrast
  23. 23. Design
  24. 24. Re-brand
  25. 25. The colour palette 28 #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
  26. 26. Pattern Library 29
  27. 27. Development Section title 30
  28. 28. Recurring themes
  29. 29. Missing attributes 32
  30. 30. Missing attributes 33 <img src="https://placekitten.com/g/200/300" />
  31. 31. Missing attributes 34 <img src="https://placekitten.com/g/200/300" alt="" />
  32. 32. Missing attributes 35 <img src="https://placekitten.com/g/200/300" alt="Kitten looking confused" />
  33. 33. Missing attributes 36
  34. 34. Missing attributes 37
  35. 35. Anchor tags without href. 38 <li> <a class="a-class">a link</a> </li> <li> <a class="a-class">a link</a> </li>
  36. 36. Anchor tags without href. 39 <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>
  37. 37. Is it a button or a link? 40 “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/
  38. 38. :focus 42 /* remember to define focus styles! */ :focus { outline: 0; } http://www.outlinenone.com/
  39. 39. Marking up a things correctly 43 <label>Enter your name:</label> <input type="text” />
  40. 40. Marking up a things correctly: 44 <label for="name">Enter your name:</label> <input type="text" name="name" id="name”/>
  41. 41. Testing Section title 46
  42. 42. Automate all the things 47
  43. 43. Turning CSS off 48
  44. 44. Turning CSS off 49
  45. 45. Keyboard navigation possible? 50
  46. 46. Sass linting 51
  47. 47. The present and future
  48. 48. Careers site
  49. 49. 54 Core Pattern Library “sparkplug”
  50. 50. 55
  51. 51. Inclusive Design Guild Section title 56
  52. 52. 0.24%! (approx.) Section title 57
  53. 53. Training 59 https://eu.udacity.com/course/web-accessibility--ud891
  54. 54. Assistive tech & screen readers 60 https://www.nvaccess.org/
  55. 55. Training 61 - Semantics & web standards - Validation - Aria
  56. 56. Pull requests and code reviews 62
  57. 57. Section title 63 - JFDI - Something - Something - Code stuff
  58. 58. So in summary: - Awareness is important - Start a guild! - It’s not easy, or quick - But it’s rewarding! 64
  59. 59. “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
  60. 60. Section title 66
  61. 61. Thank you. @_gbbns @ux_lady
  62. 62. Q&A Section title 68

×