Design Systems London 2019 - Kathleen McMahon
15 November 2019
- They’re part of a small team so they had to focus on small things to start with
- Business logic out, accessibility first in.
- You Design System is a cookbook. A cookbook has a personality.
- Design Systems and React
- “React fully supports building accessible website often by using standard HTML and CSS techniques.
- React is a utensil.
- Creating a component is like following a receipt start with high quality ingredients - HTML
- It is very important to create ‘guard rails’ for your components to make sure developers are always using the accessibility feature you have built in for them.
- Buttons performa an action on a page - should look and act like a button. Screenreader support comes ‘for free’ when using a
- Buttons should only receive inline elements as children. A not a
- Inputs need label and error messages. Placeholder are NOT labels.
- Make inputs a max character count of 80. Keep labels stacked close. Labels above input, errors below input.
- Documentation. Those massive Design Systems in public are drool-worthy.
- In a small team you need to include the documentation that is required to start.
- Include helpful hints into your documentation. Show people how to properly implement a component. Component Do’s and Don’ts are essential
- Include a dedicate page to accessibility resources.