Making Kiwi.com's design system accessible
1 like189 views
The document discusses making a design system accessible. It emphasizes the importance of buy-in from stakeholders and understanding accessibility. Key points include establishing an accessibility roadmap, following WCAG guidelines, implementing patterns like skip links, conducting accessibility testing with tools like Axe and Lighthouse, and continually fixing common issues like missing labels and colors to set an accessible standard. The goal is to benefit more users than expected by keeping the web accessible by default.
Making Kiwi.com's design system accessible
- 1. Making design system accessible Filip Daniško
- 2. Who am I? Front-end developer at kiwi.com working on Orbit design system @filipdanisko on twitter
- 7. Obstacles “What’s the value of focusing on accessibility?”
- 9. Tie accessibility to business case
- 13. Why labels?
- 15. Screen reader be like: “Button”
- 16. Impossible
- 17. Screen readers are everywhere Try them!
- 18. WCAG
- 21. Patterns
- 22. Skip link
- 25. Axe Lighthouse
- 28. Repeated issues
- 29. Labels Colors
- 30. Missing focus * { outline: none; }
- 31. Missing navigation in custom components
- 32. Easy to spot and fix
- 33. Set standard
- 36. But why?
- 39. Good luck!
- 41. It's our responsibility to get the right message to the right people at the right time
- 45. Discuss
- 47. Wrapping it up
- 48. Benefits more users than you might think
- 49. Understanding is key to making your product accessible
- 50. The web is accessible by default, and we should keep it that way.