Design Systems London 2019 - Kathleen McMahon

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.