A self confessed ‘dev dinosaur’ it can feel overwhelming when there seems to be a new JavaScript every week.
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.
You are the cook. You have to know the standards of HTML, CSS, and Javascript and what you need to do to make things accessible.
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.