Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessibility for Design System 2019

Paya Do
July 11, 2019

Accessibility for Design System 2019

How to bring accessibility principles & practices to your design system as a foundation for an inclusive product.

Paya Do

July 11, 2019
Tweet

More Decks by Paya Do

Other Decks in Design

Transcript

  1. Introduction I have 3 dogs and a few cats Countries

    i have lived: Vietnam, US, Singapore, Japan Before 10: sewing, drawing, crafting dumb devices, very good at mathematics Before 20: studying law, still drawing and crafting dumb devices 21 ~ now: made games, made e-commerce systems (Amazon, Diesel, Marc Jacobs, Michael Kors, Ray-Ban etc.). Now with Mercari. Still pushing pixels & liking dumb devices I like visual & interface design. I code sometimes. Last year i joined Firebase Summit, gave some talk about Design System (once at Google Tokyo office), just came back from Google I/O’19.
  2. Mercari Japan Help guide UI Adding keyword search form with

    auto-complete Changing to drop-down menu Adding web / desktop version Customer support chatbot
  3. A Design System is the single source of truth a

    patterns language that will allow the teams to design & develop an idea/solve a problem to make a product is not a guideline is able to bring value & measurable success to your team
  4. UI Elements Atomic Design is a popular methodology with 5

    component stages. Follow the fundamentals, also customize to fit your team. Look for “Atomic Design” by Brad Frost
  5. Guidelines How to make decisions? How to documentate? Dev book

    Principles in day to day design, engineering, and product work https://material.io/design/usability/accessibility.html#implementing-accessibility
  6. Why a11y? To make better choices for your users. More

    and more people of all abilities/economies are having access to the internet & smartphones. Helps us focus on what really matters -> we will be able to simplify things We are all temporarily abled
  7. Accessibility: Inclusive & Ethical Design Elise Roy’s talk, who became

    deaf at the age of 10. • Average is useless • Designing for disability uncovers hidden needs • Helps us focus on things that matter the most, and we can simplify things.
  8. Accessibility: Live Caption Live, on-device captions for any video you

    watch on your Android device, coming later this year with Android Q Use cases: people with hearing difficulty, talking on a phone with noisy background, etc.
  9. “In Vietnam, the survey found that over 7 per cent

    of the population aged 2 years and older, – around 6.2 million, have a disability but an additional 13 per cent - nearly 12 million, live in a household with a person with a disability.” “Asia is the largest growing market for smartphones.” “30% of users in India search primarily using voice.” https://www.unicef.org/vietnam/press-releases/launch-key-findings-viet-nams-first-large-scale-national-survey-people-disabilities
  10. Perceivable Color & Contrast Web Content Accessibility Guidelines (WCAG) 2.1

    285 million people who are visually impaired around the world https://www.butterfly.com.au/blog/design/heres-why-you-need-a-wcag-friendly-digital-design-system A (minimal): Low AA (mid): standard AAA (highest)
  11. Dark Theme Android Q Saving up to 60% of phone

    battery Enhance accessibility
  12. Operable Keyboard accessible, Navigation through things Mercari Transaction Checker Tool:

    navigation through keyboard, error tolerant, focus oder, used daily by non-dev employees.
  13. Operable Touch target sizing Simple principle: Make your targets big

    so that they are easy for the users to tap. Apple’s Human Interface Guidelines: minimum 44px Google’s Material Design: minimum 48px Microsoft’s Windows Phone UI Design & Interaction Guide: recommended 34px
  14. Understandable Predictable & consistent Labelling: screen readers can render to

    explain the meaning of UI elements Keyword: screen reader as “assistive technology”
  15. Robust “Everything works” Some are slower, some are faster to

    adopt new technologies. But everyone is allowed to choose their own method to access the internet content. Clean, standard code that helps assistive technologies react correctly.
  16. A11y is not difficult. One bite at a time. Start

    with... Focus on user, not the technology
  17. The repository of publicly available design systems and pattern libraries.

    Contrast Analysis & Accessibility guidelines ready-systems are some good references (with Material Design too) ‘https://adele.uxpin.com/’
  18. Check the contrast ratio The most common accessibility failure. Golden

    number 4:5:1 or at least meet the AA standard Colorable tool https://colorable.jxnblk.com/
  19. Clean code & robust content 68% of homepages are missing

    alternative text/image. Lighthouse tool for Chrome Droidcon homepage: 65/100 score
  20. Testing + Manual testing: Interact with your app using Android/iOS

    accessibility services. + Testing with analysis tools: Use tools to discover opportunities to improve your app's accessibility. + Automated testing: Turn on accessibility testing in testing library. + User testing: Get feedback from real people who interact with your app.
  21. Go beyond & do not stay average Devices are getting

    more affordable. Communication technology and designing for the extreme can develop better solutions, and make a good product, not just to do good. Let’s include as many people as possible.