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.

Accessibility At Scale - Tiffany Tse - Shopify

89 views

Published on

Component driven development helps break projects into manageable pieces, and concrete examples help speed up development time, improve on-boarding as well as build more reliably. As the projects we build become more complex, we can choose to build systems that scale and help to abstract complexity to improve the workflow of our teams. By thinking about inclusive design and accessibility from the start, we can ensure that the systems we build go beyond just templating, and create a strong foundation for the future of the web.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Accessibility At Scale - Tiffany Tse - Shopify

  1. 1. Building Systemsfor Accessibility
  2. 2. Toronto PupOwner Shopify
  3. 3. Toronto PupOwner Shopify @walnuttheassie
  4. 4. Toronto PupOwner Shopify @tiffany_tse
  5. 5. ShopifyGitHub Repositories 3000+ https://github.com/orgs/Shopify@tiffany_tse
  6. 6. DesignSystem What is a design system? @tiffany_tse
  7. 7. Thegenerally-accepteddefinitionof adesignsystemisthatit’stheouter circle—itencompassespattern libraries,styleguides,andanyother artefacts.Butthere’ssomething more… adactio.com/journal/13844 Jeremy Keith on Design Systems @tiffany_tse
  8. 8. Justbecauseyouhaveacollectionof designpatternsdoesn’tmeanyou haveadesignsystem.Asystemisa framework.It’sarulebook.It’swhat tellsyouhowthosepatternswork together. adactio.com/journal/13844 Jeremy Keith on Design Systems @tiffany_tse
  9. 9. Content / Writing Patterns / Components Code Voice and Tone Design Brand Identity @tiffany_tse
  10. 10. Shopify’s Systems @tiffany_tse
  11. 11. @tiffany_tse Onesize doesn’tfitall Shopify’s Systems
  12. 12. @tiffany_tse CodeStyle Guides Shopify Marketing Design System Polaris
  13. 13. Consumedbothinternallyandexternally Marketing Assets Projects 62 Polaris React Weekly Downloads 60k+Polaris Projects 32 @tiffany_tse
  14. 14. Accessibility @tiffany_tse
  15. 15. Accessibility Responsive ROI @tiffany_tse
  16. 16. Oneinfour noninstitutionalizedU.S. adults(25.7%,estimated
 61.4millionpersons)reported adisability https://www.cdc.gov/mmwr/volumes/67/wr/mm6732a3.htm Prevalence of Disabilities and Health Care Access, 2016 @tiffany_tse
  17. 17. This includes @tiffany_tse
  18. 18. Prevalenceof disabilityincreases aspeoplegetolder @tiffany_tse
  19. 19. UK:Internetuse,55+yearsold 0% 2011 2017 100% 50% AGES 75+ AGES 65 - 74 AGES 55 - 54 @tiffany_tse ons.gov.uk/businessindustryandtrade/itandinternetindustry/bulletins/internetusers/2017
  20. 20. Internetuseamongthose aged65to74roseto81%
 in2016. statcan.gc.ca/daily-quotidien/171114/dq171114a-eng.htm Canadians at Work and Home @tiffany_tse
  21. 21. WCAG Do you say “wuh-cag” or “wic-ag”? @tiffany_tse
  22. 22. WCAGisdevelopedthroughtheW3C processwithagoalofprovidingasingle sharedstandardforwebcontent accessibility. w3.org/WAI/intro/wcag WORLD WIDE WEB CONSORTIUM @tiffany_tse
  23. 23. Foranyauto-updatinginformation that(1)startsautomaticallyand(2)is presentedinparallelwithother content,thereisamechanismforthe usertopause,stoporhideit w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html WCAG Pause, Stop, Hide 2.2.2 @tiffany_tse
  24. 24. WAI-ARIA “why-ar-i-ah” or “wa-ar-ea”? @tiffany_tse
  25. 25. @tiffany_tse LikeCSS
 forassistive technologies WAI-ARIA
  26. 26. ARIA 1 2 3 4 5 6 7 8 9 10 <div role="status" aria-live="polite" > <img src="success.svg" alt=""> Success! </div> @tiffany_tse
  27. 27. 1 2 3 4 5 6 7 8 9 10 <div role="status" aria-live="polite" > <img src="success.svg" alt=""> Success! </div> ARIA @tiffany_tse
  28. 28. aria-pressed Toggling pressed states @tiffany_tse
  29. 29. aria-pressed migrate transform -C config.yml -O customer customer.csv<div> <button type="button" aria-pressed="false"> <svg> </button> <video> </div> 1 2 3 4 5 6 7 8 @tiffany_tse
  30. 30. aria-pressed migrate transform -C config.yml -O customer customer.csv<div> <button type="button" aria-pressed="true"> <svg> </button> <video> </div> 1 2 3 4 5 6 7 8 @tiffany_tse
  31. 31. ActualImplementation migrate transform -C config.yml -O customer customer.csvimport { BackgroundVideo } from 'marketing-assets'; const el = document.querySelector('.js-background- video'); const backgroundVideo = new BackgroundVideo(el); 1 2 3 4 5 6 7 8 @tiffany_tse
  32. 32. ActualImplementation migrate transform -C config.yml -O customer customer.csv<%= ui_background_video 'styleguide/about-video', fallback_image: 'styleguide/video-placeholder.jpg', class: ‘background-video',
 autoplay: true, skin: 'dark', position: 'bottom-left' %> 1 2 3 4 5 6 7 8 @tiffany_tse
  33. 33. Maintaining Systems @tiffany_tse
  34. 34. Design & Development Design System Website / Application @tiffany_tse
  35. 35. Systemfirst Applicationssecond @tiffany_tse
  36. 36. Design & Development Design System Website / Application Design & Development Design System Website / Application @tiffany_tse
  37. 37. Byhavingwell-definedprocessesand guidelinesforcontribution,wemakesure thattheextensiveworkdonebyourproduct teamsarefedbacktothesystemwhen possible. booking.design/lessons-learned-building-a-design-system-at-scale Arda Karaçizmeli - booking.com Lessons Learned Building a Design System at Scale @tiffany_tse
  38. 38. Documentation @tiffany_tse
  39. 39. Focus
 management @tiffany_tse
  40. 40. @tiffany_tse
  41. 41. Colorisnotusedastheonlyvisual meansofconveyinginformation, indicatinganaction,promptinga response,ordistinguishingavisual element. w3.org/TR/WCAG20/#visual-audio-contrast-without-color 1.4.1 Use of Color @tiffany_tse
  42. 42. Building
 Empathy @tiffany_tse
  43. 43. Creatinga Cultureof Contribution @tiffany_tse
  44. 44. NotSoSecret Benefits @tiffany_tse
  45. 45. @tiffany_tse ProgressLoading
  46. 46. WindowsHighContrast migrate transform -C config.yml -O customer customer.csv@media screen and (-ms-high-contrast: active) { background-color: ms-high-contrast-color('disabled-text'); } 1 2 3 4 5 6 7 8 @tiffany_tse
  47. 47. WindowsHighContrast @tiffany_tse
  48. 48. aria-live Creating live regions @tiffany_tse
  49. 49. aria-live migrate transform -C config.yml -O customer customer.csv1 2 3 4 5 6 <button aria-label="Copy code sample" aria-live="polite" > Copy </button> @tiffany_tse
  50. 50. @tiffany_tse
  51. 51. UnderstandYour Audience @tiffany_tse
  52. 52. Shared Vocabulary @tiffany_tse
  53. 53. Empathy @tiffany_tse
  54. 54. BuildingaCulture ofContribution @tiffany_tse
  55. 55. Accessibilityis thenew responsive. @tiffany_tse
  56. 56. Accessibilityis thenew responsive. @tiffany_tse
  57. 57. Thanks! @tiffany_tse

×