Download as PDF, PPTX
Uploaded byTiffany Tse
Accessibility At Scale - Tiffany Tse - Shopify
This document discusses building accessible and inclusive design systems. It provides examples of implementing accessibility best practices like WCAG and ARIA guidelines. It also emphasizes the importance of maintaining design systems, documenting components, and creating a culture of contribution to support accessibility.
Accessibility At Scale - Tiffany Tse - Shopify
- 1.
- 2.
- 3.
- 4.
- 6.
- 7. DesignSystem What is adesign system? @tiffany_tse
- 8.
- 9.
- 10. Content / WritingPatterns / Components Code Voice and Tone Design Brand Identity @tiffany_tse
- 11.
- 12.
- 13.
- 16. Consumedbothinternallyandexternally Marketing Assets Projects 62 PolarisReact Weekly Downloads 60k+Polaris Projects 32 @tiffany_tse
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. 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
- 23.
- 25. WCAG Do you say“wuh-cag” or “wic-ag”? @tiffany_tse
- 26.
- 28.
- 30.
- 31.
- 32. 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
- 33. 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
- 35.
- 36. aria-pressed migrate transform -Cconfig.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
- 37. aria-pressed migrate transform -Cconfig.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
- 38. ActualImplementation migrate transform -Cconfig.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
- 39. ActualImplementation migrate transform -Cconfig.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
- 40.
- 41.
- 42.
- 43. Design & Development Design System Website / Application Design& Development Design System Website / Application @tiffany_tse
- 44. 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
- 45.
- 48.
- 50.
- 51.
- 53.
- 54.
- 55.
- 58.
- 59. WindowsHighContrast migrate transform -Cconfig.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
- 60.
- 63.
- 64. aria-live migrate transform -Cconfig.yml -O customer customer.csv1 2 3 4 5 6 <button aria-label="Copy code sample" aria-live="polite" > Copy </button> @tiffany_tse
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.